I made a jQuery model.
Am trying to populate data using AJAX inside that model.
I am getting an id and using that I want to populate data using AJAX.
How should I call AJAX on click event?
Is there any other event when the model is opened or loaded?
The model is just the showing and hiding of div.
The ajax() method in jQuery is used to perform an AJAX request or asynchronous HTTP request. Parameters: The list of possible values are given below: type: It is used to specify the type of request. url: It is used to specify the URL to send the request to.
To retrieve that page using jQuery's AJAX function, you would simply use some javascript similar to the following. $. ajax({ url: 'test. html', dataType: 'html' });
You can set the option "async" to false (for the first ajax call). This means that function 2 will be called after function 1 has received a response, i.e. finished it's execution.
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...
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With