[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Using AJAX/JQUERY to manipulate table on page

Posted on 2009-12-23
8
Medium Priority
?
380 Views
Last Modified: 2012-05-08
Hey Experts,

I am looking for information on where to start.  I currently have an ASP.NET web application which pulls data (1200+ rows, 9 columns) from the database and posts 5 of those columns in a gridview, using the other 4 to set values on dropdown lists in the Edit template.  It works very well, but unfotunately is very slow.  What I would like to do is move from the Update Panel I am currently using to a JQuery approach where I load the page then pull the data 1 row at a time (Presumably from a webservice) to populate the table, then use JQUERY to change my cells from view to edit with the correct dropdowns etc when the edit button is clicked.  Essentially I am attempting to replicate the workings of the gridview in clientside code without all the overhead I am getting now.

Is this possible, and if so how would I A) use the webservice to supply data and B) Use JQuery to select the datatable row and modify the various cells?
I have no experience with JQuery and little with ASynchronous coding beyond basic webservices and the ASP.NET ajax using the Update Panel which does everything for me.

Thanks for the help on this.
Geoff
0
Comment
Question by:GeoffSutton
  • 5
  • 3
8 Comments
 
LVL 21

Expert Comment

by:silemone
ID: 26114747
Is this possible, and if so how would I A) use the webservice to supply data and B) Use JQuery to select the datatable row and modify the various cells?

Yes to both of those statements...I would probably concentrate on doing it with normal javascript though...you're basically trying to learn two technologies at once...but I will look for an example and hope you can just copy and paste...
0
 
LVL 21

Accepted Solution

by:
silemone earned 2000 total points
ID: 26114755
0
 
LVL 21

Expert Comment

by:silemone
ID: 26114768
that link shows you how to use page methods (instead of actual webservices) and connecting to them with jquery...now you would have to learn how to get which row you want to update with JQuery..how are you going to do that?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 10

Author Comment

by:GeoffSutton
ID: 26114774
The only thing I would be having to learn new would be the JQuery, fortunately.  Looking at you example now, thx.
Geoff
 
0
 
LVL 10

Author Comment

by:GeoffSutton
ID: 26114814
Does JQuery not have functions for getting the selected rows?
0
 
LVL 21

Expert Comment

by:silemone
ID: 26114870
I usually would do this by on click, a hiddenvalue is updated with the row ID

i don't know if there's an easier way in jquery
0
 
LVL 10

Author Comment

by:GeoffSutton
ID: 26114905
http://blog.miawork.com/?p=1415
It's not in English, but the script is understandable.  I am going to work through this.  Thanks for all your help and the WebMethod suggestion - Since I only need it on this page it's much simpler than a service, and I can mix it all together somehow to make it work.
Geoff
0
 
LVL 21

Expert Comment

by:silemone
ID: 26114964
gotcha...good luck with the completion of your project.

cheers
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 6 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question