Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery doesn’t execute on div loaded with ajax

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #42020
    JHDesign
    Member

    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!

    #121160
    Mottie
    Member

    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 = / 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);
    }
    })

    #121171
    JHDesign
    Member

    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 :)

    #121195
    Mottie
    Member

    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?

    #121216
    JHDesign
    Member

    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 ! :)

    #121330
    JHDesign
    Member

    any one can help her ???

    #121407
    Mottie
    Member

    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() );
    });
    });

    #121415
    JHDesign
    Member

    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

    #121420
    Mottie
    Member

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

    #208774
    Alireza.F
    Participant

    Hi JHDesign i have the same problem and i Handle it with Jquery
    look at this code u have to load your javascript file in callback function

    <script>
    $(function(){
    $(‘.test’).load(“login.html”,function(){
    $.getScript(“js/custom.js”);
    });
    });
    </script>

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.