How to call jQuery AJAX on click event?

Question

I created a jQuery model.

I am trying to populate data using AJAX inside this model.

I get the identifier and using this, I want to populate the data using AJAX.

How do I call AJAX in the click event?

Is there any other event when opening or loading a model?

A model is just showing and hiding a div.

Answer 1

Just 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 should work ...

Answer 2

You almost have this, you need to prevent the default action that should follow the href in the link, so add event.preventDefault() or return false , for example:

 $('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 });