Ajax not updating until page reload

Question

I'm returning a partial view with jquery ajax that contents dropdowns that filters. The problem I'm experiencing is when the partial view is load with ajax and I select an option to filter my other dropdowns my javascript doesn't fire, but when reload the page and select an option to filter everything works and my code work as it should. Why do I need to reload my page for my script to fire? Below is the blueprint of jquery ajax I use for all ajax requests:

        $.ajax({
            type: "GET",
            url: url,
            beforeSend: function () { $('.wait').show(); },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            },
            success: function (data) {
                $('#tab3').html(data);
            },
            complete: function () { $('.wait').hide(); }
        });

you need delegated event on your element which fires the event — Ehsan Sajjad, Mar 20 '18 at 12:12
are you bind event correctly after you insert new html into DOM ? — kag, Mar 20 '18 at 12:13
@EhsanSajjad can you shed some more light on your suggestion please.. — johnquinn, Mar 20 '18 at 12:21
@kag everything is bind in the partial view, all I'm doing is loading the view with the id's and elements — johnquinn, Mar 20 '18 at 12:25
Possible duplicate of [What is DOM Event delegation?](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) — Ason, Mar 23 '18 at 12:01

score 0 · Accepted Answer · answered Mar 20 '18 at 12:22

0

Your registered handlers are only registered on pre-existing elements. When you add new element you either need to create new handlers, or (better) do something like this

$( ".some-container-of-your-elements" ).on( "click", ".element-you-wish-to-listen", function() {
    console.log( "Magic!" );
});

answered Mar 20 '18 at 12:22

obey

736
7
16

therefore in my case it would be my div that's holding the partial view...`$('#tab3').html(data);`...#tab3 ? – johnquinn Mar 20 '18 at 12:37
Yes, it should be a div which is there from beginning (or rather from the time the "on" listener is being registered) – obey Mar 21 '18 at 11:57

Ajax not updating until page reload

1 Answers1