ksivanandan
Novice

Javascript on dropdown change event with REST API call

Jump to solution

Good Morning!

I am trying to retrieve SharePoint list data and populate a repeater with 4 columns on a dropdown change event. Initially I got the cross domain scripting error and trying to fix that, now broke my dropdown. The dropdowns are stuck on loading.

var web;
var hostweburl;
var appweburl;
var pollSP;



NWF.FormFiller.Events.RegisterAfterReady(function () {
   pollSP = setInterval(checkSPLoad, 500);
});


// Once Nintex loads clientContext — perform setup functions
function checkSPLoad() {
   if (clientContext) {
      window.clearInterval(pollSP);
      sharePointReady();
   }
}


function sharePointReady() {
   hostweburl = decodeURIComponent(Utils.getQueryStringParameter('SPHostUrl'));
   appweburl = decodeURIComponent(Utils.getQueryStringParameter('SPAppWebUrl'));
   var scriptbase = hostweburl + '/_layouts/15/';
   NWF$.getScript(scriptbase + 'SP.Runtime.js',
   function () {
   NWF$.getScript(scriptbase + 'SP.js',
   function () { NWF$.getScript(scriptbase + 'SP.RequestExecutor.js', onSPLoad); }
   ); }
); }


function onSPLoad() {

// Only executed once the page's document object model (DOM) is ready.
NWF$().ready(function () {
NWF$("#"+ NounModifier).change(function()
{
var noun = NWF$("#" + Noun).val();
var nounModifier = NWF$("#" + NounModifier).val();
getCharacteristics(noun, nounModifier)
});
});
}


function getCharacteristics(noun, nounModifier)
{
var selectedNoun;
var selectedNounModifier;
selectedNoun = NWF$('#' + Noun).find('option:selected').text();
selectedNounModifier = NWF$('#' + NounModifier).find('option:selected').text();

var restQuery = appweburl + "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Noun-Modifier-Characteristics')/items?$select=Noun/Title,NounModifier/Title,Characteristics,Mandatory,Definition,Value&$expand=Noun,NounModifier&$filter=(Noun/Title eq '" + selectedNoun+ "') and (NounModifier/Title eq '" + selectedNounModifier + "')&@target='" + hostweburl + "'";
if(selectedNounModifier != "")
{
NWF$.getJSON(restQuery, function(data){
jQuery.each(data.value, function(i, item){
console.log(item.Characteristics);
});
});
}

}


var Utils = {
getQueryStringParameter: function (param) {
var params = document.URL.split('?')[1].split('&');
var strParams = '';
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params.split('=');
if (singleParam[0] == param) {
return singleParam[1];
}
}
}
}

Thanks for any help

Kalpana

This is the error I get

Uncaught Error: The collection has not been initialized. It has not been requested or the request has not been executed. It may need to be explicitly requested.
at Function.Error.create (https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js:5:2736)
at SP.FieldCollection.$33_1 (https://static.sharepointonline.com/bld/_layouts/15/16.0.5326.1207/sp.runtime.js:2:36552)
at SP.FieldCollection.$3i_1 (https://static.sharepointonline.com/bld/_layouts/15/16.0.5326.1207/sp.runtime.js:2:36199)
at NF.Lookup.Common.self.getFieldByInternalNameOrTitle (https://formso365.nintex.com/Ext/Filler.min.js?v=jCmbqY9fxorWjc1f4zK42HdGPAEs0jDNL5DcDXE5Uk81:41431:...)
at NF.Lookup.Common.self.getFieldInternalName (https://formso365.nintex.com/Ext/Filler.min.js?v=jCmbqY9fxorWjc1f4zK42HdGPAEs0jDNL5DcDXE5Uk81:41404:...)
at Object.<anonymous> (https://formso365.nintex.com/Ext/Filler.min.js?v=jCmbqY9fxorWjc1f4zK42HdGPAEs0jDNL5DcDXE5Uk81:42275:...)
at c (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js:4:26036)
at Object.fireWith [as resolveWith] (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js:4:26840)
at Object.i.(anonymous function) [as resolve] (https:/

Tags (2)
0 Kudos
Reply
1 Reply
ksivanandan
Novice

Re: Javascript on dropdown change event with REST API call

Jump to solution

This did the trick for me

var SPHostUrl;
var SPAppWebUrl;
var ready = false;

// this function is executed when the page has finished loading. It performs two tasks:
// 1. It extracts the parameters from the url
// 2. It loads the request executor script from the host web

NWF$(document).ready(function()
{

var params = document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1)
{
var param = params.split("=");
switch (param[0])
{
case"SPAppWebUrl":
SPAppWebUrl = decodeURIComponent(param[1]);
break;
case"SPHostUrl":
SPHostUrl = decodeURIComponent(param[1]);
break;
}
}

// load the executor script, once completed set the ready variable to true so that
// we can easily identify if the script has been loaded
NWF$.getScript(SPHostUrl + "/_Layouts/15/SP.RequestExecutor.js", function (data) {
ready = true;
NWF$("#" + Unit).bind("change", GetApprovers);

});

});

function GetApprovers()
{
if(ready)
{
var selectedUnit = NWF$('#' + Unit).find('option:selected').text();
if(selectedUnit == "Please select a value...")
{
var restQuery = SPAppWebUrl + "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('MRORequestFormApprovals')/items?$select=Unit,Approver/Name,Approver/Id,Approver/FirstName,Approver/LastName,ApproverTitle&$expand=Approver&@target='" + SPHostUrl + "'";
}
else
{
var restQuery = SPAppWebUrl + "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('MRORequestFormApprovals')/items?$select=Unit,Approver/Name,Approver/Id,Approver/FirstName,Approver/LastName,ApproverTitle&$expand=Approver&$filter=(Unit eq '" + selectedUnit + "')&@target='" + SPHostUrl + "'";
}

}
}

0 Kudos
Reply