Home › Forums › JavaScript › Getting AJAX to display javascript
- This topic is empty.
-
AuthorPosts
-
March 19, 2012 at 10:07 am #37226
Dannyboyni
MemberFollowing 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.
March 19, 2012 at 3:21 pm #99439jpmcde
MemberI 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()?
March 21, 2012 at 11:54 am #99628Dannyboyni
MemberThis 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.
March 21, 2012 at 5:43 pm #99652Dannyboyni
MemberOk 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.
March 21, 2012 at 6:18 pm #99659Dannyboyni
MemberAh 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');
});
March 21, 2012 at 7:17 pm #99669Dannyboyni
MemberOk 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.