I have a javascript files that is suppose to interact with the response of my ajax request but apparently the javascript can't read the response from the ajax request.
What I'm asking is, how can I make my jquery plugin read the class in the response of my ajax request?
This is how my script looks without ajax:
<body>
<div id="main_content">
<!--this is where the ajax is returning the info-->
</div>
</body>
<body>
<div id="main_event_saff">
<!--this is an example of the ajax returns-->
<table>
<tbody>
<tr>
<td class="header">Header</td>
</tr>
<tr>
<td class="data">Data</td>
</tr>
</tbody>
</table>
</div>
</body>
Ajax file:
$(document).ready( function rankings(callback){
$.ajax({
url: 'ajax/rankings.php',
type: 'GET',
success: function(response){
$('#main_event_saff').html(response);
}
});
});
Here's the plugin that I want to read the response of the ajax request:
$(document).ready(function () {
$(".data").hide();
$(".header").click(function () {
$(this).next(".data").slideToggle(200);
});
});
This doesn't work because it can't read the ajax request
just like the page source it only see's
As you said you are using jQuery, why not this
$(document).ready( function rankings(callback){
$.ajax({
url : 'ajax/rankings.php',
type : 'GET',
data : 'yourData',
success : function(response){
$('#main_event_saff').html(response);
}
});
});
this will make your work easy
You haven't used
id="main_event_staff"
in your HTML so how would you eventually read/write to its inner HTML.
You can use simply $.load() a jQuery ajax request:
$( "#main_event_saff" ).load( "ajax/rankings.php" );
You might want to do something more on getting the response :
$( "#main_event_saff" ).load( "ajax/rankings.php", function() {
alert( "Load was performed." );
});
Click event on dynamic element should work like this.
$(document).ready(function () {
$("#main_event_saff").on('click', '.header',function () {
$(this).next(".data").slideToggle(200);
});
});
for more information take a look on the .on()