2

I have a bootstrap modal which, when opened, hits the server to update the model with data that will be displayed to the screen. It works great the FIRST time the modal is opened, but after that, it always shows the same data as the first time it was opened.

In the view:

<div id="ChangeOrderModal" class="modal hide fade" style="width:1000px">
<div class="modal-body">
    <div id="ChangeOrderTable"></div>
</div>
<div class="modal-footer">
    <a href="#" data-dismiss="modal" class="btn">Close</a>
</div>

Script in the View to hit the server and update data:

var url = '@Url.Action("SetChangeOrderDate")';
$.post(url, { coDate: date, projId: @Model.Project.id_project }, function (data) {
    $('#ChangeOrderTable').replaceWith(data);
});
$('#ChangeOrderModal').modal('show');

That hits the action just fine, every time:

[HttpPost]
public ActionResult SetChangeOrderDate(string coDate, int projId)
{
    ....
    return PartialView("_ChangeOrderTable", projectVM);
}

Then, in the partial view:

@foreach (var record in Model.ChangeOrder.Change_Order_Dash_List
{
     ... create table based on the list...
}

If I put a breakpoint right on that @foreach in the partial view, and get a count of the items, it is ALWAYS correct. Example: The first time the modal is opened, it has a count of 3. Then, three rows are rendered to the screen. I close the modal, open it by clicking on another icon, and this time the count is 7. I can even watch it loop over the HTML to render each row seven times.

But, the same three rows as last time appear on the screen.

What am I doing wrong?

Casey Crookston
  • 13,016
  • 24
  • 107
  • 193
  • Are you saying the 2nd click should only generate 4 rows (but you showing the 3 previous rows in addition to those 4 new rows)? –  Nov 07 '16 at 21:35
  • Sorry for not being clear. It always shows only the original rows. Once created,the content of the modal never changes at all, despite the data behind it being correct each time. – Casey Crookston Nov 07 '16 at 21:37
  • Does your partial also include and enclosing `
    your foreach loop here
    ` element. If not you want `$('#ChangeOrderTable').html(data);` (not `.replaceWith(data);`)     –  Nov 07 '16 at 21:38
  • Hmmm! No, but there is this:
    – Casey Crookston Nov 07 '16 at 21:40
  • In the first event, you remove the `
    ` (because you use `.replaceWith()` so in the 2nd event, it no longer exists and there is nothing to 'replace'
     –  Nov 07 '16 at 21:42
  • @Stephen... nailed it! I changed ChangeOrderTable to ChangeOrderDiv and used .html. Not sure which one fixed the issue, but it's now working! If you put this as an answer, I'll mark it correct. Thanks! – Casey Crookston Nov 07 '16 at 21:42

1 Answers1

3

You use of .replaceWith() means that in the first event, you replace the <div id="ChangeOrderTable"></div> element with the html your partial generates and that <div> element no longer exists.

In the 2nd event, your return the correct html, but $('#ChangeOrderTable').replaceWith(data); is no longer executed because there is no element with id="ChangeOrderTable" (so you just see the elements rendered in the first event).

Change the code for updating to DOM to use .html() which replaces the content of the element, not the element itself.

$.post(url, { coDate: date, projId: @Model.Project.id_project }, function (data) {
    $('#ChangeOrderTable').html(data);
});

For further information, refer What's the difference between jQuery's replaceWith() and html()?

Community
  • 1
  • 1