CODEWITHSUNDEEP
jqueryajaxformssymfony
JustinP
JustinP

Reputation: 1401

Updating an Ajax Submitted Form

I have a fairly complex form being generated with Symfony2 and rendered with Twig,JQuery. The form is used to modify e-commerce orders so there's no concept of a final submit. When submitting the form via Ajax, whats the next step on syncing the old form with the new form? I've thought of returning the entire form using it to completely overwrite the old form OR returning JSON data which can then be used to detect and update changes.

My gut feel says that returning JSON data to detect and update new changes is the best way.. but with a big form, there's a lot of things to check. Labels, Errors, Help, Values. Essentially, I can see the form update logic getting big and creating maintenance issues really fast.

I'm hoping to learn what the best practice for updating larger forms via AJAX is. Maybe I'm missing a standardized technique.

Upvotes: 1

Views: 246

Answers (3)

TJC
TJC

Reputation: 727

To update a large form, I would return a very specific JSON object that would allow you to do a for-each loop to automate the checking. I'll put a sample below.

data:
    firstField:
        name: "name"
        error: "none"
        help: "This is a help string"
        value: "$49.99"
        quantity: "2"
        subForm1: 
            value1: "something"
            value2: "somethingElse"
    //etc...

after returning this object, you could do something like the following pseudocode does

for field in data
    find element with name field.name
        if element.error is not field.error, element.error = field.error
        if element.quantity is not field.quantity, element.quantity = field.quantity
        //ifs for each intended field of the form
        element.find newElement with name subform1
            if newElement.value1 is not field.subform1.value1 update it
        //etc...

This will allow you to create a fairly simple way to detect changes to the form, and only update the fields that need to be updated.

Upvotes: 1

Lighthart
Lighthart

Reputation: 3656

If I understand correctly, ' syncing the old form with the new form ' in the concept of no final submit basically persisting in the controller. I have a controller action for each json chunk that gets returned, but I use the final submit concept. However you could use this to technique by putting the persist calls in those controllers.

Something like js:

$('#field').on(function(){
           $.ajax({
                url: // url to your controller 
                     // captures relevant information via
                     // javascript and passes it via querystring
                     // or possibly post
                ,dataType: 'jsonp'
                ,success: function(entities, status, ob) {
                    // javascript response
                    // for display purposes
                }});
});

using a standard symfony controller, and processing the request string or post parameters to update your database.

Upvotes: 0

McDonald Noland
McDonald Noland

Reputation: 3859

Not sure if this was the best way, but for a novice like myself, using Spring MVC, I basically just return a "view" that has the HTML content of the after I've saved the AJAX submission.

I don't have the code handy to show, but conceptually this is what it looks like. I'm guessing JSON would be a smaller payload back to the browser, but sending back HTML was easier for a dummy like me.

<form action="/form/save" method="post">
  First name: <input type="text" name="firstname"><br>
  Last name: <input type="text" name="lastname">
</form>

<form action="/form/save" method="post">
<!-- Start: This is the HTML that the "view" returns after the form is submitted via AJAX -->
  First name: <input type="text" name="firstname" value="Mark"><br>
  Last name: <input type="text" name="lastname" value="McGuire">
<!-- End: -->
</form>

Upvotes: 0

Related Questions