jquery div.load only works once for same record, even if data is changed.

dan henderson
dan henderson used Ask the Experts™
on
I have a jquery grid.  When a row is selected, I load a div with a page returned from a controller, using $("divTarget").load("/Mycontroller/Edit/123").  this works perfectly the first time and the data is stored to the database.  I reload the grid and the change is there, but when I click the row again to edit the same record, the controller isn't even called!

Any help appreciated.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Hi Dan,

We need to see some code here, please try to share with us the event that call `$("divTarget").load("/Mycontroller/Edit/123")` and how you attach the event to the edit button, my guess is you're not using event delegation what means the attached event can't deal with the new elements added dynamically to the DOM via JS code.

If this is the case you could use the event delegation on() instead like :

$('body').on('click', 'edit_button_selector', function(){
    //Your edit logic here
});

Open in new window

Author

Commented:
Thanks for the reply.  Here are the steps to load the data:
1)  a jquery grid is loaded with database records.
2)  the grid has function below which loads the selected record into the div:
onSelectRow: function (id) {
     LoadDispatch(id);
}

Open in new window

and the LoadDispatch function looks like this:
function LoadDispatch(id) {
        var target = "/Dispatches/Details/" + id;
        $('#modalLog').modal({ "backdrop": "static" });
        $('#dispatch').load(target);
    }

Open in new window


it displays the correct record data the first time.  I can edit the data and reload the jquery grid (which displays the update), but when I click on the record and the modal form is displayed, it still shows the original data, as if the values are being cached somehow.  how can I update the displayed data?'
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
I can edit the data and reload the jquery grid (which displays the update)

How you reload the grid? Are you sure the data was updated in your DB side?

Please share more code with us (you may need to improve the question by adding the extra code).

If you have a live example that will be perfect.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I suspect you are falling foul of a very common mistake with dynamic we development.

When you are refreshing the grid you are most likely losing the binding to the onselectrow event.

When you initially setup your table and you specify an onselectrow callback an event handler is bound to the rows of the table.

If you refresh the table - all the rows (with their event handlers) are removed - the new rows are added but unless you bind the onselectrow again the event will not fire on a change for the new row.

Try re-initialising the grid after loading the data and see if that fixes the problem.

However, if this does work you need to be careful - depending on which plugin you are using there should be support for dynamic loading of the table - if you perform binding each time data is loaded there is an outside chance you include something that is not dynamic which results in multiple event handlers being bound to the same event - which is not a good thing.
Thanks to you both.  I will state that the grid updates perfectly with the updates and, yes, the database has been updated as well.  However, the whole problem was a stupid browser issue!  Chrome and MS Edge work fine, but IE11 was failing.  I'm ok with this at the moment, but it would be nice to know what the browser is doing.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial