Currently working on a WordPress theme where I am implementing AJAX to load new archive pages. However, encountering an issue where the entire block of Javascript code is not being included in the newly fetched content.
Let's say, initially the structure looks like this :
<div id="post-1">
<script type="text/javascript">
//some codes here//
</script>
<div class="content">
</div>
</div>
But after navigating to the next page and back using AJAX, the returned content doesn't include the script section as shown in Firebug :
<div id="post-1">
<div class="content">
</div>
</div>
The Javascript codes are still visible under the 'Inline' script in the 'Script' tab of Firebug, but missing from the actual content.
Looking for guidance on what could be causing this glitch in fetching new content via AJAX? Below is the snippet of code being utilized:
jQuery('.ajax-pagination a').live('click', function(e){ //capture click event on pagination link
e.preventDefault();
var link = jQuery(this).attr('href'); //Get the href attribute
jQuery.ajax({
url: link,
dataType: "text",
context: document.body,
beforeSend: function(){jQuery('#container').fadeOut(500)},
success: function(html) {
var newhtml = $('#container', $(html))
$('#container').html(newhtml);
$("container").find("script").each(function(i) {
eval($(this).text());
});
jQuery('#container').fadeIn(500);
},
error: function() {
alert('Error');
}
});
});
Attempting to execute the loaded Javascript content through AJAX, however, it seems like the Javascript itself isn't getting included along with the other content.
Appreciate your time in going through the detailed query, any assistance would be immensely valuable!