Link to home
Start Free TrialLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

Populating html form in Sharepoint using JSOM

I am trying to populate my form using JSOM but I'm having no luck. I don't get an error but when I go into debug mode, the form gets populated with the queried data.  Not sure why.

<link rel="stylesheet" href="/bootstrap.min.css">
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="/jquery-ui.theme.min.css">

    <script src="/jquery.js"></script>
    <script src="/bootstrap.min.js"></script>    
    <script src="/jquery-ui.js"></script>     
    <script src="/projectPlanning.js"></script>

  <script>
  $( function() {
    $( "#ppcDate" ).datepicker();
    $( "#padDate" ).datepicker();
    $( "#aadDate" ).datepicker();
    $( "#mDescDate" ).datepicker();
	$( "#da_Date" ).datepicker();
	$( "#origDate" ).datepicker();
  } );
  </script>    
    <style>
<style>
    #home, #menu1, #menu2, #menu3 { 
        padding: 10px;
    }
    
    #projInfo {
        margin-left:65px;
        margin-bottom:15px;
    }
</style>

<div id="projInfo">
    <table width="65%">
        <tr>
            <td>Project Title</td>
            <td><input type="text" id="projTitle"></td>
        </tr>
        <tr>
            <td>VISN</td>
            <td><input type="text" id="visn"></td>
        </tr>
        <tr>
            <td>Station</td>
            <td><input type="text" id="station"></td>
        </tr>
        <tr>
            <td>Station Name</td>
            <td><input type="text" id="stationName"></td>
        </tr>  
        <tr>
            <td>Project Number</td>
            <td><input type="text" id="projNumber"></td>
        </tr>        
    </table>
</div>

Open in new window



JavaScript code (The adding portion works.  The retrieve works as well, it's just not populating my form unless I go into debug mode.)
$(document).ready(function() {
	$("#design_procPlan").on("click", function () {
		ppDesign_addListItem();
	});
});
SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

var getQueryString = function (field, url) {
    var href = url ? url : window.location.href;
    var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
    var string = reg.exec(href);
    return string ? string[1] : null;
};

//Retrieves all list items- Will need to modify to take in query string data to pass to CAML.
function retrieveListItems() {
    var clientContext = new SP.ClientContext();
    var oList = clientContext.get_web().get_lists().getByTitle('Project Module');
    
    if (getQueryString('projNumber')) {
        var prjQry = "<View><Query><Where><Eq><FieldRef Name='Project_x0020_Number' /><Value Type='Text'>" + getQueryString('projNumber') + "</Value></Eq></Where></Query><ViewFields><FieldRef Name='Title' /><FieldRef Name='Project_x0020_Number' /><FieldRef Name='Station_x0020_Name' /><FieldRef Name='VISN' /><FieldRef Name='Station_x0020_Number' /></ViewFields></View>";  
        //      
    }
    else {
        var prjQry = "<View><Query></Query></View>";
    }
    console.log(prjQry);
    
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(prjQry);
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
        );
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    
 if (listItemEnumerator.moveNext()) {
    
    var oListItem = listItemEnumerator.get_current();
              
    var vsn = oListItem.get_item('VISN');
    var pjTitle = oListItem.get_item('Title')          
	 $('#visn').val(oListItem.get_item('VISN'));
	 $('#projTitle').val(oListItem.get_item('pjTitle'));
	 $('#station').val(oListItem.get_item('Station_x0020_Number'));
	 $('#stationName').val(oListItem.get_item('Station_x0020_Name'));        
	 $('#projNumber').val(oListItem.get_item('Project_x0020_Number'));   
}	 
      
}

function ppDesign_addListItem() {
	var designPlan = $("#designPlan").val();
	var ppcDate= $("#ppcDate").val();
	var padDate = $("#padDate").val();
	var ppcDate= $("#ppcDate").val();
	var aadDate= $("#aadDate").val();
	var setAside= $("#setAside").val();
	var category= "Procurement Plan (Design)";
	
	var clientContext = new SP.ClientContext();
	var oList = clientContext.get_web().get_lists().getByTitle('Project Projections');
	var itemCreateInfo = new SP.ListItemCreationInformation();
	this.oListItem = oList.addItem(itemCreateInfo);
	
	oListItem.set_item('DesignType', designPlan);
	oListItem.set_item('ProcurementDesign', ppcDate);
	oListItem.set_item('PlannedAwardDates', padDate);
	oListItem.set_item('ActualAwardDates', aadDate);
	oListItem.set_item('PlannedAwardDates', padDate);	
	oListItem.set_item('SetAside', setAside);	
	oListItem.set_item('PlanningCategory', category);	
	oListItem.update();
	
	clientContext.load(oListItem);
	clientContext.executeQueryAsync(
	Function.createDelegate(this, this.onAddSucceeded),
	Function.createDelegate(this, this.onAddFailed)
	);
}

