We Keep Coding

How to use Angular.js to populate multiple select fields using AJAX calls to different endpoints

I apologize up front for the possible lack of clarity for this question, but I'm new to Angular.js and my knowledge of it is still slightly hazy. I have done the Angular.js tutorial and googled for answers, but I haven't found any.
I have multiple select/option html elements, not inside a form element, and I'm populating them using AJAX. Each form field is populated by values from a different SharePoint list. I'm wondering if there is a way to implement this using Angular.js?
I would like to consider building this using Angular because I like some of it features such as data-binding, routing, and organizing code by components. But I can't quite grasp how I could implement it in this situation while coding using the DRY principle.
Currently, I have a single AJAX.js file and I have a Javascript file that contains an array of the different endpoints I need to connect to along with specific query parameters. When my page loads, I loop through the arrays and for each element, I call the GET method and pass it the end-point details.
The code then goes on to find the corresponding select element on the page and appends the option element returned by the ajax call.
I'm new to Angular, but from what I understand, I could create a custom component for each select element. I would place the component on the page and all the select and options that are associated with that component would appear there. The examples I've seen demonstrated, associate the ajax call with the code for the component. I'm thinking that I could use a service and have each component dependent on that service and the component would pass it's specific query details to the service's ajax call.
My current code - Program flow: main -> data retrieval -> object creation | main -> form build.
Called from index.html - creates the multiple query strings that are passed to ajax calls - ajax calls are once for each query string - the very last function in the file is a call to another function to build the form elements.
var snbApp = window.snbApp || {};
snbApp.main = (function () {
var main = {};
main.loadCount = 0;
main.init = function () {
function buildSelectOptions(){
//***
//Build select options from multiple SharePoint lists
//***
var listsArray = snbApp.splistarray.getArrayOfListsForObjects();
for(var i = 0; i < listsArray.length; i++){
var listItem = listsArray[i];
var qryStrng = listItem.list +
"?$select=" + listItem.codeDigits + "," + listItem.codeDescription + "," + listItem.ItemStatus + "&$orderby=" + listItem.codeDescription + "&$filter="+listItem.ItemStatus+" eq true" + "&$inlinecount=allpages"
var listDetails = {
listName: listItem.list,
listObj: listItem,
url: "http://myEnv/_vti_bin/listdata.svc/" + listItem.list +
"?$select=" + listItem.codeDigits + "," + listItem.codeDescription + "," + listItem.ItemStatus + "&$orderby=" + listItem.codeDescription + "&$filter="+listItem.ItemStatus+" eq true" + "&$inlinecount=allpages"
};
var clientContext = new SP.ClientContext.get_current();
clientContext.executeQueryAsync(snbApp.dataretriever.letsBuild(listDetails), _onQueryFailed);
}
//***
//Build select option from other API endpoint
//***
var listDetails = {
listName:"SNB_SecondaryActivityCodes",
url: "http://myEnv/requests/odata/v1/Sites?$filter=(IsMajor eq true or IsMinor eq true) and IsActive eq true and IsPending eq false and CodePc ne null and IsSpecialPurpose eq false&$orderby=CodePc"
};
snbApp.dataretriever.letsBuild(listDetails);
}
buildSelectOptions();
//***
//Add delay to populate fields to ensure all data retrieved from AJAX calls
//***
var myObj = setTimeout(delayFieldPopulate,5000);
function delayFieldPopulate(){
var optObj = snbApp.optionsobj.getAllOptions();
var osType = $("input[name=os_platform]:checked").val();
snbApp.formmanager.buildForm(osType, optObj);
}
};
function _onQueryFailed(sender, args) {
alert('Request failed.\nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
return main
})();
AJAX calls here - called from main/previous file:
var snbApp = window.snbApp || {};
snbApp.dataretriever = (function () {
var listsArray = snbApp.splistarray.getArrayOfListsForObjects();
function getListData(listItem) {
var eventType = event.type;
var baseURL = listItem.url;
$.ajax({
url: baseURL,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
}
})
.done(function(results){
snbApp.objectbuilderutility.buildObjectFields(results, listItem);
})
.fail(function(xhr, status, errorThrown){
//console.log("Error:" + errorThrown + ": " + myListName);
});
}
function _onQueryFailed(sender, args) {
alert('Request failed.\nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
return{
letsBuild:function(item) {
getListData(item);
}
};
})();
Builds a item name object - called from recursive AJAX calls / previous file
var snbApp = window.snbApp || {};
snbApp.objectbuilderutility = (function () {
function formatItemCode(itemCode, eventType){
if(eventType !== 'change'){ //for load event
var pattern = /^CE/;
var result = pattern.test(itemCode);
if(result){
return itemCode.slice(2);
}else{
return itemCode.slice(0,3);
}
}else{ //for change event
var pattern = /^CE/;
var result = pattern.test(itemCode);
if(result){
return itemCode.slice(2);
}else{
return itemCode.slice(3);
}
}
}
return{
buildObjectFields: function(returnedObj, listItem){ //results:returnedObj, prevItem:listItem
//***
//For SharePoint list data
//***
if (listItem.listName !== "SNB_SecondaryActivityCodes") {
var theList = listItem.listName;
var firstQueryParam = listItem.listObj.codeDigits;
var secondQueryParam = listItem.listObj.codeDescription;
var returnedItems = returnedObj.d.results;
var bigStringOptions = "";
//regex to search for SecondaryFunctionCodes in list names
var pattern = /SecondaryFunctionCodes/;
var isSecFunction = pattern.test(theList);
if(isSecFunction){
bigStringOptions = "<option value='0' selected>Not Applicable</option>";
}else{
bigStringOptions = "<option value='0' disabled selected>Select Option</option>";
}
$.each(returnedItems, function (index, item) {
var first = "";
var second = "";
for (var key in item) {
if (item.hasOwnProperty(key)) {
if (key != "__metadata") {
if (key == firstQueryParam) {
first = item[key];
}
if (key == secondQueryParam) {
second = item[key];
}
}
}
}
bigStringOptions += "<option value=" + first + " data-code=" + first + ">" + second + "</option>";
});
var str = theList.toLowerCase();
snbApp.optionsobj.updateFunctionOrActivity(theList.toLowerCase(), bigStringOptions);
//***
//For other API
//***
} else {
var theList = listItem.listName;
var bigStringOptions = "<option value='0' disabled selected>Select Option</option>";
var returnedItems = returnedObj.value;
for(var i = 0; i < returnedItems.length; i++){
var item = returnedItems[i];
//***
//change event type means the user selected a field
//***
if(listItem.eventType === "change"){
var siteCodeChange = item.SiteCodePc;
if (typeof siteCodeChange === "string" & siteCodeChange != "null") {
siteCodeChange = siteCodeChange < 6 ? siteCodeChange : siteCodeChange.slice(3);
}
bigStringOptions += "<option value='" + item.Id + "' data-code='" + siteCodeChange + "' data-isDivSite='" + item.IsDivisionSite + "' data-isDistSite='" + item.IsDistrictSite + "' data-divID='" + item.DivisionSiteId + "' data-distID='" + item.DistrictSiteId + "'>(" + siteCodeChange + ") " + item.Name + "</option>";
snbApp.formmanager.buildSelectSiteLocations(bigStringOptions);
//***
//load event which means this happens when the page is loaded
//***
}else{
var siteCodeLoad = item.SiteCodePc;
if (typeof siteCodeLoad === "string" & siteCodeLoad != "null") {
var siteCodeLoad = siteCodeLoad.length < 4 ? siteCodeLoad : siteCodeLoad.slice(0, 3);
}
bigStringOptions += "<option value='" + item.Id + "' data-code='" + siteCodeLoad + "' data-isDivSite='" + item.IsDivisionSite + "' data-isDistSite='" + item.IsDistrictSite + "' data-divID='" + item.DivisionSiteId + "' data-distID='" + item.DistrictSiteId + "'>(" + siteCodeLoad + ") " + item.Name + "</option>";
snbApp.optionsobj.updateFunctionOrActivity(theList.toLowerCase(), bigStringOptions);
}
}
}
}
};
})();
Form management - called from previous file, gets all select elements on page and appends items from the object in previous file to each select element.
var snbApp = window.snbApp || {};
//Direct interface to the form on the page
snbApp.formmanager = (function(){
var form = {};
form.content_holder = document.getElementById("content_holder");
form.sec_act_codes = document.getElementById("snb_secondary_activity_codes");
form.prim_func_codes = document.getElementById("snb_primary_function_codes");
form.sec_func_codes = document.getElementById("snb_secondary_function_codes");
form.sec_func_nums = document.getElementById("snb_secondary_function_numbers");
form.host_options = document.getElementById("snb_host_options");
form.site_locs_div = document.getElementById("site_locations_div");
form.site_locs = document.getElementById("snb_site_locations");
form.dc_or_off_prem_div = document.getElementById("dc_or_off_premise_div");
form.dc_off_prem_codes = document.getElementById("snb_dc_offpremise_codes");
var snb_secondary_activity_codes = "";
var snb_primary_function_codes = "";
var snb_secondary_function_codes = "";
var snb_secondary_function_numbers = "";
var snb_host_options = "";
var snb_site_locations = "";
var snb_dc_op = "";
//builds the server location hosting options selection
function buildLocationTypeSelector() {
var locationOptionsString = "<option value='0' disabled selected>Select Option</option>";
for (var i = 0; i < locationOptions.length; i++) {
var location = locationOptions[i];
locationOptionsString += "<option value=" + location.hostLocale + " data-code=" + location.code + ">" + location.hostLocale + "</option>";
}
$("#snb_host_options").append(locationOptionsString);
}
function buildSiteLocations(bigString){
if(bigString === undefined){
var siteLocs = document.getElementById("snb_site_locations");
var newOption = document.createElement("option");
newOption.setAttribute("value", 0);
newOption.setAttribute("disabled","disabled");
newOption.setAttribute("checked","checked");
var newText = document.createTextNode("Select Option");
newOption.appendChild(newText);
siteLocs.appendChild(newOption);
} else{
var siteLocs = document.getElementById("snb_site_locations");
siteLocs.innerHTML = bigString;
}
}
return {
form:form,
buildSelectSiteLocations: function(bigString){
buildSiteLocations(bigString);
},
buildForm: function (osType, optObj) {
buildLocationTypeSelector();
buildSecondaryFunctionNumberSelector();
buildSiteLocations();
if(osType === 'windows'){
$("#snb_secondary_activity_codes").append(optObj.windows.secondary_activity);
$("#snb_primary_function_codes").append(optObj.windows.primary_function);
$("#snb_secondary_function_codes").append(optObj.windows.secondary_function);
$("#snb_site_locations").append(optObj.windows.site_location);
$("#snb_dc_offpremise_codes").append(optObj.windows.dc_offpremise);
}else{
$("#snb_secondary_activity_codes").append(optObj.unix.secondary_activity);
$("#snb_primary_function_codes").append(optObj.unix.primary_function);
$("#snb_secondary_function_codes").append(optObj.unix.secondary_function);
$("#snb_site_locations").append(optObj.unix.site_location);
$("#snb_dc_offpremise_codes").append(optObj.unix.dc_offpremise);
}
}
};
})();
Thanks in advance.

How to refresh table after everytime button click in ajax call

I want to show data in a table by clicking on a searching button. I am facing issue which is that if there is no data in between "Fromdate - Todate" , error is coming properly but now after this i enter correct fromdate and todate then nothing is displaying in table. I checked chrome console data is coming from backend but not displaying in table
$('#paymentdetails').click(function() {
var getData = basePath + 'Admin/GetPaymentsForDate/?FromDate=' + $(".datepickerInputFROM").val() + '&ToDate=' + $(".datepickerInputTO").val()
if (($(".datepickerInputFROM").val() == "") && ($(".datepickerInputTO").val() == "")) {
alertify.alert('Please select dates to proceed.')
return false;
//$('#financetbl').html('');
} else if (($(".datepickerInputFROM").val() == "") || ($(".datepickerInputTO").val() == "")) {
alertify.alert('Please select dates to proceed.')
return false;
//$('#financetbl').html('');
}
$.ajax({
url: getData,
async: true,
success: function(response) {
// alert(response[0]);
$('#financetbl').html('');
// if (response.resultCourse != '' && response[0]!= 'null') {
if (response.length > 0) {
var tr;
for (var i = 0; i < response.length; i++) {
tr = '<tr>'
tr += "<td>" + response[i].applicationNumber + "</td>";
tr += "<td>" + response[i].applicantName + "</td>"
tr += '</tr>'
$('#financetbl tbody').append(tr);
}
inittable();
console.log(response)
} else {
console.log(response)
alertify.alert("Error : No Payments Details Found");
//flush the table
$('#financetbl').html('No Payments Details Found');
}
}
});
});

I believe that when you execute:
$('#financetbl').html('');
Then tbody is gone you lose your selector for:
$('#financetbl tbody').append(tr);
I think the first line should be:
$('#financetbl tbody').empty();

change
$('#financetbl').html('No Payments Details Found');
to
$('#financetbl').html('<tr><td colspan="2">No Payments Details Found</td></tr>');

You have excess if statements and need to properly manage the table when results returned are empty. So let's put that in an empty table row.
No idea what inittable(); does so you may have to fix this to account for that.
$('#paymentdetails').on('click', function() {
if (($(".datepickerInputFROM").val() == "") || ($(".datepickerInputTO").val() == "")) {
alertify.alert('Please select dates to proceed.')
return false;
}
var getData = basePath + 'Admin/GetPaymentsForDate/?FromDate=' + $(".datepickerInputFROM").val() + '&ToDate=' + $(".datepickerInputTO").val();
$.ajax({
url: getData,
async: true,
success: function(response) {
$('#financetbl').find('tbody').html('');
if (response.length > 0) {
var tr;
for (var i = 0; i < response.length; i++) {
tr = '<tr>'
tr += "<td>" + response[i].applicationNumber + "</td>";
tr += "<td>" + response[i].applicantName + "</td>"
tr += '</tr>'
$('#financetbl tbody').append(tr);
}
inittable();
console.log(response);
} else {
console.log(response);
alertify.alert("Error : No Payments Details Found");
//flush the table
$('#financetbl').find('tbody').html('<tr><td>No Payments Details Found</td></tr>');
}
}
});
});

Try something like JSON.parse()
var json = '{"applicationName":"XYZ","applicationNumber":1}',
obj = JSON.parse(json);
alert(obj.applicationName);
or
var json = '{"applicationName":"XYZ","applicationNumber":1}',
obj = JSON && JSON.parse(json) || $.parseJSON(json);

How to trigger the button when user click enter key using Jquery?

I have a
TextBox (id=txtFilterValue),
Add button (id=btnAdd) and
Table (id=queryTable)
once user enter the value in text box, they may press the enter key. So when they press the enter key, it should call the Add Button which is already defined in jquery.
This is What I tried
Jquery Code
//Preventing ENTER Key
$('#form1').on('keyup keypress', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
//$('input[name = btnAdd]').click();
$("#btnAdd").trigger('click');
e.preventDefault();
return false;
}
});
The above code to prevent the enter key and it will call the Add Button.
As I thought it's working. But it's calling two times and the values are adding 2 times. It shouldn't add two times.
when I click the Add button directly, it's entering the record only one to my table.
This is my button Add code
//Filter Query Add to TABLE and TEXTBOX
$("#btnAdd").click(function () {
var selectedField = $("#FilterField option:selected").text();
var operator = $("#ddlOperator :selected").val();
var filterValue = $("#txtFilterValue").val();
var query;
var textFilterRecord = $("#txtFilterRecord").val();
//values seperated by COMMA
var arrayTxtConditionValue = filterValue.split(',');
if (operator == 'equalTo') {
if ($("#txtFilterRecord").val().length == 0) {
//put the single quotation( ' ) in between values
var filterCommaValue = '';
for (var i = 0; i < arrayTxtConditionValue.length; i++) {
if (i == 0) {
filterCommaValue = filterCommaValue + "'" + arrayTxtConditionValue[i] + "'";
}
else {
filterCommaValue = filterCommaValue + ",'" + arrayTxtConditionValue[i] + "'";
}
}
query = selectedField + ' IN(' + filterCommaValue + ') ';
$("#txtFilterRecord").val($("#txtFilterRecord").val() + query);
$("#queryTable > tbody:last-child").append('<tr><td class="FieldNameID">' + selectedField + '</td><td class="OperatorID"> IN(' + filterCommaValue + ')</td></tr>');
}
else {
var filterCommaValue = '';
for (var i = 0; i < arrayTxtConditionValue.length; i++) {
if (i == 0) {
filterCommaValue = filterCommaValue + "'" + arrayTxtConditionValue[i] + "'";
}
else {
filterCommaValue = filterCommaValue + ",'" + arrayTxtConditionValue[i] + "'";
}
}
var radioButton = $('input[name=group]:checked').val();
query = radioButton + ' ' + selectedField + ' IN(' + filterCommaValue + ') ';
$("#txtFilterRecord").val($("#txtFilterRecord").val() + query);
$('#queryTable > tbody:last-child').append('<tr><td class="FieldNameID">' + radioButton + ' ' + selectedField + '</td><td class="OperatorID"> IN(' + filterCommaValue + ')</td></tr>');
}
}
});

$('#form1').on('keyup keypress', function (e) {
// ...
Here you are listening for two events with the same callback. That means whenever one of them occur the callback will be called. Since they're both related to the key events (both are pretty much the same), the callback will be called twice.
So just remove one of them like this:
$('#form1').on('keypress', function (e) {
// ...

Radio and Checkbox Checked Values Won't Show in JavaScript

I'm trying to get the value of a radio button and multiple checkboxes to appear in a new window using JavaScript. I can't seem to figure out why "true" return instead of the actual value checked. Below is the code and screenshot of the results.
function messagebox()
{
var newWindow;
var msg ="";
var i = document.PizzaForm.state.options.selectedIndex;
var text = document.PizzaForm.state.options[i].text;
var value = document.PizzaForm.state.options[i].value;
{ document.PizzaForm.customer.value = document.PizzaForm.customer.value.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); }
{ document.PizzaForm.city.value = document.PizzaForm.city.value.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); }
newWindow = window.open("","","status=no,height=500,width=500");
message = "<ul><li>Name: " + document.PizzaForm.customer.value;
message += "<li>Address: " + document.PizzaForm.address.value;
message += "<li>City: " + document.PizzaForm.city.value;
message += "<li>State: " + document.PizzaForm.state.value;
message += "<li>Zip Code: " + document.PizzaForm.zip.value;
message += "<li>Phone: " + document.PizzaForm.phone.value;
message += "<li>Email: " + document.PizzaForm.email.value;
message += "<li>Size: " + showSize();
message += "<li>Toppings: " + showToppings();
newWindow.document.write(message);
function showSize()
{
for(i=0;i<document.PizzaForm.sizes.length;i++)
if(document.PizzaForm.sizes[i].checked)
msg += document.PizzaForm.sizes[i].value;
return true;
}
function showToppings()
{
for(i=0;i<document.PizzaForm.toppings.length;i++)
if(document.PizzaForm.toppings[i].checked)
msg += (i==0?"":",")+document.PizzaForm.toppings[i].value;
return true;
}
}

the showSize() and the showToppings() methods are both returning true in the end which is why you're getting true in your string. you should return msg and your problem will be solved.

IE: jQuery.show() only shows element when using alert() before/after show

I'm trying to add a simple 'wait box' on a javascript function, like this:
function caricaElenco(indice) {
(...)
$("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
(...)
$("[id*=Wait1_WaitBox]").hide();
}
And it's working good on Firefox, but not on Internet Explorer 11, that's not showing it. The HTML is:
<div id="ctl00_Wait1_WaitBox" class="updateProgress">
Attendere...<br />
<img src="../Images/wait.gif" align="middle" />
</div>
The weirdest thing is that I try this, for a simple check:
function caricaElenco(indice) {
(...)
alert($("[id*=Wait1_WaitBox]").css('display'))
$("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
alert($("[id*=Wait1_WaitBox]").css('display'))
(...)
$("[id*=Wait1_WaitBox]").hide();
}
And it's working, I mean that it's showing the alert with 'none' and after 'block'... And it's showing the box too! But not without the alert... Why?
UPDATE:
Tried with [id*="Wait1_WaitBox"], but it's the same. jQuery version is 1.8.2.
With
it's working only with the alert
I mean that if I do:
function caricaElenco(indice) {
(...)
alert('whatever');
$("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
alert('whatever');
(...)
$("[id*=Wait1_WaitBox]").hide();
}
It's showing the box, but if I do:
function caricaElenco(indice) {
(...)
$("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
(...)
$("[id*=Wait1_WaitBox]").hide();
}
It's not working (I mean not showing the 'wait box', but doing all the other stuff the function has to do in (...) correctly—load a gridview with an AJAX call) on Internet Explorer 11, in Firefox are both working. No JavaScript error.
UPDATE 2:
Almost entire javascript function:
// Fill part of gridView
function loadList(index) {
index = parseInt(index);
buffer = 100; // Number of rows to load
$("[id*=divGrid]").unbind('scroll');
$('[id*="Wait1_WaitBox"]').show(); // Show loading 'wheel'
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "PageName.aspx/webMethodName",
data: '{id:' + $("[id*=hdnID]").val() + ', index:' + index + '}',
dataType: "json",
async: false,
success: function (response) {
if (index == 0) {
(...)
$("[id*=grid] tr:last-child").remove();
var row = "<tr class='" + response.d[index].State + "'>";
row += "<td class="Column1"></td>";
(...)
row += "<td class="DateColumn"></td>";
(...)
row += "<td class='columnN'></td></tr>";
$("[id*=grid]").append(row);
}
row = $("[id*=grid] tr:last-child").clone(true);
$("[id*=grid] tr:last-child").remove();
if (index <= response.d.length) {
if (index + buffer > response.d.length)
var stop = response.d.length;
else
var stop = index + buffer;
(...)
for (var i = index; i < stop; i++) {
var j = 0;
(...)
$("td", row).eq(j).html("<span id='lblCodeNumber" + i + "' >" + response.d[i].CodeNumber + "</span>"); j++;
(...)
var effectDate = new Date(parseInt(response.d[i].effectDate.substr(6)));
$("td", row).eq(j).html(effectDate.getDate() + '/' + (effectDate.getMonth() + 1) + '/' + effectDate.getFullYear()); j++;
}
(...)
var toBeCounted = "";
var checked = "";
if (response.d[i].ToBeCounted != null)
toBeCounted = response.d[i].ToBeCounted .toString();
else
toBeCounted = "true";
if (toBeCounted == "true")
checked = "checked = 'checked'";
else
checked = "";
var rdToBeCounted = "<span><input type='radio' class='radio' " + checked + " name='ToBeCounted" + i + "' value='s' id='sToBeCounted" + i + "' />";
rdToBeCounted += "<label for='s" + i + "'>YES</label>";
if (toBeCounted == "false")
checked = "checked = 'checked'";
else
checked = "";
toBeCounted += "<input type='radio' class='radio' " + checked + " name='ToBeCounted" + i + "' value='n' id='nToBeCounted" + i + "' />";
rdToBeCounted += "<label for='n" + i + "'>NO</label></span>";
$("td", row).eq(j).html(rdToBeCounted);
$("[id*=grid]").append(riga);
(...)
riga = $("[id*=grid] tr:last-child").clone(true);
}
if (stop < response.d.length) {
$("[id*=divGrid]").scroll(function (e) {
if (element_in_scroll(".congruenti tbody tr:last")) {
loadList($(".congruenti tbody tr:last td:last").html());
};
});
}
$('[id*="Wait1_WaitBox"]').hide();
}
},
error: function (result) {
alert("Error! " + result.status + " - " + result.statusText);
}
});
}

At the end you seem to be hiding it again $("[id*=Wait1_WaitBox]").hide();.
You need to show what goes in between these two lines.
It works with alert because the execution of the script is frozen until you close the alert (and that final line is not executed yet).