How to include script tags on JQuery HTML

Question

I have this code here that ajaxifies my web-application.

$.get(State.url, function(data) {
            console.log($(data).find('#main-content').text());
            $('#main-content').html($(data).find('#main-content').html());
        },"html");

In some certain point the user should upload a file, but since it is ajaxified it will only load the parent container of the incoming response which is this.

         <form enctype="multipart/form-data" class="contact_form" action="doUploadAudio">
        <input type="file" name="file" value="" id="file"/>
        <script>
            console.log("HEHE");
                $('#fileupload').fileupload({
                    replaceFileInput:false,
                    done: function (e, data) {
                        alert("DONE");
                        $('#main-content').html('');
                        $('#main-content').html($(data.result).find('#main-content').html());
                    }
                });

             </script>  
              <button class="btn" id="uploadAudio" type="submit" class="submit" data-loading-text="Uploading...">Upload</button>
          </form>

As you can see my form is not executing its script tags, is there anyway I can execute it?

Note that I am currently using jQuery 1.8.3

The code in your script tag isn't executing? Try wrapping the fileupload in $(document).ready(function() { $('#fileupload')... }); — Benno
– Benno, Commented Feb 8, 2013 at 13:35

mccannf · Accepted Answer · 2013-02-08 14:48:53Z

1

First of all, I don't see any element with an id fileupload in your HTML?

Anyway, you should avoid loading HTML containing <script> tags, as the behavior of the JavaScript loaded is unpredictable.

Firstly, you should your HTML separate and load it in separately:

<form enctype="multipart/form-data" class="contact_form" action="doUploadAudio">
    <input type="file" name="file" value="" id="file"/>
    <button class="btn" id="uploadAudio" type="submit" class="submit" data-loading-text="Uploading...">Upload</button>
</form>

And then you can either execute the JavaScript in the success callback of the $.get:

$.get(State.url, function(data) {
            console.log($(data).find('#main-content').text());
            $('#main-content').html($(data).find('#main-content').html());
            $('#fileupload').fileupload({
                replaceFileInput:false,
                done: function (e, data) {
                        alert("DONE");
                        $('#main-content').html('');
                        $('#main-content').html($(data.result).find('#main-content').html());
                    }
            });
 },"html");

Or put the snippet of JavaScript (without the <script> tags) in a JS file on the server (e.g. fileupload.js) and then call it like so:

$.get(State.url, function(data) {
            console.log($(data).find('#main-content').text());
            $('#main-content').html($(data).find('#main-content').html());
            $.getScript("<url to fileupload.js>", function() {
                        console.log("Fileupload should now be working");
            });
},"html");

answered Feb 8, 2013 at 14:48

mccannf

16.6k3 gold badges54 silver badges64 bronze badges

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

6 Comments

user962206 Over a year ago

But the thing is the $.get applies to all of my pages. is there any alternatives for that? or specifically for filupload?

mccannf Over a year ago

Note the statement $("#fileupload").fileupload... will only apply if an element with ID fileupload exists in your DOM. You could do a check before calling fileupload if you wanted as well: if ($("#fileupload").length > 0){ ...

user962206 Over a year ago

Let us say on the initial page it doesn't have the the form which has an id of #fileupload, and when I click a link it will load the form via ajax. will the $('#fileupload') execute even if the form is loaded via ajax?

mccannf Over a year ago

If a) the form loaded via ajax contains an element with id fileupload and b) the fileupload JS code is inserted into the callback function of the $.get after your .html command, then it should work.

user962206 Over a year ago

so looks like I have to lengthen my $.get code. would it be a waste ? since that method applies to all pages in my application?. I thought JQuery will just automatically detects it, like jquery magic I guess. but I guess I was wrong

|

Collectives™ on Stack Overflow

How to include script tags on JQuery HTML

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related