Search the Community

Hi. I'm trying to display a list of items i have in my database. It displayed correctly as how i wanted it to. However, there is a button which popup a jQuery div tag. It pop up correctly, just that it only show the 1st content in my database table. I believe it is the jQuery ID that is confused but I just don't know how to define the ID separately in jQuery. Below is my code: HTML: //My Button <a href="#" id="map_link" class="topopup-map"> <div class="self-drive-view-map-button"> <img src="images/content/map-icon.png" height="23px"> </div> </a> //My Pop-Up Div <div id="toPopup-map"> <div id="popup_content_map"> <?php echo $map; ?> </div> </div> jQuery: jQuery(function($) { $("a.topopup-map").click(function() { loading(); setTimeout(function(){ loadPopup(); }, 500); return false; }); /* event for close the popup */ $("div.close").hover( function() { $('span.ecs_tooltip').show(); }, function () { $('span.ecs_tooltip').hide(); } ); $("div.close").click(function() { disablePopup(); }); $(this).keyup(function(event) { if (event.which == 27) { disablePopup(); } }); $("div#backgroundPopup").click(function() { disablePopup(); }); $('a.livebox').click(function() { alert('Hello World!'); return false; }); /************** start: functions. **************/ function loading() { $("div.loader").show(); } function closeloading() { $("div.loader").fadeOut('normal'); } var popupStatus = 0; function loadPopup() { if(popupStatus == 0) { closeloading(); iframe_code = $('#toPopup-map').html(); $('#toPopup-map').html(iframe_code).fadeIn(500); $("#backgroundPopup").css("opacity", "0.7"); $("#backgroundPopup").fadeIn(0001); popupStatus = 1; } } function disablePopup() { if(popupStatus == 1) { $('#toPopup-map').html(iframe_code).fadeOut(500); $("#backgroundPopup").fadeOut("normal"); popupStatus = 0; } } /************** end: functions. **************/ }); // jQuery End Any solution?