New Javascript being loaded but old Javascript being called. MVC

Question

I have 3 partial views with JS using JQuery in each to post a form and open a new partial view when the form is posted.

What I am finding is that the first time the JS fires it works fine but if I then go to post the form on the new page, I calls the function from the previous page.

The code:

    $('#selector').click(function (e) {
    var actionName = $(this).attr("id")
    e.preventDefault();
    e.stopImmediatePropagation();
    alert("page1 js being called")
    $('#page1Form').submit(function () {
        $.ajax({
            url: 'Dashboard/Page1/',
            data: $(this).serialize(),
            type: 'POST',
            success: function () {
                $.ajax({
                    url: 'Dashboard/LoadPartial',
                    data: { viewName: actionName },
                    type: 'GET',
                    success: function (d) {
                        $('#partial').html(d);
                    }
                });
            },
        });
    });
    $('#page1Form').submit();
});

The second partial view has a function the same as that but only with the relevant selectors etc and for some reason the previous pages JS is being called as the alert alert("page1 js being called") is appearing in the browser!

Thanks in advance.

And where is the execution of the new javascript? It will not execute just because you load it into the browser. As you can see to the right, you already have a duplicate — mplungjan
– mplungjan, Commented Nov 20, 2013 at 11:54
possible duplicate of JQuery within a partial view not being called — mplungjan
– mplungjan, Commented Nov 20, 2013 at 11:54
possible duplicate of calling-a-javascript-function-returned-from-an-ajax-response — mplungjan
– mplungjan, Commented Nov 20, 2013 at 11:56

Anthony Grist · Accepted Answer · 2013-11-20 11:55:29Z

1

If you're loading partial views that means the entire page isn't being refreshed, and as a result the already loaded scripts will still be there. You'll need to remove the event handlers that correspond to the page1 content before adding the new content in:

$.ajax({
    url: 'Dashboard/LoadPartial',
    data: {
        viewName: actionName
    },
    type: 'GET',
    success: function (d) {
        $('#selector').off('click'); // remove the click event handler
        $('#page1Form').off('submit'); // remove the submit event handler
        $('#partial').html(d); // add your new content
    }
});

answered Nov 20, 2013 at 11:55

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

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

2 Comments

mplungjan Over a year ago

And evaluate the ajaxed javascript somehow so it will be executable.

JM1990 Over a year ago

So #selector.click() normally just is a navigation link, but in these pages it is changed so that the form can be submitted and then navigation takes place. However if im in a view where the #selector.click() should just behave as normal, it still tries to perform the function of the last post and navigate page. I have done .off on the click handler as above but doesnt seem to affect outside of these 3 post form and navigate pages

Collectives™ on Stack Overflow

New Javascript being loaded but old Javascript being called. MVC

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related