how to call jquery ajax on click event

Question

i made a jquery modal.

am trying to populate data using Ajax inside modal.

I am getting an id , using that i wanna populate data using AJax.

how shud i call ajax on click event...

is there any other event the modal is open or loaded...

modal is just a div show hide thing...

Answer 1

Simply using:

JS:

$(document).ready(function(){
  $('a.pop').click(function() { 
    var popID = $(this).attr('rel');
    $.get('content.php', { ref:popID }, function(data) {
       $(popID+'Container').html(data);
       $(popID).dialog();
       alert('Load was performed.');
    });
    return false; // prevent default
  });
});

HTML:

<div id="example" class="flora" title="This is my title">
    I'm in a dialog!
    <div id="exampleContainer"></div>
</div>
<a href="#" id="clickingEvent" class="pop" rel="example">click to launch</a>

It is not tested, but as I see it, it should work...

Answer 2

You almost have it, you need to prevent the default action which is to follow the href in the link, so add either event.preventDefault() or return false, like this:

$('a.pop').click(function(e) {                     //add e param
  var popID = $(this).attr('rel'),
      popURL = $(this).attr('href');
  $.get("content.php", { ref:id}, function(data) { //did you mean popID here?
    alert("Data Loaded: "+data ); 
  });
  e.preventDefault(); //or return false;           //prevent default action
});