Question

So, I have an “add item” script that creates an object in a database. Works great.

I’d like to, once the object is successfully saved to the database, create a clone of that object in the view that will append to the list view. It will receive the id form the DB so it can be edited, but the rest can just be cloned from the input fields.

Any examples of how to do this? Specifically, I need help thinking about what to trigger in success.

Thanks!

Answer 1

First and foremost I’m guessing you have a form that’s sending the data. Are you using AJAX to send this data or executing a full postback?

If you are simply using AJAX form submit you can tie into the success function of the $.ajax({…}); function.

I would imagine your form needs to be cleared on success but due to the vagueness of the question I’ll just supply an example:

$("#myForm").on("submit",function(){
     var formData = {
          field1: $("#inputWhatever").val(),
          field2: $("#inputWhatever2").val()
     };
     $.ajax({
          url: "/dopost/save",
          data: formData,
          success: function(){
               var domToAppend = $("#whateverYouWantToAppendTo");
               domToAppend.append(
                    $("<div>")
                         .addClass("row-container")
                         .append(
                              $("<div>")
                                   .text(formData.field1)
                         )
                         .append(
                              $("<div>")
                                   .text(formData.field2)
                         )
               );
          }
     });
});

And that will send your data and on reply from the server you can get the id out of the success function. Appending dom elements is pretty simple once you know how you’re going to grab your data.

http://api.jquery.com/append/