Link to home
Start Free TrialLog in
Avatar of dan henderson
dan hendersonFlag 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.
Avatar of Zakaria Acharki
Zakaria Acharki
Flag of Morocco image

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

Avatar of 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?'
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.
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
Avatar of dan henderson
dan henderson
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial