Maintain State on Server or in Hidden Fields? - javascript

I have 20 items of the same type in a database. Each of the items has a row ID, name, description, and section (A or B).
I have a web page that displays this information and allows the user to change the section attribute for each item. The web page display has a pane for each of the two sections, section A and section B, and each section contains a button and a hidden field for each item in that section. A button's label text is the item's name. The hidden field is used to capture the corresponding item button's section (A or B).
When the user presses one of the item buttons in the section A pane, the button is moved to the section B pane and the button's hidden field is updated to 'B'.
Likewise, when the user presses one of the item buttons in the section B pane, the button is moved to the section A pane and the button's hidden field is updated to 'A'.
At the bottom of the form is a submit button. When the submit button is pressed, all 20 hidden fields containing their associated button's section (A or B) are posted and the php server-side script updates the database for each button accordingly.
In such a case, is it best practice to use AJAX to maintain the state of the items on the server or hidden fields coupled with pure client-side javascript to maintain the state of the items prior to the form post? Why?
Thanks in advance.

In my opinion, it's better user experience to use AJAX and update the section. This saves the user from having to click the submit button after all selections have been made. Also, much simpler because you don't need to store these prior states in a hidden field or in session. You can just do the update in real time.

Related

Javascript DOM modification from Chrome extension disappearing

I've written a Chrome extension that fetches my shopping list from a recipe manager app's cloud service, and adds each ingredient to a supermarket's online shopping search page.
The website is Tesco Groceries, and I am using the "search with a list of items" page.
Thus far, I have managed to create the extension and write all the code. I have a popup with a button, which when pressed calls a content script. The content script makes a call to a background script which does the actual HTTP fetching via a jQuery ajax call, and passes the result back to the content script.
The content script then finally iterates through the result.
The shopping list page is structured as a form, with each element appearing as
<input class="multi-search-form__item-field" data-auto="multisearch-list-item" type="text" id="listItem3" name="listItems" placeholder="" maxlength="99" value="">
So I do
for (index in json.result){
selector = "#listItem" + index;
$(selector).focus()
.val(json.result[index].name)
.attr("value", json.result[index].name)
.change();
}
This actually appears to work, and all the correct text elements appear in the webpage. However, the submit button does not become active.
If I manually change (keyboard and mouse) any of the listItem text fields, all other text field inputs disappear, but the one I've edited remains. The submit button then becomes active.
I've noted that inspecting the HTML of the document shows that the value property of the automatically completed elements remains blank, but the manually changed one has the correct value.
I have tried using all sorts of combinations of setting .val, .attr("val", ), and using focus(), change(), and even trying to emulate a keypress of spacebar after the value has been input. Nothing works.
For example:
I have 3 items in my shopping list: milk, eggs and beans.
I open the webpage, click the button in my extension, and the webpage shows updated text fields with milk, eggs and beans each on its own line.
I then click in the text box with "eggs" in it, and press space. Now, the 2nd list box says "eggs ", but the other 2 boxes go blank.
Edit: As an additional note, if I just submit the form, that actually works, and the online shopping page appears with a result for my list. HOWEVER, The initial list only presents 10 text fields, and seems to dynamically add more once you begin typing in box 9. However, programatically filling that box doesn't cause it to make further text boxes, se my list caps out at 9 items.

Contact Form 7 and "Load More" Duplicate Fields?

Is it possible to have a "load more" button on a Contact Form 7 form that would just duplicate another field set on the form? I need to create a form that will allow restaurant owners to enter each item on their menu, and was wanting to display something like the following:
Item title (text field)
Menu section (dropdown -- appetizer/entree/side/dessert)
These fields would then be followed by a "load more" button that, when clicked, would generate another Item title/menu section field set. The button would need to be indefinitely clickable to generate as many field sets as needed for the user to enter all of their menu items.
I've seen the CF7 Conditional Logic plugin, but it seems like I'd have to specify how many additional "hidden" field sets I'd want, and the number of them available to the user would be finite depending on how many I added to the back end form. I need the field sets duplicated/generated on the fly.
Any help is appreciated, and please go easy if I'm not posting correctly or in the right area. This is my first time posting here :)

How to save asp.net textbox values with one button click and use that data for another button click?

I have a table with a row that allows the user to insert data into two textboxes, and a asp.net button called insert to bind that row to the gridview. Within the table I have a gridview which shows all the data populated form SQL Server, and any inserted rows which could be one, or many insertions based on button clicks. Then I have a submit button to submit the changes to SQL SERVER DB.
For example, the user enters some data into 2 textboxes then hits the insert button which just inserts that row into the gridview. The user can either add more rows, or hit the submit button. If the user hits the submit button, a stored procedure happens based on how many rows have been inserted.
I am not understanding how to send data from one button event to another button event using C# back-end ASP.NET front-end?
One way I can think of is after first insert store the IDENT_current and when you click on submit button include the where clause in store procedure where the given id value is greater than IDENT_Current that way all the effects mentioned in stored procedure will take place on inserted data.

JSF page set tab order dynamically

We have requirement to set the tab order dynamically on page based on below conditions.
If field has default value selected then that field should be skipped while user tabs. But if user explicitly clicks on default value field then next tab order should follow correctly by skipping the next default value fields. The fields which needs to be defaulted are decided on page load.
I guess you could dynamically set the tabindex of the input fields, is that what you're trying to accomplish? I'm not sure if tabindex is exposed as a JSF property or not.
http://www.w3schools.com/tags/att_global_tabindex.asp

window.history.go() not loading previous user input for dynamically created dropdown lists

I'm having this issue where I have a table that depending on what option I select for the first column, the next column which contains a drop down, will populate with the appropriate values that users can select.
Here's an example
When the user submits the form, they're brought to a results page and have the option of going back to the first screen (where they select the drop downs etc).
Currently, I'm using the window.history.go() function to go back to the previous pages. However, the dynamically created drop downs aren't retaining the value that the user selects (the option that is at the very top of the drop down is always selected).
I'm currently using PHP for the scripts to generate the tables. Is there a way to fix this? Just need someone to point me in the right direction.
Thank you!
u can use history.pushstate(url+'#idx=x') when dropdown changes. and load the param values into dropdown when page loaded

Categories