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>
Improve this question
3
  • So instead of placing the results in table rows, you want it assigned to HTML input boxes??? Commented Mar 9, 2018 at 18:34
  • Yes , For that I had written the line var x = document.createElement("INPUT"); x.setAttribute("type", "text"); x.setAttribute("value", CurrentPDR); Commented Mar 9, 2018 at 19:20
  • Okay. What part is failing? Are you getting javascript errors? Have you considered doing this in C#? Commented Mar 10, 2018 at 23:31

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.