We help IT Professionals succeed at work.

Load Text Boxes dynamically

Neha Ninave
Neha Ninave asked
on
Hello, I am developing an online game panel.  As per screenshot there is  top menu with different values  and Middle menu with some values.

In top menu 0000-0999 is selected and in Middle menu 0000-0099 is selected and there are labels and text boxes from 0000 to 0099 - 100 boxes.

So when user will click on 0100-0199 menu from Middle menu it should show next 100 text boxes and labels with value 0100 to 0199.

Likewise if user selected 1000-1999 menu from Top menu the value of Middle menu will change and of all the  labels and text boxes.

I have to load these labels and boxes dynamically so that page will not take much time to load because if you calculate there are 10,000 labels and text boxes.

Can someone tell me how could I do this.?  Also when user click on any menu, labels and boxes will load but it should not refresh the page and I don't wish to use ASP.NET AJAX.

Page performance is very important for me.  I am loading these values from db.  I am using ASP.NET 4.0

https://prnt.sc/r5o9wg
Comment
Watch Question

View Solutions Only

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

You do not want to refresh the page but do not want to use AJAX? What then?

Neha NinaveMrs

Author

Commented:
May be JQuery Ajax
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

Are the values on the server or are they calculated on the client? Can you post the HTML you have  - for example create a jsfiddle.net and let us know what to click to see what output

Neha NinaveMrs

Author

Commented:
Label values are coming from server, input values  are calculated on the client.  Like if user input qty in text box it will show qty * price somewhere in blank area after text boxes (Qty Total and Amount Total)
Next time when navigate back from another menu to this, it will again load old values. Once user press submit button it  will get saved on db
IT Expert
SILVER EXPERT
Top Expert 2009
Commented:

Here is the generation on the client - this script will be extended   https://jsfiddle.net/mplungjan/7zkt48ro/


We need some prices in an array

Neha NinaveMrs

Author

Commented:
Thank you Michel,
Now suppose user enter some value in text boxes and click on another menu say 2000-2999 then we will again load new table here user again will enter some value and press submit, so on submit how I will get inserted value which user entered in both menu?
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

The best solution would be to Ajax the values. We could do that on every click or collect all values and only submit with the submit button. You will have to give me more information and use cases for me to answer this.

Neha NinaveMrs

Author

Commented:
Ajax values on every click may not be good. As user can delete, edit values. Better I will Ajax it when user click on next menu. I will try it and show you the live demo and my code. Give me a day.
Is there any way to save values in memory?
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

Yes, I would use sessionStorage or localStorage while navigating.

Please note that if you increment my pageNumber you get the next 100 boxes

Neha NinaveMrs

Author

Commented:
Hello, this is my demo url - Game Panel
There are left menus like 0000-0099, 0100-0199 and so on...
Now if you click on each menu  the text boxes get changed.
So if I enter something in textbox in 0000-0099 series and go to next any series menu and when come back again to then
I should get the value of that textbox.  Storing data in db would not work or it will slow  down the system.
Can you please tell me how could I save the text values and again  put it back.?
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

Hi, I am not at a pc right now.

To store use localStorage.setItem("vals",JSON.stringify(myArray);

And to read 

let myArray = JSON.parse(localStorage.getItem("vals"))

Neha NinaveMrs

Author

Commented:
Okay.  I will try this. Meanwhile whenever you get time please check into it.
Neha NinaveMrs

Author

Commented:
Sorry, I am quite confused.  I have to store all input in an array and when again we click on that menu I need to put all values.  
Localstorage didn't helped me.
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:

When you change data, update the array and submit the stringified array when saving at the end. I will not be able to help more than this until Sunday since I’m on my phone only 

Neha NinaveMrs

Author

Commented:
User will input data, or modify it or delete the value from input box. So I think I have to store 2 values in array like input name and value and when I populate new table I have to search if array contains the input value from this table. Is this correct?
Well I never did it. Will try. I will appreciate if you can send me any link.
You supporting me in a great way. I appreciate your patience.
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009
Commented:

It is really not hard. Your should have an array and the index is matching the field name. I assume you want the user to overwrite the value when modifying. I cannot edit my fiddle on my mobile so I cannot help with actual code until Sunday 

Neha NinaveMrs

Author

Commented:
Okay no problem
Neha NinaveMrs

Author

Commented:
Yes I did it.  thank you!