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

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.
dan hendersonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
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

dan hendersonAuthor 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 DeveloperCommented:
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.
Julian HansenCommented:
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.
dan hendersonAuthor Commented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.