Custom Infobox html content and jQuery

Feb 29, 2012 at 8:17 PM

Hi, I have just started using Bing Maps and this custom infobox exactly what I needed. It works great and I can css my html content. One thing I can't do is use jQuery to show and hide tabs inside the info box. Is this something I should be able to do or will custon infobox not allow this?

I have the follwing html:
 
 //Define the layout contents in the infobox
 var html = ["<div id='tabs' style='padding:10px'>"];
 html.push("<ul><li><a href='#tab-1'>tab 1</a></li><li><a href='#tab-2'>more stuff</a></li><li><a href='#tab-3'>even more stuff</a></li></ul>");
 html.push("<div id='tab-1'><p>", e.target.description, "</p></div>");
 html.push("<div id='tab-2'><p>more</p></div>");
 html.push("<div id='tab-3'><p>stuff</p></div>");
 html.push("</div>");

These 3 div and the tab list display but the jQuery below just does not work:

 jQuery(document).ready(function($){
 $('#myMap_infobox').hide(); // Hide all divs
 $('#tabs div:first').show(); // Show the first div
 $('#tabs ul li:first').addClass('active'); // Set the class of the first link to active
 $('#tabs ul li a').click(function(){ //When any link is clicked
 $('#tabs ul li').removeClass('active'); // Remove active class from all links
 $(this).parent().addClass('active'); //Set clicked link class to active
 var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
 $('#tabs div').hide(); // Hide all divs
 $(currentTab).show(); // Show div with id equal to variable currentTab
 return false;
 });

This jQuery works fine in the html tabs outside the infobox

Any ideas?

Thanks, Dan

Coordinator
Mar 1, 2012 at 4:36 PM

Hi.

The reason you can't get your tabs to work is that the infobox re-renders as you move the map around. This results in click events being released. To get around this you can add a click event to your div's in the form of onclick='Showtab()'