JQuery script does not run when loaded via AJAX

Question

I have spent some time reading through the jquery documentation and other questions. I cannot for the life of me figure out what I am doing wrong. I have it working when simply put on a page together and load the page. But when I load the code via Ajax it doesn't work. I read through some other people having similar problems, and everyone says to use .live, but that doesn't work for me either. What am I doing wrong?

I am trying to modify the form enctype so it will NOT upload a file if a box is checked.

Here is the form loaded 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 on the originating page or can it go in the content loaded via ajax? And what do I have to do to make it work with the loaded content so when the change_form checkbox is checked, it will update the <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: Just to be clear, an HTML page is loaded. Then the FORM listed above is loaded via AJAX based on the selection of the user. I have also added the form and the script to the AJAX loaded content so it get's added to the HTML page after the AJAX event is called to load it.

Here is a small explanation with more code http://pastebin.com/GbWkukQu

one thing, just use #RequestForm not form#RequestForm, not sure if that's causing your issue. — Fosco
– Fosco, Commented Apr 8, 2011 at 17:21
What makes you say that using ".live()" to set up the event handler doesn't work? It certainly should. — Pointy
– Pointy, Commented Apr 8, 2011 at 17:24
It may work. But I cannot get it to work. That is why I am seeking advice here. I have put alert('clicked') inside the click event so I can see it working and it doesn't "alert". — Chuck Burgess
– Chuck Burgess, Commented Apr 8, 2011 at 17:29
Are you doing $('#change_form').live("click", function() { ... }); for live binding? — Thomas Li
– Thomas Li, Commented Apr 8, 2011 at 17:35
Yep. I tried that and it still didn't work. Do I need to remove $(document).ready(function(){? — Chuck Burgess
– Chuck Burgess, Commented Apr 8, 2011 at 17:46

Ivan Zlatev · Accepted Answer · 2011-04-08 18:08:59Z

3

I am by no means a JQuery expert but I think a way to make this work and keep the script inside the ajax result you need to:

Drop the .ready() part and just have the script code inside as is after the end of the form html.

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

Ensure that the JQuery ajax call is done with a dataType set to html, e.g.:

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

This will tell JQuery to execute all tags in the ajax response.

Alternatively (and probably safer) is to move the script code out of the ajax form html and use $('#change_form').live("click", function () { handle_code }); . This will tell JQuery to monitor any changes in the DOM, so once the form is added to the DOM it will hood up the click event.

edited Apr 8, 2011 at 18:08

answered Apr 8, 2011 at 17:55

Ivan Zlatev

13.3k9 gold badges45 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chuck Burgess Over a year ago

Tried that too. This is starting to sound like it may be something even deeper.

Fosco · Accepted Answer · 2011-04-08 17:27:55Z

1

If the code setting the click event handler is running on document.ready, but the form doesn't actually exist, that is likely your problem.

Send the script over with the form in your ajax response, with the script at the bottom.

answered Apr 8, 2011 at 17:27

Fosco

38.6k7 gold badges90 silver badges101 bronze badges

2 Comments

Chuck Burgess Over a year ago

I tried that too. I put the form and script on the AJAX content so it would be together when loaded. It didn't work. Is there something more I need to do?

Chuck Burgess Over a year ago

I will put something out on pastebin and update the question.

Mark Schultheiss · Accepted Answer · 2011-04-08 20:12:34Z

1

Your issue is the the document ready has already been fired.

Modify your script that is being 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 the event handler as a part of the new stuff.

Assumptions made: jQuery is being added to the page properly. Test if jQuery is added with: (in the main page not the ajax loaded part)

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

edited Apr 8, 2011 at 20:12

answered Apr 8, 2011 at 19:41

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

1 Comment

Mark Schultheiss Over a year ago

I did NOT test this, and you might have to add the script AFTER the new div container for it to properly be handled. Ensure you put the type in the <script> tag also (not in your linked example)

Chuck Burgess · Accepted Answer · 2011-04-08 19:25:07Z

0

Th solution was not what I had expected. I was a little disappointed it couldn't be figured out via jQuery. I ended up writing straight javascript.

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

Then put an onClick="changeForm(this);" on the checkbox. Now even when it is loaded via Ajax, the call to the function works. It changes the form and everything is good.

Is jQuery broken? Or am I just missing something?

answered Apr 8, 2011 at 19:25

Chuck Burgess

11.6k5 gold badges44 silver badges76 bronze badges

Comments

mysense · Accepted Answer · 2012-05-04 11:55:32Z

0

I'm not sure, but i am having similar problem. i have a script that applies to a menu and then loads the linked content including a new menu. If i keep clicking the first menu it keeps working, but the same script dousn't seem to apply on the new menu's

I think it is because the DOM changed and jQuery is still working with the old DOM. So after you load new content, reload your script. I haven't fixed my own issue because i want to reload my script but without overruling some variables.

answered May 4, 2012 at 11:55

mysense

1

Collectives™ on Stack Overflow

JQuery script does not run when loaded via AJAX

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related