Using Asp.Net and Java Script
from Datatime control i am picking mulitple data which should add the combo box.
Java Script
function closed(cal) {
$("#txtIndividualDays").val("");
var noDays = 0;
var ddlDate = document.getElementById("sIndividualDays");
var opt;
ddlDate.options.length = 0;
MA.length = 0;
var countDays = 0;
for (var i in cal.multiple) {
countDays++;
}
var arrDays = new Array(countDays);
countDays = 0;
if (arrDays.length == 0) {
opt.text = "Select Date";
opt.value = "-1";
$("#txtIndividualDays").val($("#txtIndividualDays").val() + opt.text + ";");
}
for (var i in cal.multiple) {
arrDays[countDays] = i;
countDays++;
}
for (var i in arrDays.sort()) {
var d = cal.multiple[arrDays[i]];
var isWeekend = false;
var isHoliday = false;
if (d) {
var _date;
_date = d.print("%m/%d/%Y");
opt.text = d.print("%m/%d/%Y");
opt.value = d.print("%m/%d/%Y");
MA[MA.length] = d;
document.getElementById("txtIndividualDays").value += opt.text + ";";
}
}
document.getElementById("txtWorkingDays").value = noDays;
var control = $("#sIndividualDays");
var itemCount = $("#sIndividualDays option").length;
cal.hide();
return true;
};
The above script is showing error, while selecting a single date. What wrong in my script.
Need scrip help
I am not sure that these lines are correct:
var opt;
..............
opt.text = "Select Date";
opt.value = "-1";
...........
I suggest you change to: var opt = new Object();
Related
i made two dynamic dropdown list State and city
City dropdown will depend of selected option of state
problem is when all is good and okay to submit .it resets the city drop down
and does not submit
javascript code for making those dynamic drop down is
these function are onchange events
// remove all previous options
function removeOptions(selectbox) {
for (let i = selectbox.options.length - 1; i >= 0; i--) {
selectbox.remove(i);
}
}
// function to make city drop down according to selected state
function cityFunction(){
// get input value and text
const stateobj = document.getElementById('stateDropDown');
const valueState = stateobj.options[stateobj.selectedIndex].text;
const selectedOption = stateobj.options[stateobj.selectedIndex].value;
// making required arrays
let sindhArray = [ 'Select City', 'Karachi', 'Hyderabad', 'Mirpur khas', 'Sukkhar', 'Shikarpur' ];
let KhyberArray = [ 'Select City', 'gilgit', 'Qalat', 'Balakoot', 'Sawat', 'Peshwar' ];
let punjabArray = [ 'Select City', 'Lahore', 'Fasialabad', 'Qasoor', 'SheikhuPura', 'Gujrat' ];
let balochArray = [ 'Select City', 'Quetta', 'Chaman', 'Khuzdar', 'Turbat', 'Gawdar' ];
// if value is punjab or any select cities according to that state
if (valueState == 'Punjab') {
// removing all previous present options
removeOptions(document.getElementById('cityDropDown'));
let cityD = document.querySelector('#cityDropDown');
let index = 0;
for (let ele of punjabArray) {
var opt = document.createElement('option');
opt.value = index;
opt.innerHTML = ele; // whatever property it has
document.getElementById('cityDropDown').value = cityD.appendChild(opt);
index++;
}
}
if (valueState == 'Sindh') {
removeOptions(document.getElementById('cityDropDown'));
let cityD = document.querySelector('#cityDropDown');
let index = 0;
for (let ele of sindhArray) {
var opt = document.createElement('option');
opt.value = index;
opt.innerHTML = ele; // whatever property it has
document.getElementById('cityDropDown').value = cityD.appendChild(opt);
index++;
}
}
if (valueState == 'Balochistan') {
removeOptions(document.getElementById('cityDropDown'));
let cityD = document.querySelector('#cityDropDown');
let index = 0;
for (let ele of balochArray) {
var opt = document.createElement('option');
opt.value = index;
opt.innerHTML = ele; // whatever property it has
document.getElementById('cityDropDown').value = cityD.appendChild(opt);
index++;
}
}
if (valueState == 'khyber Pakhtunkhwa') {
removeOptions(document.getElementById('cityDropDown'));
let cityD = document.getElementById('cityDropDown');
let index = 0;
for (let ele of KhyberArray) {
var opt = document.createElement('option');
opt.value = index;
opt.innerHTML = ele; // whatever property it has
document.getElementById('cityDropDown').value = cityD.appendChild(opt);
index++;
}
}
}
for city form validation onchange event is
function cityDown() {
const cityObj = document.getElementById('cityDropDown');
const cityText = cityObj.options[cityObj.selectedIndex].text;
const valueOfCity = cityObj.options[cityObj.selectedIndex].value;
let citiesArray = [
'Quetta',
'Chaman',
'Khuzdar',
'Turbat',
'Gawdar',
'Lahore',
'Fasialabad',
'Qasoor',
'SheikhuPura',
'Gujrat',
'gilgit',
'Qalat',
'Balakoot',
'Sawat',
'Peshwar',
'Karachi',
'Hyderabad',
'Mirpur khas',
'Sukkhar',
'Shikarpur'
];
if ( valueOfCity == 0) {
document.getElementById('cityErr').innerText = 'City is required';
document.getElementById('cityDropDown').focus();
return valueOfCity;
}
if (citiesArray.indexOf(cityText) < 0) {
document.getElementById('cityErr').innerText = 'Select City';
document.getElementById('cityDropDown').focus();
return valueOfCity;
} else {
document.getElementById('cityErr').innerText = '';
return valueOfCity;
};
}
main function is
// validation f0rm function
function validateForm() {
// creating variable then sanitize them
isTrueorFalse = false;
document.getElementById('Address').disabled = isTrueorFalse;
document.getElementById('stateDropDown').disabled = isTrueorFalse;
document.getElementById('stateDropDown').style.background = '#FFF';
document.getElementById('cityDropDown').disabled = isTrueorFalse;
document.getElementById('cityDropDown').style.background = '#FFF';
const stateVal = stateDrag();
const cityV = cityDown();
const userAddress = form.Address.value;
//States must not be unselected
if (stateVal == 0 || stateVal == '') {
document.getElementById('stateErr').innerText = 'State is required.';
document.getElementById('stateDropDown').focus();
return false;
}
if (stateVal < 0) {
document.getElementById('stateErr').innerText = 'State is required.';
document.getElementById('stateDropDown').focus();
return false;
}
document.getElementById('addressErr').innerText = '';
document.getElementById('cityDropDown').focus();
console.log(cityV);
if (cityV == 0 || cityV == '') {
document.getElementById('cityErr').innerText = 'State is required.';
document.getElementById('cityDropDown').focus();
return false;
}
document.getElementById('cityErr').innerText = '';
document.getElementById('signupForm').submit();
}
here that demo
https://jsbin.com/jeguwakolo/1/edit?html,css,js,console,output
onsubmit was calling that function again and was resetting the city dropdown.
To solve this i just removed that function from stateDrag() and
in html i did this
<select oninput ="return stateDrag()" onchange="return cityFunction()">
after this i didnt get same problem and scripting was working fine thank you for everyone
THIS CODE IS NOT WORKING, PLEASE HELP !!!
ArrayIndexOutOfBoundException is thrown by compiler, Please HELP !!!
for(var i=1;i<='<%=count%>';+++)
{
var x = document.getElementById("person");
var opt = document.createElement("option");
opt.text = '<%=list[i]%>'; <------------------ ERROR IS AT THIS LINE
opt.value = '<%=list[i]%>';
x.add(opt);
}
}
I guess this is what u mean. What is count?
var x = document.getElementById("person");
for(var i = 0; i < '<%=count%>';i++) {
var opt = document.createElement("option");
opt.text = '<%=list[i]%>';
opt.value = '<%=list[i]%>';
x.add(opt);
}
I'm building a custom layout for a SharePoint list via JS Link...
At the moment I'm rendering all by myself, but for some more complex items (Taxonomy, URLs, etc.) it would be great to be able to trigger the custom rendering of SharePoint.
Is this possible somehow for single field types?
var csListView = csListView || {};
csListView.ListBody = '<div class="datagrid"><table><thead>{LIST_HEADER}</thead>{LIST_BODY}<tfoot><tr><td colspan="{FIELD_COUNT}"><div class="paging">{PAGINATION}</div></td></tr></tfoot></table></div>';
csListView.HeaderRow = '<tr>{HEADER_ITEMS}</tr>';
csListView.HeaderItem = '<th>{HEADER_ITEM}</th>';
csListView.BodyRow = '<tr class="{ALT_CLASS}">{LIST_ITEMS}</tr>';
csListView.BodyItem = '<td>{LIST_ITEM}</td>';
csListView.CustomizeFieldRendering = function ()
{
var fieldJsLinkOverride = {};
fieldJsLinkOverride.Templates = {};
fieldJsLinkOverride.Templates.Body = csListView.RenderBody;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);
};
csListView.RenderBody = function (ctx) {
var colspan = ctx.ListSchema.Field.length;
var html = '';
var itemHtml = '';
var itemsHtml = '';
var rowHtml = '';
var bodyHtml = '';
var paginationHtml = '';
var headerItemsHtml = '';
var headerHtml = '';
//Render Header fields
for (var i = 0; i < ctx.ListSchema.Field.length; i++) {
var sortUrl = location.search + '?SortField=' + ctx.ListSchema.Field[i].RealFieldName + '&SortDir=Desc';//ctx.HttpRoot + ctx.listUrlDir + '/&' + ctx.ListSchema.FieldSortParam
var item = '' + ctx.ListSchema.Field[i].DisplayName + '';
headerItemsHtml += csListView.HeaderItem.replace('{HEADER_ITEM}', ctx.ListSchema.Field[i].DisplayName);
}
headerHtml = csListView.HeaderRow.replace('{HEADER_ITEMS}', headerItemsHtml);
//Go through all rows
for (var i = 0; i < ctx.ListData.Row.length; i++) {
var cssClass = (i % 2 == 0) ? 'alt' : '';
//Go through all fields
itemsHtml = '';
for (var j = 0; j < ctx.ListSchema.Field.length; j++) {
var item = csListView.renderField(ctx, ctx.ListSchema.Field[j], ctx.ListData.Row[i]);
itemHtml = csListView.BodyItem.replace('{LIST_ITEM}',item);
itemsHtml += itemHtml;
}
rowHtml = csListView.BodyRow.replace('{LIST_ITEMS}',itemsHtml);
rowHtml = rowHtml.replace('{ALT_CLASS}', cssClass);
bodyHtml += rowHtml;
}
html = csListView.ListBody.replace('{LIST_BODY}', bodyHtml);
html = html.replace('{PAGINATION}', renderPaging(ctx));
html = html.replace('{FIELD_COUNT}', colspan);
html = html.replace('{LIST_HEADER}', headerHtml);
return html;
};
csListView.renderField = function (ctx, fieldData, rowData) {
return rowData[fieldData.RealFieldName];
}
To change a the view of a field you could use this
var ctx = {};
ctx.Templates = {};
ctx.Templates.Fields = {'ColumnName': { 'View' : '<b><#=ctx.CurrentItem.ColumnName#></b>' }};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
Does that answer your question?
I'm new to Javascript (but fairly proficient in php) and I'm trying to use a set of associative arrays to perform two tasks.
First: Populate a dropdown menu (this part is working)
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length-1); i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
The 'fNames' variable is an array with a list of strings which I've taken from a php array. I have another array, called 'fDesc' which is indexed to match the 'fNames' array. Something like this:
var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc,", "cDesc"]
They're currently separate arrays, not a single multidimensional one.
How can I make "aDesc" appear in a text box when "aName" is selected from the pulldown menu?
First of all, the for element is population less elements, you should remove the -1 of (options.length-1)
Then you need to asociate a handler event for select.onchange and use index of to retrieve the index of the array.
HTML:
<select id='FName'></select>
<input id='AName' type='text'/>
JS:
var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc,", "cDesc"];
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length); i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
select.onchange = function(){
var textbox = document.getElementById('AName');
textbox.value = fDesc[fNames.indexOf(select.value)];
}
JsFiddle:
http://jsfiddle.net/dBtUz/
better put aName as text and aDesc as value.
HTML
<select id='FName' onchange='fillText()'></select>
<input id='Fdesc' type='text'/>
Javascript
window.onload = function(){
var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc", "cDesc"]
var select = document.getElementById('FName');
for(var i = 0; i < (fNames.length); i++) {
var el = document.createElement("option");
el.textContent = fNames[i];
el.value = fDesc[i];
select.appendChild(el);
}
select.selectedIndex = -1;
}
function fillText(){
document.getElementById('Fdesc').value = document.getElementById('FName').value;
}
You need to search the index of the selected value and then you get with that index the same position in your search array.
Updated Solution also with manual fill:
<script>
document.addEventListener('DOMContentLoaded', onDomContentLoaded);
// data
var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc", "cDesc"];
function onDomContentLoaded() {
var mySelect = document.getElementById("mySelect");
fillSelect(mySelect);
mySelect.addEventListener('change', onSelectChange);
}
function fillSelect(mySelect) {
for(var i = 0; i < (fNames.length); i++) {
var opt = fNames[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
mySelect.appendChild(el);
}
}
function onSelectChange(){
var selectedValue = this.options[this.selectedIndex].value;
//console.log('selected value', selectedValue);
var selectedValueIndexInArray = fNames.indexOf(selectedValue);
var fieldOutput = document.getElementById("output");
fieldOutput.innerHTML = fDesc[selectedValueIndexInArray];
}
</script>
<select id="mySelect"></select>
<div id="output"></div>
Working Example
http://jsfiddle.net/x92ka/4/
var oTable;
$(document).ready(function() {
loadSubMenus();
});
function loadSubMenus() {
var resultStringX = $.ajax({
type : "POST",
url : "getSubMenuList",
dataType : 'text',
async : false
}).responseText;
resultStringX = $.trim(resultStringX);
var o = JSON.parse(resultStringX);
var idArray = new Array();
var nameArray = new Array();
idArray = o.result.subMenuId;
nameArray = o.result.subMenuName;
var tableObj = $("#tableId").val();
var colCount = 0;
var trObj = document.createElement("tr");
for (var i = 0; i < idArray.length; i++) {
var tdObj = document.createElement("td");
var inputElem = document.createElement("input");
inputElem.type = "checkbox";
inputElem.setAttribute("id", "id_"+i);
inputElem.setAttribute("value", idArray[i]);
inputElem.style.marginTop = "-1px";
var spanObj = document.createElement("span");
spanObj.innerHTML = nameArray[i];
tdObj.appendChild(inputElem);
tdObj.appendChild(spanObj);
trObj.appendChild(tdObj);
colCount++;
if (colCount == 5) {
tableObj.appendChild(trObj);
trObj = "";
trObj = document.createElement("tr");
colCount = 0;
}
if (idArray.length < 5) {
if ((idArray.length - 1) == i) {
tableObj.appendChild(trObj);
}
}
}
if(idArray.length/5>0){
tableObj.appendChild(trObj);
}
document.getElementById("subMenuCount").value=idArray.length;
}
am not getting output..
i want to load menu n sub-menu from the database
what is error am nt able to get pls help me
how to solve this.
what i have to do..
what is the error
in another jsp page i created "tableid" so there i defined td
tableObj is not a DOM element. It is the value of $("#tableId").val(). Probably you need to create it also as a DOM element:
var tableObj = document.createElement("table");
...