how to use SPServices for writing user data to a list?

Oct 18, 2011 at 11:40 AM
Edited Oct 18, 2011 at 11:43 AM

Hi Marc, we had a short interaction on Twitter and I thought I would eloborate on my question here.
I am trying to accomplish the following:

When a user opens a SharePoint site, a popup will appear, asking the user to enter words in a textbox. After pressing a submit button, the entered text will be written to a SharePoint list.

Now, I know SharePoint (2007) very well and am able to implement jQuery scripts but I do understand the logic of the code itself, so I cannot 'compile' a complete code for this kind of stuff :).
I have found a code for a jQuery popup showing a textbox but it is not complete, it must be expanded with the code that writes the input to a list, and that's where I got stuck.

This is the code I found:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
  <script>
  $(document).ready(function() {
    $("#dialog").dialog();
  });
  </script>
</head>
<body style="font-size:62.5%;">
 
<div id="dialog" title="Describe this company with any word(s):">
  <form>
 <input value="" /><br /> 
</form>
</div>

</body>
</html>

 If you can help me with this, I would be very grateful because I need this solution yesterday.... :O

Thanks in advance for your help,
Claudia

Oct 18, 2011 at 12:02 PM

Here's how I'd go about doing it...

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://domain/mysite/scripts/jquery-spservices-version.js"></script>

    <script>
function SubmitToSharePoint()  {
   $().SPServices({
       operation: "UpdateListItems",
       async: false,
       listName: "ListName",
       batchCmd: "New",
       valuepairs: [["ColumnName", $("[name=txtUserOpinion]").val()]],
       completefunc: function(xData, Status) {
            alert('Submitted!');
       }
    });
}

$(document).ready(function() {
    $("#dialog").dialog();
  });
  </script>
</head>
<body style="font-size:62.5%;">
 
<div id="dialog" title="Describe this company with any word(s):">
//  <form>
 <input name="txtUserOpinion" type="text" value="" /><br /> 
 <input type="Button" value="Submit" onclick="javascript:SubmitToSharePoint()">
//</form>
</div>

</body>
</html>

Red Items: The best way (that I've found) to get the names that the SharePoint services are looking for is to get your list GUID and check it against the server...

http://domain/mysite/_vti_bin/owssvr.dll?Cmd=Display&List={LIST-GUID-HERE}&XMLDATA=TRUE

Let me know if you have any questions.

Oct 18, 2011 at 12:35 PM

I'd also wrap $("[name=txtUserOpinion]").val() with STSHtmlEncode to prevent any malformed xml.  Here's an example:

STSHtmlEncode($("[name=txtUserOpinion]").val())

Cheers,

Matt

Coordinator
Oct 18, 2011 at 12:48 PM

One other note: you can actually uase the list's name rather than the GUID if you choose. So, something like:

 listName: "Announcements",

M.

Oct 18, 2011 at 1:25 PM

Yes, it works like a charm!! Super, guys, you just made my day!  I had to remove the <form> tags since they are not supported by CEWP, but after that it worked wonderfully.
(@Marc: I did use the list's name and not the GUID)

Just one more thing though.... when "Submit" is pressed, the initial popup remains visible on the screen and the next "Submitted!" popup appears. I would like very much the initial popup to disappear when the user clicks on Submit. Is this possible?

Thanks again!!
Claudia

Oct 18, 2011 at 1:59 PM

Per.... http://docs.jquery.com/UI/Dialog

Replace....
             alert('Submitted!');

With....
             $("#dialog").dialog('close');

Oct 18, 2011 at 2:24 PM

Thank you!