Grow your CSS skills. Land your dream job.

jQuery doesn’t execute on div loaded with ajax

  • # January 15, 2013 at 11:42 pm

    Hi everybody,

    I’m stuck since a couple of months in a very easy code (at least, I think should be a very easy solution but I can’t find it…).
    I’m developing a website using PHP,MySQL,AJAX,Javascript,HTML5,css3… What I’m trying to do is load an external html file and have the Javascript that is embedded execute.

    The ajax load I’m trying to use is this

    $(document).ready(function(){

    $(“.meny a”).click(function(){
    page=$(this).attr(“href”);
    $.ajax({
    url: “includes/”+page,
    cache:false,
    success:function(html){
    afficher(html);
    },

    error:function(XMLHttpRequest,textStatus,errorThrown){
    alert(testStatus);
    }
    })

    return false;
    });
    });

    function afficher(data){
    $(“#main”).fadeOut(500,function(){
    $(“#main”).empty();
    $(“#main”).append(data);
    $(“#main”).fadeIn(1000);
    })
    }
    when the content of the page is loaded directly javascript(or jQuery) functions working fine, but when the div tag that found in the content of another page loaded by AJAX, javascript(or jQuery) not working on this div, while jquery scripts are already stored in the “head” tag . it is noted that the page i try to load with ajax doesn’t contain javascript ! all javascript and jQuery are already stored in the “head” tag in the first page !

    I think that the problem is the AJAX, since it’s working fine when I call directly the page which contains the Javascript.
    I hope somebody can help me with this. Thank so much in advance and sorry for my baad English :)

    If you have any doubt or you need more information to help me, please, don’t hesitate to ask me.

    Thanks!

    # January 16, 2013 at 9:39 am

    jQuery actually removes any javascript it encounters in an ajax call. They do it on purpose to prevent issues in IE. Here is the actual snippet from jQuery 1.8.3 (lines 7479-7481):

    // inject the contents of the document in, removing the scripts
    // to avoid any ‘Permission Denied’ errors in IE
    .append( responseText.replace( rscript, “” ) )

    In line 7291 is where it defines the `rscript` regex: `rscript = /)< [^<]*)*/gi,`

    So your best solution would be to include the javascript you want to run on your page, and load it when the associated page is being loaded. Something like this:

    $.ajax({
    url: “includes/”+page,
    cache:false,
    success:function(html){
    // look for the page name in the URL “somepage”
    if (/somepage/.test(page)) {
    // run code for “somepage”
    myCodeForSomePage();
    }
    afficher(html);
    },

    error:function(XMLHttpRequest,textStatus,errorThrown){
    alert(testStatus);
    }
    })

    # January 16, 2013 at 11:23 am

    thx for you anser Mottie

    it’s seems you figure out the real problem and you’re right ! so what should i do exactly in ‘myCodeForSomePage()’ ? do i can use the filename in jquery to callback function ?

    i’m just beginner on jQuery , if you can provide me some code to try with it, it will be verry helpful .

    i appreciate your help :)

    # January 16, 2013 at 5:09 pm

    Well whatever code you had in the page you were loading should be added to that function. I have no idea what was in that page so I didn’t know what to add in there. But there are some important questions that need to be answered first:

    1.Do you have code on more than one page?

    2.Does every page that needs code use the same code, like to initialize tooltips or something?

    3.Could you just use [jQuery's `delegate()`](http://api.jquery.com/delegate/) function to apply to dynamically added content?

    # January 16, 2013 at 8:38 pm

    1 – I have more than one page , but thos auther pages contain just the html or php code, that code can loaded by ajax into (div id=”main”, in the first page ) , all javascript (lib , pluging , functions ..) i stored in diferent file .js , i call all thos file in the head tage .

    2- yes probably some pages needs the same code javascript .

    3- i never use jQuery delegate() before , like i say i’m just beginner on jQuery . :(

    i hope if you can provide me an example .

    and thanx Mottie ! :)

    # January 18, 2013 at 12:11 am

    any one can help her ???

    # January 18, 2013 at 4:39 pm

    I’m not sure what I can help with without seeing any of your code. So here’s an example.

    If you have a div that has content loaded dynamically (using ajax), you can open an alert popup to elements with a class name of “alert” to that dynamic content using `delegate` (or `on` if you are using jQuery 1.7+) like this:

    HTML

    Javascript

    $(function(){
    // .on(‘click’, ‘.alert’, function(){
    $(‘#dynamic-content’).delegate(‘.alert’, ‘click’, function(){
    alert( $(this).html() );
    });
    });

    # January 18, 2013 at 5:48 pm

    alert ! i don’t know what can this help if i’m not wrong it seems like you suggest to me load the page into alert and i dont what that ! well i’m not sure but i think one of us have an miss understanding !

    all that i need is what you say in the first comment
    > So your best solution would be to include the javascript you want to run on your page, and load it when the associated page is being loaded.

    i think how i can devlopping the ajax call with callback() for my javascript/jQuery , or anything similar .

    thax

    # January 18, 2013 at 7:22 pm

    I can’t help you any further without seeing the your code.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".