javascript included files are gone after AJAX reload

Question

I have a page in which I refresh a DIV by a JQUERY Ajax call, but I then lose al the javascript code that I included in the "head" page. Do I need to include them twice? Looks to me that's not good for the performance, because you have to load the javascript again while it is on the client page already. How to include the files so that they are also available after Ajax refresh

$(document).ready( function() {
    $("#prijzen_huidige_jaar").submit(function(event) {    
    /* stop form from submitting normally */    
    event.preventDefault();      
    $.ajax({
    type:"POST",
    url:"prijzen_huidige_jaar_test.php",
    cache: false,                   
    data: $("#prijzen_huidige_jaar").serialize(),
    success:function(data){
        $("#test").replaceWith(data);
    }       
});
});
});

include in the main page:

<script type="text/javascript" src="https://localhost/include_bestanden/javascript/prijzen.js"></script>

Can you post all of your code please? Both the JavaScript and HTML, that way we'll be better able to help you. — Jason Evans, Dec 17 '12 at 09:54
added the jquery Ajax call, alle the code is a bit to much.... — Jilco Tigchelaar, Dec 17 '12 at 09:59
Please edit your question and post the html code there, not in the comments. — Tomer, Dec 17 '12 at 10:01
Please also post a bare-bone HTML structure that shows the position of the element `#test` and a sample of the data returned by the ajax call. — bPratik, Dec 17 '12 at 10:05
The page: https://www.huurhulp.nl/wijzigen/wijzigen.php?wijzigen_adv=14&code=523a98367bfb05765fb86a2535966aad — Jilco Tigchelaar, Dec 17 '12 at 10:08
Click on prijzen 2012 and do a submit, this tab will be submitted and reload the form by AJAX — Jilco Tigchelaar, Dec 17 '12 at 10:09
Can you confirm the `#test` div is supposed to contain the (long) form `#prijzen_huidige_jaar`? This what is replaced? — mccannf, Dec 17 '12 at 10:21
The Javascript is to show/hide questions div's. If youre not posted the form you can see it working — Jilco Tigchelaar, Dec 17 '12 at 10:31
show - hide the questions. If you clicked ja on a question, the div has to show up and it does not anymore. Before the submit it did — Jilco Tigchelaar, Dec 17 '12 at 10:37

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

Instead of using click in your JS, you should use on with class identifiers, as this will apply to elements added later via AJAX.

So instead of:

$("input[name$='vraag_afwijkende_prijzen']").click(function(){          
    if($(this).val() == 1){
        $("#instructie_afw_prijzen_tekst").html(vraag4_ja);
        $("#afwijkende_prijzen_vak").show('slow');
        $("#afwijkend_1").show('slow');
    }
    //etc

Try something like:

$(document).on("click", ".vragen-radio", function() {
     if ($(this).attr("name") == 'vraag_afwijkende_prijzen' && $(this).val() == 1) {
        $("#instructie_afw_prijzen_tekst").html(vraag4_ja);
        $("#afwijkende_prijzen_vak").show('slow');
        $("#afwijkend_1").show('slow');
     }
     //etc

You can read about it in this question: Why use jQuery on() instead of click()

edited May 23 '17 at 12:15

Community

1
1

answered Dec 17 '12 at 10:52

mccannf

16,619
3
51
63

Yeah!!! this works! I do have some other strange behavior, if i hit submit for a second time, than he loads an completely other page. Before the adjustment it was also there, you know why? – Jilco Tigchelaar Dec 17 '12 at 11:53
Maybe because the Jquery function as mentioned in the question has the same problem? Is not included in the DIV after AJAX? Look like it, i tested it and the whole function isn't executed after submit for a second time... – Jilco Tigchelaar Dec 17 '12 at 12:02
Yep! did the job at the same way! – Jilco Tigchelaar Dec 17 '12 at 12:34
ehhh, next problem, my datepickers is not working anymore after a submit. See the tab "basisgegevens" question 2 (answer "ja") – Jilco Tigchelaar Dec 17 '12 at 14:44

javascript included files are gone after AJAX reload

1 Answers1

Linked