We help IT Professionals succeed at work.

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

dan henderson
on
74 Views
1 Endorsement
Last Modified: 2018-12-05
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

Zakaria AcharkiAnalyst Developer
CERTIFIED EXPERT
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
CERTIFIED EXPERT
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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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.
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.