CODEWITHSUNDEEP
javascriptjquery
Sequenzia
Sequenzia

Reputation: 2381

jQuery ajax load page with external page attached

I have a jQuery function that loads a page into a div when an element is clicked. Like this:

$("#viewID").change(function(){     

            $.ajax({
                type: "POST",
                url:"advOptions_lv.cfm",
                data: {viewID: $(this).val()},
                success: function(data){
                    $("#dataView").html(data);

                }
            });


    });

The page that I am loading requires some JS code that is in another external file called advOptions.js. I have tried just loading that external js page in the original page but the jQuery calls will not work. So I added it to the advOptions_lv.cfm page. When I do that I see a get call to it in firebug every time the viewID element is clicked and the page is loaded.

My problem is that in the advOptions.js file has a basic ajax form submit function like this $.post('saveView.cfm', $("#newDataViewForm").serialize() ,function(data){ });. This is getting fired off multiple times. It all depends on how many times the external page is loaded.

My question is, is that the best way to get the external js page to work with the page that is getting loaded using the jQuery ajax call? If not how should I be doing this?

Any help on this would be great.

Thanks

Upvotes: 1

Views: 456

Answers (1)

Marc
Marc

Reputation: 6771

This will load your js first with $.getScript and load the html after that.

$("#viewID").change(function(){     
    $.getScript('advOptions.js', function(){
        $.ajax({
            type: "POST",
            url:"advOptions_lv.cfm",
            data: {viewID: $(this).val()},
            success: function(data){
                $("#dataView").html(data);
            }
        });
    });
});

Upvotes: 2

Related Questions