Avatar of dan henderson
dan henderson
Flag for United States of America asked on

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.
ASP.NETDatabasesjQuery

Avatar of undefined
Last Comment
dan henderson

8/22/2022 - Mon
Zakaria Acharki

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 henderson

ASKER
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 Acharki

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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Julian Hansen

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.
ASKER CERTIFIED SOLUTION
dan henderson

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question