Avatar of Neha Ninave
Neha Ninave
 asked on

Load Text Boxes dynamically

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
ASP.NETAJAX

Avatar of undefined
Last Comment
Neha Ninave

8/22/2022 - Mon
Michel Plungjan

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

Neha Ninave

ASKER
May be JQuery Ajax
Michel Plungjan

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

Your help has saved me hundreds of hours of internet surfing.
fblack61
Neha Ninave

ASKER
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
ASKER CERTIFIED SOLUTION
Michel Plungjan

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Neha Ninave

ASKER
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 Plungjan

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.

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Neha Ninave

ASKER
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 Plungjan

Yes, I would use sessionStorage or localStorage while navigating.

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

Neha Ninave

ASKER
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.?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Michel Plungjan

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 Ninave

ASKER
Okay.  I will try this. Meanwhile whenever you get time please check into it.
Neha Ninave

ASKER
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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Michel Plungjan

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 Ninave

ASKER
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.
SOLUTION
Michel Plungjan

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Neha Ninave

ASKER
Okay no problem
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Neha Ninave

ASKER
Yes I did it.  thank you!