function onAddSucceeded(sender, args) {
	$("#submitResult").html("Item successfully added!");
}

function onAddFailed(sender, args) {
	alert('Request failed. ' + args.get_message() +
	'\n' + args.get_stackTrace());
}

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image

Let the squeleton of your page finish to load

replace :
$(document).ready(function() {
	$("#design_procPlan").on("click", function () {
		ppDesign_addListItem();
	});
});
SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

Open in new window

by :
$(document).ready(function() {
	$("#design_procPlan").on("click", function () {
		ppDesign_addListItem();
	});
	SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});

Open in new window

Avatar of Isaac

ASKER

That did nor work.  I did notice something strange though.  In the code below, the alert()'s worked but when it gets to the line to populate the textbox ($('#projTitle').val(oListItem.get_item(pjTitle));), it appears blank.  Always blank. Is the .val() method correct?

function onQuerySucceeded(sender, args) {
alert("im in");
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    
 while (listItemEnumerator.moveNext()) {
    
    var oListItem = listItemEnumerator.get_current();
                    
    //var vsn = oListItem.get_item('VISN');
    var pjTitle = oListItem.get_item('Title')        
    alert(pjTitle);
	 //$('#visn').val(oListItem.get_item('VISN'));
	 $('#projTitle').val(oListItem.get_item(pjTitle));

Open in new window

val is for form elements (input, textarea)
text or html is for other like div, span
Avatar of Isaac

ASKER

Not sure why it's not working. Here's my html code..

  <script>
  $( function() {
    $( "#ppcDate" ).datepicker();
    $( "#padDate" ).datepicker();
    $( "#aadDate" ).datepicker();
    $( "#mDescDate" ).datepicker();
	$( "#da_Date" ).datepicker();
	$( "#origDate" ).datepicker();
  } );
  </script>    
    <style>
<style>
    #home, #menu1, #menu2, #menu3 { 
        padding: 10px;
    }
    
    #projInfo {
        margin-left:65px;
        margin-bottom:15px;
    }
</style>

<div id="projInfo">
    <table width="65%">
        <tr>
            <td>Project Title</td>
            <td><input type="text" id="projTitle" value=""></td>
        </tr>
        <tr>
            <td>VISN</td>
            <td><input type="text" id="visn" value=""></td>
        </tr>
        <tr>
            <td>Station</td>
            <td><input type="text" id="station" value=""></td>
        </tr>
        <tr>
            <td>Station Name</td>
            <td><input type="text" id="stationName"></td>
        </tr>  
        <tr>
            <td>Project Number</td>
            <td><input type="text" id="projNumber"></td>
        </tr>        
    </table>
</div>

Open in new window

this is bad :
    var pjTitle = oListItem.get_item('Title')        
    alert(pjTitle);
	 //$('#visn').val(oListItem.get_item('VISN'));
	 $('#projTitle').val(oListItem.get_item(pjTitle));

Open in new window

that should be :
    var pjTitle = oListItem.get_item('Title')        
    alert(pjTitle);
	 //$('#visn').val(oListItem.get_item('VISN'));
	 $('#projTitle').val(pjTitle);

Open in new window

due to the second call, the code break and it do'nt populate the other fields. some of them are null as you can see (I checked their value before the error) :
User generated image
look like you cannot call get_item twice...
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Isaac

ASKER

How did you check
>>(I checked their value before the error)

I get an error so I must be doing something wrong.
User generated image
your page run fine for me now, do you still have issue ?

to check, set a breakpoint or use the "debugger" keyword
don't forget to put semi-column (good practice :P )

debugger; // if your console is open it should let you see the value just like my screen copy
var pjTitle = oListItem.get_item('Title');

Open in new window


but again, your page run fine for me now
Avatar of Isaac

ASKER

Thanks! It works.

The debugger still does not work for me.
When I add the debugger like you, I opened developer tool and did not see what you showed in your print screen image.

What were your steps?