Tags created dynamically with jQuery disappear after my form is posted

Question

My page creates rows dynamically using jQuery but when I refresh the form, the rows are gone.

How can I preserve the jquery dynamically created controls in MVC?

It's a master detail page, I am creating a billing detail page. The details has a button which when you click it will show a dialog box asking detail info. After clicking ok on the dialog box I am adding a new detail on details table using Jquery. The problem is when you refresh the page, the dynamically created row disappears.

Answer 1

Are you using ajax or a full form post?

If you run a full form post, the page will refresh back to its initial state, it will not maintain any modifications to the dom made via javascript/jquery.

Answer 2

You should add the list of objects to your model. Using jquery generate properly names for this rows. Each row should represent an object of list. If you generates this table with labels or spans but not inputs, this values will not be sent to the server, so in this case you should to generate hidden inputs with properly names (for example DynamicObjects[0].Value1, DynamicObjects[0].Value2, DynamicObjects[1].Value1, DynamicObjects[1].Value2 ...)

You model class should contains property

IEnumerable<DynamicObject> DynamicObjects{get;set;}

Of cause DynamicObject contains props Value1 and Value2.

So your action will receive your model class with dynamic objects.

public ActionResult Index(MyModelClass form)
{
// do something
return View(form);
}

Your view should build the table from DynamicObjects arrey.

Was this helpfully?

Answer 3

The Internet is Stateless

Anything done with JavaScript on the client side is not automatically remembered between page reloads due to the stateless nature of the internet. Submitting a form via post will result in a page reload so client-side changes are forgotten. To remember the changes made, the developer needs to specifically code a storage method.

Ajax

As you are using JavaScript and specifically jQuery already, an ajax call could be used to notify the server of the changes made client side.

jQuery has an excellent AJAX library. Several tutorials are avalailable at the jQuery tutorials page. There are also plenty of web pages devoted to the subject.

Ajax example using jQuery

As a simple example, when you add the extra row you could call an ajax function such as:

$.ajax({
  url: 'ajax/add_row.html?user_id=100&data=new-data',
  success: function(data) {
    alert('Adding of the row was acknowledged.');
  }
});

Server side

On the server side, you simply need a page located at ajax/add_row.html to do a little bit of work, taking the data passed to it and adding it to the database. On the next page reload, the added data can be put onto the page as usual.

In reality, if your data is more complex than this, it may be better to send the data to the script via the post method.

Answer 4

Once the user has clicked 'ok' on the dialog form and you dynamically add a row to your table use JQuery AJAX methods to make a call to your controller method to add the data into your data context, this will mean that the new rows are saved server side so when the page is refreshed the data will be preserved.

e.g.

$('#okButton').click(function(){
  //Add row

  var data = {
    detailName: $('#detailName').val(),
    detailInfo: $('#detailInfo').val()
  };

  $.ajax({
    type: "POST",
    url: "controller/AddDetail",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(xml, ajaxStatus) {
    // whatever you want here
    }
  });
});

Controller code

public ActionResult AddDetail(string detailName, string detailInfo)
{
  //Save detail
}

Answer 5

When exactly do you refresh the page? You could use the Session to also stored the items you are adding/removing. I agree that this is an Ajax operation as Fermin suggested.