Getting AJAX to display javascript

[Dannyboyni]

Following this tutorial javascript doesnt work with AJAX generated content.

How would I go about getting javascript to work with AJAX displayed content based on that tutorial?

Many thanks.

[jpmcde]

I have the same question — for content created with an AJAX call, where do you place the script so that it affects the content or do you use .live() or .delegate()?

[Dannyboyni]

This seems to be a complex problem, as no one has given an answer as of yet. I so wish the tutorial I linked to had incorporated getting javascript to work.

[Dannyboyni]

Ok I managed to successfully load a test script by using this code on the page.

$.getScript("js/test.js", function (xhr) {

try {

CAGinit();

} catch(err) {

eval(xhr);

CAGinit();

}

});

Here is the content of that test script

$(".result").html("
It Works!
");

I have placed

inside the guts div.
This code works when I go to the specific page url. However whenever I click using the navigation and the same page is generated by ajax, the script does not load.

I take it I must put the $getscript somewhere inside the dynamicpage.js so it is passed onto the ajax loaded content?

Very confused and would love to know how to get this working. I have searched for days for tutorials and am having no luck.

[Dannyboyni]

Ah I think I got it working now. Now that I have got that simple test script working. How would I go about loading multiple scripts?

Here is the code for my single test script.

$(function() {



var newHash      = "",

$mainContent = $("#main-content"),

$pageWrap    = $("#container"),

baseHeight   = 0,

$el;



$pageWrap.height($pageWrap.height());

baseHeight = $pageWrap.height() - $mainContent.height();



$("#projectimages").delegate("a", "click", function() {

window.location.hash = $(this).attr("href");

return false;

});







$(window).bind('hashchange', function(){



newHash = window.location.hash.substring(1);



if (newHash) {

$mainContent

.find("#guts")

.fadeOut(200, function() {

$mainContent.hide().load(newHash + " #guts", function() {

$mainContent.fadeIn(900, function() {

$pageWrap.animate({

height: baseHeight + $mainContent.height() + "px"

});

});

//get script start

$.getScript("js/test.js", function (xhr) {

try {

CAGinit();

} catch(err) {

eval(xhr);

CAGinit();

}

});

//get script end

$("#projectimages a").removeClass("current");

$("#projectimages a[href="+newHash+"]").addClass("current");

});

});

};

});

$(window).trigger('hashchange');

});

[Dannyboyni]

Ok I am still struggling to load two scrips. Basically I have script.js, and cycleall.js

I have 2 images on the page, and they are going to be a slideshow which fades between the two images. I need the script.js which hides the 1 slide and cycleall.js which will do the fade transitions.

I thought it would be a simple matter of just adding two get scripts with the names of these scripts and it would work.

You can see that it does work on projects2.php however the generated ajax page it doesnt work. This puzzles me as my test script worked on the ajax generated page.

[Author]

Posts