Question

I am working on a project and I am using jQuery Tabs like the image below. I installed an Inline Edit script to modify the text, and delete if needed. There is no database involved at this point, I have a VIN decoder script and it pulls the default features and they can edit it if needed, and it edits in the DOM. It works perfectly but when I switch tabs to “Interior” and then go back to “Exterior” then the exterior content goes back to the original list and none of the updates were saved.

And this is probably because the main page is at add-vehicle.php and on that page this is how I get the content:

<div id="tabContent">
        <div id="contentHolder">
            <!-- The AJAX fetched content goes here -->
        </div>
    </div>

and the content is on features.php

var Tabs = {
    'Mechanical'    : 'features.php?feature=MECHANICAL&vin='+vin+'',
    'Exterior'  : 'features.php?feature=EXTERIOR&vin='+vin+'',
    'Interior'  : 'features.php?feature=INTERIOR&vin='+vin+'',
    'Safety'    : 'features.php?feature=SAFETY&vin='+vin+'',
}

Does anyone have any suggestions on how I can do this? What I want to happen is all of the inline edits will be saved, and I can switch through the differnet tabs and make those changes, and everything will be saved.

Not sure how well I explained this, please let me know if you need to see more code.

Thank you

Answer 1

This is a bit more complicated than you probably expect, you are removing the forms from the DOM before any data is saved.

When the code is loaded back in for each tab, you are starting over with the forms.

You can fix this a few ways:

• Store the content of each tab in the DOM after it is loaded and just hide it when the tab is not in view.
• When each tab is “unloaded”, store the data in JavaScript and place it back in the tab when that tab is loaded.
• Allow the save buttons on each tab to save all the information server-side and when the tab is retrieved to populate the forms server-side.