0
  • How to Display SharePoint list result in html controls

    • I had written the below code fetch the data from SharePoint list and bind to html table and it is working fine.Today my client told me to place the value in html control

    • Also, I had written few lines to add html input text control .But I am not finding right way to place the control in rows

Can any one please help me or guide me in completing this.

<div id="tableheader" >
 <table id="tblCustomListData" border="1" width="100%" style="overflow-x:auto;">
              <thead>
                     <tr class="bgcolorgray">
                        <th>Sno</th>
                        <th >Current DR</th>
                     </tr>
                </thead>
            </table>
</div >

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getsproductcard);

function getsproductcard()
{
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('ProductCategory');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Title' Ascending='TRUE' /></OrderBy></Query><RowLimit>5</RowLimit></View>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded2),Function.createDelegate(this, this.onQueryFailed) );
}

function onQuerySucceeded2(sender, args)
{
var CurrentPDR=null;
var count=1;

var x = document.createElement("INPUT");
   x.setAttribute("type", "text");


var txtHTML = "";
$('#tblCustomListData tbody').html('');
  var listItemInfo = '';var count=0;
  var listItemEnumerator = collListItem.getEnumerator();
   while (listItemEnumerator.moveNext()) {
                 var oListItem = listItemEnumerator.get_current();
                 count++;
                 CurrentDR=oListItem.get_item('ProductTitle');
                 x.setAttribute("value", CurrentPDR);

                 var row = document.createElement("tr");

                 txtHTML = txtHTML + "<tr>";

                 txtHTML = txtHTML + "<td>";
                 txtHTML = txtHTML + count+ "</a>";
                 txtHTML = txtHTML + "</td>";

                 txtHTML = txtHTML + "<td>";
                 txtHTML = txtHTML + CurrentPDR + "</a>";
                 txtHTML = txtHTML + "</td>";

                 txtHTML = txtHTML + "</tr>";
                }
                $("#tblCustomListData").append(txtHTML);
}
function onQueryFailed(sender, args)
{
alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace());
}
</script>
  • So instead of placing the results in table rows, you want it assigned to HTML input boxes??? – jpollar Mar 9 '18 at 18:34
  • Yes , For that I had written the line var x = document.createElement("INPUT"); x.setAttribute("type", "text"); x.setAttribute("value", CurrentPDR); – MSA Mar 9 '18 at 19:20
  • Okay. What part is failing? Are you getting javascript errors? Have you considered doing this in C#? – jpollar Mar 10 '18 at 23:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.