0

I am working on a C# Razor site and I am POSTing from a boostrap modal which then returns a new view and model. To reload the entire page with the response, I am using the following line within this code block.

$("html").html(response);

 function addDevice(e) {
        e.preventDefault();
        var ID = $("#txtNewDeviceID").val();
        var Name = $("#txtNewDeviceName").val();

        $.post('@Url.Action("AddDevice", "Devices")', { 'DeviceID': ID, 'DeviceName': Name }, function (response) {
            $('#newDeviceModal').modal('hide');
            $("html").html(response);
            AttachBindings();
        });
    }

Here is the code behind AttachBindings():

function AttachBindings() {
        $(document).on('click', 'table tr', {}, tableClick);
        $(document).on('keyup', '#search', {}, search);
        $(document).on('click', '#btnAdd', {}, function (e) {
            addDevice(e);
        });
        $(document).on('click', '#btnRemove', {}, function (e) {
            removeDevice(e);
        });
        $(document).on('click', '#btnUpdate', {}, function (e) {
            updateDevice(e);
        });
    }

Unfortunately AttachBindings() is never hit and I can't seem to find a way to reattach these events. The only event that seems to work is keyup which is attached to #search. Any ideas on how to fix this?

rhfrench
  • 21
  • 3
  • The is no need to call `AttachBindings` (assuming you called it when the page first loaded) - you are already using event delegation. But what do you mean _To reload the entire page with the response_? It would be pointless to use ajax is your attempting to reload the page –  Mar 30 '18 at 02:42
  • I need to refresh the entire page as I need to return a new view and model. Normally in C# razor you use @url.action(), but since this is occurring from a modal I have to hit the action from using $.Post(). – rhfrench Mar 30 '18 at 17:33
  • Sorry, your not making any sense. You do not use ajax if you want to completely refresh the page (you make a normal submit and redirect in the POST method). And you just replaced the current page, and in the process, removed your `AttachBindings` function so that it no longer exists - so of course it does not execute. –  Mar 30 '18 at 23:12

2 Answers2

0

Try using live function and call it on document.ready

As per the details provided in the documentation for LIVE:

Description: Attach an event handler for all elements which match the current selector, now and in the future.

Hence, even if an element is added later in the DOM, the event will be triggered by that element

Whereas, in the case of ON, it will be added to the present elements only:

Description: Attach an event handler function for one or more events to the selected elements.

So, calling it once, after document is ready and bind the events using bind or live will do the magic for you.

Aman Chhabra
  • 3,824
  • 1
  • 23
  • 39
  • The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead. <<<< This was on w3schools. Double checked the documentation and it is correct. – rhfrench Mar 30 '18 at 17:35
0

I doubled checked this morning and the events are being hit the way I have it. The real issue is the bootstrap modal that I have on the page does not work if the DOM has been updated. It looks like I will need to reconnect the data-toggle and data-dismiss events. I'm guessing bootstrap does this in the background when the page first loads.

Also the .Live method is deprecated according to the JQuery documentation.

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event >handlers. Users of older versions of jQuery should use .delegate() in preference >to .live().

Also AttachBindings does not need to be called more than once. My code updated looks like this now:

function addDevice(e) {
        e.preventDefault();
        var ID = $("#txtNewDeviceID").val();
        var Name = $("#txtNewDeviceName").val();

        $.post('@Url.Action("AddDevice", "Devices")', { 'DeviceID': ID, 'DeviceName': Name }, function (response) {
            $('#newDeviceModal').modal('hide');
            $("html").html(response);
        });
    }
rhfrench
  • 21
  • 3