i am trying to get information(ajax) and display it inside a popup(jquery or equivalent) however my problem is i have multiple div tag in my page.
<div id="1"><a href="#">mouseover detail for id #1</a></div>
<div id="2"><a href="#">mouseover detail for id #2</a></div>
<div id="3"><a href="#">mouseover detail for id #3</a></div>
OR
<div><a href="get.php?id=1">mouseover detail for id #1</a></div>
<div><a href="get.php?id=2">mouseover detail for id #2</a></div>
<div><a href="get.php?id=3">mouseover detail for id #3</a></div>
Thanks for any help.
Add a class for the divs to let you write generic code like..
<div class="someclass" data-id="1"><a href="#">mouseover detail for id #1</a></div>
<div class="someclass" data-id="2"><a href="#">mouseover detail for id #2</a></div>
<div class="someclass" data-id="3"><a href="#">mouseover detail for id #3</a></div>
And then write code like...
var SM=null;
$('.someclass').hover(function(){
var data=$(this).attr('data-id');
if(data==null) return;
var url='get.php?'+data;
$.get(url,function(response){
// taken from simplemodal samples page.
SM = new SimpleModal({"btn_ok":"Alert button"});
SM.show({
"title":"Title",
"contents":response
});
},function(){
// not sure about the close method.
// probably SM.close() or SM.hide(). If you have worked on it, add it here.
});
});