JQuery script does not start when loading via AJAX

Question

I spent some time reading jquery documentation and other issues. I cannot understand for life what I am doing wrong. It works for me when the page just folds and loads the page. But when I download the code through Ajax, it does not work. I read other people having similar problems, and everyone says to use .live , but this also does not work for me. What am I doing wrong?

I am trying to change the enctype form so that it does NOT load the file if the checkbox is selected.

Here is the form downloaded via ajax:

 <form id="RequestForm" enctype="multipart/form-data" method="post" action="/submit"> Input File: <input name="inputFile" value="" id="inputFile" type="file"> <input name="onDrive" id="change_form" value="1" type="checkbox"> Located on drive </form> 

I also have this code. Should it go to the original page or can it get into content downloaded via ajax? And what do I need to do to make it work with the uploaded content, so when the change_form flag is set, will it update <form enctype> ?

 <script> $(document).ready(function(){ $('#change_form').click(function() { if($('#change_form').is(":checked")){ // update the apply button to enabled $('form#RequestForm').removeAttr('enctype'); } else { $('form#RequestForm').attr('enctype', 'multipart/form-data'); } }); }); </script> 

UPDATE:. To be clear, an HTML page is loading. Then the FORM listed above is loaded via AJAX based on the user's choice. I also added a form and script to the downloaded AJAX content, so it is added to the HTML page after calling the AJAX event to load it.

Here is a little explanation with lots of code http://pastebin.com/GbWkukQu

Answer 1

Th decision was not what I expected. I was a little disappointed that it was impossible to understand through jQuery. I ended up writing direct javascript.

 function changeForm(chkbox) { if (chkbox.checked == 1) { document.getElementById("RequestForm").removeAttribute("enctype",""); } else { document.getElementById("RequestForm").setAttribute("enctype","multipart/form-data"); } } 

Then check onClick="changeForm(this);" . Now, even when it loads via Ajax, the function call works. He changes shape, and all is well.

Is jQuery broken? Or am I just missing something?

Answer 2

I am in no way a jQuery expert, but I think that the way to do this work and save the script inside the ajax result you need is:

• Drop the .ready () part and just enter the script code inside, as it is after the end of the html form.

  <script type="text/javascript">

    $('#change_form').click(function() { if($('#change_form').is(":checked")){ // update the apply button to enabled $('form#RequestForm').removeAttr('enctype'); } else { $('form#RequestForm').attr('enctype', 'multipart/form-data'); } }); 

  </script>

• Make sure jQuery ajax call is made using dataType set to html , for example:

  $.ajax({ ... dataType: "html"`` ... });

This will allow jQuery to execute all the tags in the ajax response.

Alternatively (and probably safer) you should move the script code from the hjml ajax form and use $('#change_form').live("click", function () { handle_code }); . This will tell jQuery about any changes to the DOM, so as soon as the form is added to the DOM, it will pull out a click event.

Answer 3

If the code specifying the click event handler is run on document.ready but the form does not actually exist, this is probably your problem.

Submit the script with the form to your ajax response using the script below.

Answer 4

Your problem is that the finished document is already running.

Change your script, which is included as:

 function addmystuff() { $('#change_form').click(function() { if($('#change_form').is(":checked")){ // update the apply button to enabled $('#RequestForm').removeAttr('enctype'); } else { $('#RequestForm').attr('enctype', 'multipart/form-data'); } }); }; addmystuff(); 

This will add an event handler as part of the new material.

Assumptions made: jQuery is added to the page correctly. Check if jQuery has been added: (ajax part is not loaded on the main page)

 $(document).ready(function(){ alert("jquery got loaded"); }); 

Answer 5

I'm not sure, but I have the same problem. I have a script that applies to a menu and then loads related content, including a new menu. If I continue to click on the first menu, it continues to work, but the same script does not seem to apply to

new menu <

I think this is because the DOM has changed, and jQuery is still working with the old DOM. So after loading the new content, reload the script. I did not fix my own problem, because I want to reload my script, but without flipping some variables.