PDA

View Full Version : Scripts dont load for AJAX generated content - Help Please



ThatBloke
10-18-2011, 11:26 AM
Hi All

I'm going to keep this simple. I'm using a hashchange plugin for my page navigation

I can't get scripts to run for the AJAX generated content. They run perfectly without the hashchange

Here is a link to my current project:

http://www.bluecoast.co.uk/test/temptation

Here is the script that handles the hashchange:


$(function() {

var newHash = "",
$mainContent = $("#right"),
$pageWrap = $("#wrap"),
baseHeight = 0,
$el;

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

$("nav").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(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};

});

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

});

I'm loading the scripts in the header of the main index.php page like so:


<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>

<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="js/custom.js"></script>

Would somebody be kind enough to help me with this?

Thanks in advance
Craig

nikomou
10-18-2011, 02:46 PM
I'm having a similar problem..

I am loading external content using .load, I have functions in the main document which is called from the external content, but nothing happens!

If I include the external content using php include then those functions work! but obviously I would like to do this with jquery too!

ThatBloke
10-18-2011, 03:01 PM
Hi Nikomou

It would work with php includes as that's processed server side before the page is served and the scripts are run. Meaning the elements are already present when the functions are called

I think the problem here is the the new elements are not added to the DOM and so the scripts ignore them

It's a pain as I know what needs to be done, I just can't do it! lol

nikomou
10-18-2011, 04:06 PM
Hi ThatBloke,

I found a post here - http://stackoverflow.com/questions/3114739/loading-elements-into-the-dom-with-jquery

which lead me to the live() api - http://api.jquery.com/live/

Any idea how to implement it?

Niko

jscheuer1
10-18-2011, 04:26 PM
If you're using .load() to import contents via AJAX and you have something like $('.whatever').click(function() . . .

You can do instead:


$('.whatever').live('click', function() . . .

You can do this with any event and it will apply to $('.whatever') whenever it shows up. But you can only do it with events. That gives you a lot to work with, but might require that you rethink things a little or a lot. If all you're trying to do is attach an event though, .live() works virtually seamlessly as a substitute for the event. See:

http://api.jquery.com/live/

for more info.

ThatBloke
10-19-2011, 08:55 AM
Thanks jscheuer1

nikomou - I've found an easier solution which works a treat for me. jscheur1's solution will also work:

Create an anonymous function that calls another function on document ready, I've called mine init:


$(document).ready(function() {
init();
});

Then include all your custom scripts (not libraries or plugins as they're already loaded) in the init function, e.g:


function init() {
//Include all your scripts here//
}

Hope it helps