Demo Page: Using jQuery to Update an Item Without A Form
Last week, I spotted a really nice blog post from Mike Oryszak which showed how to update an item without a form by using jQuery to post changes using the SharePoint Lists Web Service. It got me thinking about a lot of things that you might do to make SharePoint feel more “Web 2.0”. By using jQuery, you can quickly add functionality to your pages, and in this case, even use its AJAX capabilities to talk to Web Services.
I’ve created a new demo page on the Sympraxis Consulting demo site which ought to give you an idea of some of the possibilities. The page shows how you can use SharePoint’s Lists Web Service and jQuery to update items in real time, without a roundtrip to the server.
Each row in the Data View Web part has buttons which allow you to increase/decrease the Potential Value column by either $1 or $10. On each button click, there is a SOAP call to the Lists Web Service (_vti_bin/Lists.asmx, UpdateListItems operation) which updates the item. The jQuery code then updates the value on the page and changes the fontStyle to italic.
After some DMs back and forth with Mike, at his suggestion (and for extra fun), we used the Tablesorter 2.0 jQuery library so that the table re-sorts after each Potential Value change. A bonus effect of this is that the column headers are sortable as well. The CSS styling on the headers shows this.
A known issue (which we chose not to deal with here) is that concurrent changes will write over each other. There is no checking for these conditions, though they could be managed fairly easily.
Take a look and let me know what you think!
Nice! I’m a bit new to the whole SP stuff, so this is probably a newbee question: how do i add custom rows containing jquery to the view/dataview webpart? I added a column to a dataview webpart in designer, but i don’t know how to add jquery functionality to it.
Benzhi:
I depends on what your jQuery is supposed to do. Generally you’ll want to hook it into an event. Can you explain a little more about what you are trying to do?
M.
Hi Marc,
i am also new to Sharpoint and jquery like Benzhi.
Can you please explain me how to input the scripts from the demo site into a sharepoint site. I need to do the exact thing like your webpart on the demosite. I have a list with a Title filed an a Number Field. What i need to do is to increase the Number by on when clicking on the button.
Where do i have to place the script with the functions and the codesnippet for the Buttons. Tried to insert it into a xsl-editor field but then the Webpart cannot be shown.
Thanks Mike
Mike:
This demo page is one that I did before I started working on my jQuery Library for SharePoint Web Services. (In fact, it was the inspiration for the library.) Take a look at the library and try using it instead. The documentation ought to give you plenty to go on, but leave any questions in the Discussions on the Codeplex Site.
M.
Hi Mark,
I was lookking at both the above post and an ‘old’ EUS/STP post from Mark Miller/Woody S.:
http://www.endusersharepoint.com/2009/03/30/create-a-custom-sort-order-in-a-sharepoint-list/
Could you give any pointer on how to modify your initial code to
create drop down button (pulling #s from the list item counts) instead of the +1/+10 etc…
buttons.
I would basically like to recreate the list ‘columns ordering’ feature available OOTB – but ‘vertically’
I am using MOSS 2007.
Thanks,
Greg
Interesting idea! My example is actually updating the value in the Potential Value column based on what button you click. By the way, that example was my first attempt at interacting with the SharePoint Web Services, and it led to the jQuery Library for SharePoint Web Services.
Can you explain a little more about what you want to do? I’m not sure what you mean by “pulling #s from the list item counts”. Do you want the page to allow the user to reorder the items much like Mark demonstrates in that video?
M.
Hi Marc,
Sorry I didn’t see your response sooner.
In my ‘real world case’, we are tracking about 200 project records.
The ‘default’ sorting is kind of custom (not alphanumerical sorting possible based on the project names, project numbers or dates).
We are adding new projects on a regular basis and have to ‘insert’ them in the custom ordered list. The way I am currently doing it is to use a hidden field (number 1 thru X – X being the items total count) and use it to create those ‘custom sorted’ views. When a project is added, I basically do an export/ import to Excel to update the hidden sorting field. (I could also do it in the DataView)
Mark and Woody’s solution is a good trick but:
– if you have an existing list that is not a ‘link type’ list, well you can’t really use it
– the reorder is done in a form (which is fine but could be ‘better’
Idea would be to recreate the ‘column sorting feature available OOTB when you go to the ‘List Settings’ / Column Ordering (…/_layouts/formEdt.aspx?List= URL).
In that form, the drop downs are listing numbers 1 thru X – X being the columns total count.
This is allowing to sort columns, idea would be to sort rows.
Doing this in a form would be nice, doing it directly on the page using JQuery and Web Services would be quite elegant.
Hope this makes more sense
Thanks
Greg
Greg:
Yes, this makes more sense now. I think that the best approach would be to use an ^/v (up/down) approach to move the items. That way, you’d only have to update two items (swapping one for the other) rather than potentially updating all of the items (if you moved an item from position X to position 1, say). Regardless, you’d hook into the click (or change) event for the buttons (dropdowns) and then use UpdateListItems to change the sorting column for each affected item. Definitely doable.
M.
Marc,
That’s the thing, changing the sort order # for 1 record should modify all sort order #s that
are affected by the renumbering (you don’t want to create a duplicate sorting #).
So depending if the sorting # for the list record is increased or decreased, other list records would have their sorting # updated or not.
I will do more research over the WE (and take a better look at the functions in your library) Maybe there is a way to look ‘under the hood’
of the SP (…/_layouts/formEdt.aspx?List= URL) form…
Since the list could have hundreds of items, a drop down would be more efficient than a set of +1/ -1 / up/down buttons.
Greg
If you think about the up/down approach, though, you only would need to change two items on each click (effectively, they are swapped). What worries me about the dropdown is:
* 200+ options in the dropdown which is clumsy, therefore
* potentially 200+ Web Services calls
M.
Sorry, im currently new with this approach… may i ask how to use these jquery.
Brian:
There’s a lot that’s been written about using jQuery with SharePoint. I’ve written a lot here on my blog, and many others have as well. I’d suggest doing some simple research to get started.
M.
Marc,
Will this work on a Choice field? I have a Status choice column and need to allow users to change that status based on which button they click.
Thanks,
Candace
Candace:
You found a really old post! Yes, you can update any type of column you want. Check out my SPServices library, which grew out of the ideas in this post.
M.