SharePoint - Accessing SharePoint list using jquery.

Asked By Vaibhavi Rajpathak on 15-May-13 08:21 AM

I have created empty web application. And added html page and js file.

Both if the given method not working. It does not go to success function. 


Following is  HTML file code

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="jquery-1.8.2.js" type="text/javascript"></script>
  <script src=" webtoolkit.base64.js" type="text/javascript"></script>
    
    <script src="jquery.SPServices-0.6.2.min" type="text/javascript"></script>
  <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
  <script src="Home.js" type="text/javascript"></script>
<ul id="tasksUL"/> 

Following JS file code  

function hh_data()
   {         
     var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
         <soapenv:Body> \
          <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
             <listName>Contacts</listName> \
             <viewFields> \
               <ViewFields> \
                <FieldRef Name='City' /> \
              </ViewFields> \
             </viewFields> \
           </GetListItems> \
         </soapenv:Body> \
       </soapenv:Envelope>";
 
     var auth = make_basic_auth('username', 'PWD');
     var url = 'http://localhost:24242/_vti_bin/lists.asmx';
 
     // RAW
     xml = new XMLHttpRequest();
     xml.open('GET', url)
     xml.setRequestHeader('Authorization', auth);
 
 
     $.ajax({
       url: "http://localhost:24242/_vti_bin/lists.asmx",
       type: "POST",
       beforeSend: function (req) {
         req.setRequestHeader("Authorization", auth);
       },
       dataType: "xml",
       data: soapEnv,
       success: processResult,
       error: callError,
       contentType: "text/xml; charset=\"utf-8\"",
      
      
     });
    
   }
 
  function make_basic_auth(user, password)
{
     var tok = user + ':' + password;
     var hash = Base64.encode(tok);
     return "Basic " + hash;
   }
 
 
   function processResult(xData, status) {
     alert('outside');
     $(xData.responseXML).find("z\\:row").each(function () {
       alert('here');
       var liHtml = "<li><a href='#'>" + $(this).attr("ows_Title") + "</a></li>";
       $("#tasksUL").append(liHtml);
     });

   }

Second Method 

This is using SPservice

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
 
  <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.SPServices-0.6.2.min.js"></script>
 
<script language="javascript" type="text/javascript">
 
  $(document).ready(function () {
    $().SPServices({
      operation: "GetListItems",
      webURL: "http://localhost:24242/",
      async: false,
      listName: "Contacts",
      CAMLViewFields: "<ViewFields><FieldRef Name='City' /></ViewFields>",
      completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
          alert('in function')
          var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
          $("#tasksUL").append(liHtml);
        });
      }
    });
  });
</script>
 
<ul id="tasksUL"/> 
 
</body>
</html>

I am using seprate web application in visual studio to access the sharepoint list.
Please suggest the solution