Reading List Items using JQuery

Recently got an Requirement where i was suppose to send a request to customer to fill the Questionnaire for the feedback...

• Below form will be initiated by the Project Manager to have the customer feedback.
  Mail will reach to the Client with the hyper link of the List's Edit item, An Item will be added to the Customer Feedback form and also Mail will be Shoot the client
  Then Client will see the below shown form
  
  And He will fill the Questionnaire and later on the CFB Score will get sync to the Project Server.
• So how can we achieve such scenario, here we go open the list's EditForm.aspx and place the content editor webpart and place them above the form control.
• And here we Go >>
  First Give the reference to the JQuery Folder as usual..
  <script language="javascript" type="text/javascript" src="/_layouts/jquery/jquery-1.3.2.min.js"></script>
  
  
  To Fetch the ID's Value from the Query String....
  
  
  function queryString(parameter) {
  var loc = location.search.substring(1, location.search.length);
  var param_value = false;
  var params = loc.split("&");
  for (i=0; i<params.length;i++) {
  param_name = params[i].substring(0,params[i].indexOf('='));
  if (param_name == parameter) {
  param_value = params[i].substring(params[i].indexOf('=')+1)
  }
  }
  if (param_value) { return param_value; }
  else { return false; //Here determine return if no parameter is found }
  }
  var param=queryString('ID');
  
  
  This will Fetch the data from Web Services
  
• Now based on the Id fetched from the query string we have to traverse through the data which we have got using webservices used in below code
  <script language="javascript">
• $(document).ready(function(){
  var soapEnv_CFF =
  "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
  <soapenv:Body> \
  <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
  <listName>Customer Feedback Form</listName> \
  <viewFields> \
  <ViewFields> \
  <FieldRef Name='Id' /> \
  <FieldRef Name='Title' /> \
  </ViewFields> \
  </viewFields> \
  </GetListItems> \
  </soapenv:Body> \
  </soapenv:Envelope>";
  $.ajax({
  url: "../../_vti_bin/lists.asmx",
  type: "POST",
  dataType: "xml",
  data: soapEnv_CFF,
  complete: processResult_CFF,
  contentType: "text/xml; charset=\"utf-8\""
  });
  });
• This Function will fetch data which we require to populate based on the IDs and append their values in the variable which we are going to use in the html representation

• function processResult_CFF(xData, status) {
  $(xData.responseXML).find("z\\:row").each(function() {
  if($(this).attr("ows_ID")==param) {
  param=$(this).attr("ows_Title");
  var liHtml = "<td>Sow No./Workorder No :</td><td>" + $(this).attr("ows_ID") + "</td><td></td><td></td>" ;
  $("#tasksUL").append(liHtml);
  }
  });
  }
  </script>
• This is the HTML tags where we can use the appended html content
  <table style="background-color:Silver" border="0" cellspacing="2" cellpadding="1" width="100%">
  <tr style="background-color:#d6ebff" id="tasksUL"></tr>
  </table>
  </html>

So without using the sharepoint designer we can actually show the data from other list using jQuery and content editor webpart. really easy, isnt it..!!? :)