i cant edit my body background or anything about my body from my css file. does anyone know why this might be. I know the CSS file is linked properly as it edits the table. its only the body that wont edit. please can someone tell me why this is happening.
ive had to remove some of the html code as it was aparetly too long however this is unrelated to the issue
<style>
body {
background-color: lightblue;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 5px;
}
</style>
<!DOCTYPE html>
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css.css">
</link>
<body>
<div1>
<header>
<h1 id="header">Noah's Address book</h1>
</header>
<div id="tableside">
<div id="searchside">
<label for="searching">Search for address</label><br>
<input type="text" id="searching" name="searching" required><br>
</div>
<div id="table">
<table id="table1">
</table>
</div>
</div>
</div1>
<script>
$("#adContact").on("submit", function(event) {
event.preventDefault();
var $fname = $("#fname");
var fname = $fname.val();
var $lname = $("#lname");
var lname = $lname.val();
var $numb = $("#numb");
var numb = $numb.val();
var $adr = $("#adr");
var adr = $adr.val();
if (nameTest(fname, lname) === false) {
$("#error").text("First and Last name must only contain letters");
} else if (numTest(numb) === false) {
$("#error").text("Number can only contain numbers and must be in 00000000000 format");
} else if (firstLength(fname) === false) {
$("#error").text("First name input too long");
} else if (lastLength(lname) === false) {
$("#error").text("Last name input too long");
} else if (addressLength(adr) === false) {
$("#error").text("Address input too long, please keep input below 100 characters ");
} else if (alreadyActive(fname, lname, numb) === false) {
$("#error").text("contact already exists");
} else {
$("#error").text("contact added");
newContact(fname, lname, numb, adr);
}
reload()
})
$("#removeContact").on("submit", function(event) {
event.preventDefault();
var $numb1 = $("#numb1");
var numb1 = $numb1.val();
var $fname1 = $("#fname1");
var fname1 = $fname1.val();
var $lname1 = $("#lname1");
var lname1 = $lname1.val();
if (removeContact(fname1, lname1, numb1) === false) {
$("#error1").text("Contact not found");
} else {
$("#error1").text("Contact removed");
}
reload()
})
var row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
$("#table1").append(row)
var contactListOriginall = addressLogLength()
for (let i = 0; i < contactListOriginall.length; i++) {
let contactName = contactListOriginall[i]
var firstname = getData(contactName)[0];
var lastname = getData(contactName)[1]
var number = getData(contactName)[2]
var address = getData(contactName)[3]
let row = "<tr id=contactName><th>" + firstname + "</th><th>" + lastname + "</th><th>" + number + "</th><th>" + address + "</th></tr>"
$("#table1").append(row)
}
function reload() {
$("#table1 tr").remove()
let row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
$("#table1").append(row)
var $search = $("#searching");
var search = $search.val();
let contactList = match(search)
for (let c = 0; c < contactList.length; c++) {
let contactName = contactList[c]
var firstname = getData(contactName)[0];
var lastname = getData(contactName)[1]
var number = getData(contactName)[2]
var address = getData(contactName)[3]
let row = "<tr id=contactName><th>" + firstname + "</th><th>" + lastname + "</th><th>" + number + "</th><th>" + address + "</th></tr>"
$("#table1").append(row)
}
}
$("#searching").on("input", function() {
reload()
});
</script>
</body>
You don't need "style" tags because these tags only used in .html file to make .html understand that these are css codes.
Also, you may need to add "head" tags at the bottom and above like that:
<head>
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css.css">
</link>
</head>
If it still doesn't work add html tags like that:
<!DOCTYPE html>
<html>
<head>
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css.css">
</link>
</head>
<body>
<div1>
<header>
<h1 id="header">Noah's Address book</h1>
</header>
<div id="tableside">
<div id="searchside">
<label for="searching">Search for address</label><br>
<input type="text" id="searching" name="searching" required><br>
</div>
<div id="table">
<table id="table1">
</table>
</div>
</div>
</div1>
<script>
$("#adContact").on("submit", function(event) {
event.preventDefault();
var $fname = $("#fname");
var fname = $fname.val();
var $lname = $("#lname");
var lname = $lname.val();
var $numb = $("#numb");
var numb = $numb.val();
var $adr = $("#adr");
var adr = $adr.val();
if (nameTest(fname, lname) === false) {
$("#error").text("First and Last name must only contain letters");
} else if (numTest(numb) === false) {
$("#error").text("Number can only contain numbers and must be in 00000000000 format");
} else if (firstLength(fname) === false) {
$("#error").text("First name input too long");
} else if (lastLength(lname) === false) {
$("#error").text("Last name input too long");
} else if (addressLength(adr) === false) {
$("#error").text("Address input too long, please keep input below 100 characters ");
} else if (alreadyActive(fname, lname, numb) === false) {
$("#error").text("contact already exists");
} else {
$("#error").text("contact added");
newContact(fname, lname, numb, adr);
}
reload()
})
$("#removeContact").on("submit", function(event) {
event.preventDefault();
var $numb1 = $("#numb1");
var numb1 = $numb1.val();
var $fname1 = $("#fname1");
var fname1 = $fname1.val();
var $lname1 = $("#lname1");
var lname1 = $lname1.val();
if (removeContact(fname1, lname1, numb1) === false) {
$("#error1").text("Contact not found");
} else {
$("#error1").text("Contact removed");
}
reload()
})
var row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
$("#table1").append(row)
var contactListOriginall = addressLogLength()
for (let i = 0; i < contactListOriginall.length; i++) {
let contactName = contactListOriginall[i]
var firstname = getData(contactName)[0];
var lastname = getData(contactName)[1]
var number = getData(contactName)[2]
var address = getData(contactName)[3]
let row = "<tr id=contactName><th>" + firstname + "</th><th>" + lastname + "</th><th>" + number + "</th><th>" + address + "</th></tr>"
$("#table1").append(row)
}
function reload() {
$("#table1 tr").remove()
let row = "<tr><th>First name</th><th>Last name</th><th>Number</th><th>Address</th></tr>"
$("#table1").append(row)
var $search = $("#searching");
var search = $search.val();
let contactList = match(search)
for (let c = 0; c < contactList.length; c++) {
let contactName = contactList[c]
var firstname = getData(contactName)[0];
var lastname = getData(contactName)[1]
var number = getData(contactName)[2]
var address = getData(contactName)[3]
let row = "<tr id=contactName><th>" + firstname + "</th><th>" + lastname + "</th><th>" + number + "</th><th>" + address + "</th></tr>"
$("#table1").append(row)
}
}
$("#searching").on("input", function() {
reload()
});
</script>
</body>
</html>
Remove the surrounding <style> tags as they aren't needed because you are already in a styles file.
Inside css.css:
body {
background-color: lightblue;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
}
Related
I have inherited a Google sheet script that generates a Live updatable JSON link from sheets chosen from an HTML form in a sidebar
At the start of a project, the only data that might be present is the Headers on both the Element and Connection sheets (and they are always present) and as the project matures rows of data are added to one or both sheets
My issue is that the script to generate the json requires that at least two rows of data exist (on both sheets) the Header row and a data row
When you run the script you get a pop up with a link then you click that link and a new browser tab opens with the JSON data. It is at this step I get the error
Line 161 in the gs modual is properties.setProperty("settings", newProperties); from
function setExportProperties(newProperties){
var properties = PropertiesService.getDocumentProperties();
var prop = properties.getProperty("settings");
properties.setProperty("settings", newProperties);
}
But this is set on line 292 from the HTML module
function setProperties(){
return google.script.run.setExportProperties(generateProperties());
}
I have tried for hours to figure out how to modify the script so only the header row is necessary but I have not achieved this
There is a lot of code here and it seems to me too much to post it but it is well documented in the code and I think someone who knows what they are doing can figure out pretty easily what needs to be done
From the added menu click Open Sidebar to get to the form. I have set it up in advance
Thank you in advance for your help with this
gs code
//===================================================================================================================
//ExportJson Code
//===================================================================================================================
//Displays an HTML-service dialog in Google Sheets that contains client-side JavaScript code for the Google Picker API.
function showForm() {
var html = HtmlService.createHtmlOutputFromFile('Sidebar.html')
.setTitle('Export Sheet As JSON Data')
.setWidth(300)
.setHeight(480)
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi().showSidebar(html);
}
//function showData(elements,connections,headerrow,datarow,prefix,separator){
function showData(sheets,settings){
//Sheets Array
var elements=sheets[0];
var connections=sheets[1];
//Settings Array
var emptycells=settings[0];
var headerrow=settings[1];
var datarow=settings[2];
var prefix=settings[3];
var separator=settings[4];
var keepignore=settings[5];
var cellarrays=settings[6];
var separator2=settings[7];
var columnignore=settings[8];
var colprefix=settings[9];
var sheetid=SpreadsheetApp.getActiveSpreadsheet().getId();
if(elements=='' && connections==''){
Browser.msgBox('Select any one or both sheets and run again!');
return;
}
if(headerrow=='' || headerrow<=0){
Browser.msgBox('Please enter row number of your data header, it should be an integer value greater than 0');
return;
}
if(datarow=='' || datarow<=0){
Browser.msgBox('Please enter row number where data starts, it should be an integer value greater than 0');
return;
}
if(keepignore==true){
if(prefix=='' && separator!=''){
Browser.msgBox('Please Column Prefix And Array Separator');
return;
}
}
if(columnignore==true){
if(colprefix=='' || colprefix==false){
Browser.msgBox('Please Enter Column Prefix');
return;
}
}
if(cellarrays==true){
if(separator2=='' || separator2==false){
Browser.msgBox('Please Enter Array Separator');
return;
}
}
if(elements=='' && connections==''){
Browser.msgBox('Select sheet(s)!');
return;
}
var webappurl='https://script.google.com/macros/s/AKfycbwn.../exec';
webappurl=webappurl + '?id=' + sheetid;
if(elements!='')
webappurl=webappurl + '&sheet1=' + elements;
else
webappurl=webappurl + '&sheet1=' + '';
if(connections!='')
webappurl=webappurl + '&sheet2=' + connections;
else
webappurl=webappurl + '&sheet2=' + '';
webappurl=webappurl + '&header=' + headerrow;
webappurl=webappurl + '&startrow=' + datarow;
if(keepignore==true){
if(prefix=='' || separator==''){
webappurl=webappurl + '&prefix=' + 'false';
webappurl=webappurl + '&separator=' + 'false';
}
else{
webappurl=webappurl + '&prefix=' + prefix;
webappurl=webappurl + '&separator=' + separator;
}
}
else{
webappurl=webappurl + '&prefix=' + 'false';
webappurl=webappurl + '&separator=' + 'false';
}
if(emptycells==true)
webappurl=webappurl + '&emptycells=' + 'yes';
else
webappurl=webappurl + '&emptycells=' + 'no';
if(cellarrays==true){
webappurl=webappurl + '&cellarrays=' + 'yes';
webappurl=webappurl + '&separator2=' + separator2;
}
else{
webappurl=webappurl + '&cellarrays=' + 'no';
webappurl=webappurl + '&separator2=' + 'no';
}
if(columnignore==true){
webappurl=webappurl + '&columnignore=' + 'yes';
webappurl=webappurl + '&colprefix=' + colprefix;
}
else{
webappurl=webappurl + '&columnignore=' + 'no';
webappurl=webappurl + '&colprefix=' + 'no';
}
//Workflows.setCurrentMapSource("");
var kumuurl='Workflows.setCurrentMapSource("'+ webappurl +'")';
openUrl(webappurl,kumuurl);
}
//===================================================================================================================
function openUrl( url,kumuurl ){
var html = HtmlService.createHtmlOutput('<html>'
//+'<script>'
//+'window.close = function(){window.setTimeout(function(){google.script.host.close()},9)};'
//+'var a = document.createElement("a"); a.href="'+url+'"; a.target="_blank";'
//+'if(document.createEvent){'
//+' var event=document.createEvent("MouseEvents");'
//+' if(navigator.userAgent.toLowerCase().indexOf("firefox")>-1){window.document.body.append(a)}'
//+' event.initEvent("click",true,true); a.dispatchEvent(event);'
//+'}else{ a.click() }'
//+'close();'
//+'</script>'
// Offer URL as clickable link in case above code fails.
+'<body style="word-break:break-word;font-family:sans-serif;">' + kumuurl + '</body>'
+'<script>google.script.host.setHeight(150);google.script.host.setWidth(600)</script>'
+'</html>')
.setWidth(600).setHeight(1);
SpreadsheetApp.getUi().showModalDialog( html, "Click the Link below to get the LIVE Link" );
}
//===================================================================================================================
function setExportProperties(newProperties){
var properties = PropertiesService.getDocumentProperties();
var prop = properties.getProperty("settings");
properties.setProperty("settings", newProperties);
}
//===================================================================================================================
function getExportProperties(){
var props = PropertiesService.getDocumentProperties();
var prop = props.getProperty("settings");
//Logger.log(prop);
return prop;
}
//===================================================================================================================
function getSheetList(){
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sheets=ss.getSheets();
var sheetnames=[];
sheetnames[0]="|"
for(var i=0;i<sheets.length;i++){
var sh=sheets[i];
sheetnames[i+1]=sh.getName()+"|"+sh.getName();
}
return sheetnames;
}
//===================================================================================================================
//LiveJson Code
//===================================================================================================================
function doGet(request) {
// Get request params.
var sheetKey = request.parameters.id;
var sheetName1 = request.parameters.sheet1;
var sheetName2 = request.parameters.sheet2;
var callback = request.parameters.callback;
var headerRow = request.parameters.header;
var startRow = request.parameters.startrow;
var prefix = request.parameters.prefix;
var separator = request.parameters.separator;
var emptycells = request.parameters.emptycells;
var cellarrays = request.parameters.cellarrays;
var separator2 = request.parameters.separator2;
var columnignore = request.parameters.columnignore;
var colprefix = request.parameters.colprefix;
// Parse the spreadsheet.
var spreadsheet = SpreadsheetApp.openById(sheetKey); //.getActiveSpreadsheet();
if(sheetName1!=''){
var keys = getHeaderRowKeys_(spreadsheet, sheetName1, headerRow, columnignore, colprefix);
var data1 = readData_(spreadsheet, sheetName1, headerRow, keys, startRow,prefix,separator,emptycells,cellarrays,separator2,columnignore, colprefix);
}
if(sheetName2!=''){
var keys = getHeaderRowKeys_(spreadsheet, sheetName2, headerRow, columnignore, colprefix);
var data2 = readData_(spreadsheet, sheetName2,headerRow, keys, startRow,prefix,separator,emptycells,cellarrays,separator2,columnignore, colprefix);
}
// Write and return the response.
if(sheetName1!='' && sheetName2!=''){
var response = JSON.stringify({ elements: data1,connections: data2 },null,'\t');
}
else if(sheetName1!='' && sheetName2==''){
var response = JSON.stringify({ elements: data1 },null,'\t');
}
else if(sheetName1=='' && sheetName2!=''){
var response = JSON.stringify({ connections: data2 },null,'\t');
}
var output = ContentService.createTextOutput();
if(callback == undefined){
// Serve as JSON
output.setContent(response).setMimeType(ContentService.MimeType.JSON);
}
else{
// Serve as JSONP
output.setContent(callback + "(" + response + ")").setMimeType(ContentService.MimeType.JAVASCRIPT);
}
//output.setContent(callback + "(" + response + ")").setMimeType(ContentService.MimeType.JAVASCRIPT);
return output;
}
//===================================================================================================================
function readData_(spreadsheet, sheetName, headerRow, properties, startRowNum, prefix,separator,emptycells,cellarrays,separator2,columnignore, colprefix) {
if (typeof properties == "undefined") {
properties = getHeaderRowKeys_(spreadsheet, sheetName, headerRow, columnignore, colprefix);
}
var rows = getDataRows_(spreadsheet, sheetName,headerRow, startRowNum,columnignore, colprefix);
var data = [];
if(emptycells=='yes'){//Ignore Empty Cells
for (var i = 0; i<rows.length; i++) {
var row = rows[i];
var record = {};
for (var p in properties) {
if(row[p]!=''){
var keys=properties
record=updateRecord(prefix,keys,p,row,record,prefix,separator,cellarrays,separator2)
//properties[p]=properties[p].replace(prefix,"")
}
}
data.push(record);
}
}
else{//Inclue Empty Cells
for (var i = 0; i<rows.length; i++) {
var row = rows[i];
var record = {};
for (var p in properties) {
var keys=properties
record=updateRecord(prefix,keys,p,row,record,prefix,separator,cellarrays,separator2)
}
data.push(record);
}
}
return data;
}
//===================================================================================================================
function updateRecord(prefix,properties,p,row,record,prefix,separator,cellarrays,separator2){
if(prefix=='false'){
if(cellarrays=='yes'){//Split Cell Values as arrays if contains comma
if(row[p].toString().indexOf(separator2)>=0){//Convert Cell As Array Only If Contains Comma
record[properties[p]]=row[p].toString().split(separator2);
}
else{
record[properties[p]]=row[p];
}
}
else{
record[properties[p]]=row[p];
}
}
else{//Split Entire Column as array if start with a prefix
var key=properties[p];
if(key.indexOf(prefix)==0){
key=key.replace(prefix,"")
if(row[p].toString().indexOf(separator)>=0)
record[key]=row[p].toString().split(separator);
else if(row[p].toString().indexOf(separator2)>=0)
if(cellarrays='yes')
record[key]=row[p].toString().split(separator2);
else
record[key]=row[p];
else
record[key]=row[p];
}
else{
if(cellarrays=='yes'){//Split Cell Values as arrays if contains separator2
if(row[p].toString().indexOf(separator2)>=0){//Convert Cell As Array Only If Contains separator2
record[key]=row[p].toString().split(separator2);
}
else{
record[key]=row[p];
}
}
else{
record[key]=row[p];
}
}
}
return record;
}
//===================================================================================================================
function getDataRows_(spreadsheet, sheetName, headerRow, startRowNum, columnignore, colprefix) {
var properties = getHeaderRow_2(spreadsheet, sheetName, headerRow, columnignore, colprefix);
if (typeof startRowNum == "undefined") startRowNum = 2;
var sheet = spreadsheet.getSheetByName(sheetName);
var values=sheet.getRange(startRowNum, 1, sheet.getLastRow()-1, sheet.getLastColumn()).getValues();
if(columnignore=='yes'){
var data=[];
for(var i=0;i<values.length;i++){
data[i]=[];
var k=0;
for(var j=0;j<properties.length;j++){
if(properties[j].toString().indexOf(colprefix)!=0){
data[i][k]=values[i][j];
k++;
}
}
}
return data;
}
else
return values;
}
//======================================================================================================================================================================================
function getHeaderRowKeys_(spreadsheet, sheetName, rowNum, columnignore, colprefix) {
if (typeof rowNum == "undefined") rowNum = 1;
var header=getHeaderRow_(spreadsheet, sheetName, rowNum, columnignore, colprefix);
return header;
}
//===================================================================================================================
function getHeaderRow_(spreadsheet, sheetName, rowNum, columnignore, colprefix) {
var sheet = spreadsheet.getSheetByName(sheetName);
var values=sheet.getRange(rowNum, 1, 1, sheet.getLastColumn()).getValues();
if(columnignore=='yes'){
var data=[];
for(var i=0;i<values.length;i++){
data[i]=[];
var k=0;
for(var j=0;j<values[0].length;j++){
if(values[i][j].toString().indexOf(colprefix)!=0){
data[i][k]=values[i][j];
k++;
}
}
}
return data[0];
}
else
return values[0];
}
//===================================================================================================================
function getHeaderRow_2(spreadsheet, sheetName, rowNum, columnignore, colprefix) {
var sheet = spreadsheet.getSheetByName(sheetName);
var values=sheet.getRange(rowNum, 1, 1, sheet.getLastColumn()).getValues();
return values[0];
}
HTML code (some CSS remove so as not to exceed char limit)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<base target="_top">
</head>
<body>
<body onload="populate()"></body>
<div class="main">
<h2 align="center" style="font-family:Open+Sans;"> Select Sheets</h2>
<div class="section">
<div class="block form-group">
<br>
<center> <label for="elmn">Select Elements Sheet</label>
<select id="elmn" name="elmn" style="width: 180px;" ></select>
<br>
<label for="conn">Select Connections Sheet</label>
<select id="conn" name="conn" style="width: 180px;" ></select></center>
</div>
</div>
<h2 align="center" style="font-family:Open+Sans;">General Data</h2>
<div class="section">
<div id="new-div">
<center>Header Row:<br>
<input type="text" name="Header Row" value="1" id="headerrow">
<br><br>
Start Data Row:<br>
<input type="text" name="Data Row" value="2" id="datarow"> </center>
</div>
</div>
<h2 align="center" style="font-family:Open+Sans;">JSON Settings</h2>
<div class="buttonDiv" >
<!--<div class="newButtonDiv"></div>-->
<button class="action" value="Run" onclick="get_form_values()">View</button>
<input type="reset" value="Reset" onclick="enableTextBox()">
</div>
</div>
<script>
var elements = "";
var connections = "";
var emptycells = "";
var headerrow = "";
var datarow = "";
var prefix = "";
var separator = "";
var keepignore = "";
var cellarrays = "";
var separator2 = "";
var columnignore="";
var colprefix="";
var elementsIndex = "";
var elementsValue = "";
var connectionsIndex = "";
var connectionsValue = "";
function populate(){
var elementlist=document.getElementById('elmn');
var connectlist=document.getElementById('conn');
//document.getElementById("elmn").innerHTML = "";
//document.getElementById("conn").innerHTML = "";
function onSuccess(optionarray) {
for(var option in optionarray){
var pair=optionarray[option].split("|")
var newoption=document.createElement("Option");
newoption.value=pair[0];
newoption.innerHTML=pair[1];
elementlist.options.add(newoption);
var newoption=document.createElement("Option");
newoption.value=pair[0];
newoption.innerHTML=pair[1];
connectlist.options.add(newoption);
}
elementlist.selectedIndex=elementsIndex;
connectlist.selectedIndex=connectionsIndex;
}
//console.log(document.getElementById('elmn').options);
google.script.run.withSuccessHandler(onSuccess).getSheetList();
enableTextBox();
}
function get_form_values(){
//...
var e = document.getElementById('elmn');
elementsValue = e.options[e.selectedIndex].value;
elements = e.options[e.selectedIndex].text;
elementsIndex = e.options[e.selectedIndex].index;
//...
//...
var c = document.getElementById('conn');
connectionsValue = c.options[c.selectedIndex].value;
connections = c.options[c.selectedIndex].text;
connectionsIndex = c.options[c.selectedIndex].index;
//...
emptycells=document.getElementById('emptycells').checked;
headerrow=document.getElementById('headerrow').value;
datarow=document.getElementById('datarow').value;
prefix=document.getElementById('prefix').value;
separator=document.getElementById('separator').value;
keepignore=document.getElementById('keepignore').checked;
cellarrays=document.getElementById('cellarrays').checked;
separator2=document.getElementById('separator2').value;
columnignore=document.getElementById('columnignore').checked;
colprefix=document.getElementById('colprefix').value;
var sheets=[];
sheets[0]=elements;
sheets[1]=connections;
var settings=[];
settings[0]=emptycells;
settings[1]=headerrow;
settings[2]=datarow;
settings[3]=prefix;
settings[4]=separator;
settings[5]=keepignore;
settings[6]=cellarrays;
settings[7]=separator2;
settings[8]=columnignore;
settings[9]=colprefix;
setProperties();
google.script.run.showData(sheets,settings);
}
function setProperties(){
return google.script.run.setExportProperties(generateProperties());
}
function generateProperties(){
var properties = {
//General settings
"emptycells" : emptycells,
"headerrow" : headerrow,
"datarow" : datarow,
"prefix" : prefix,
"separator" : separator,
"keepignore" : keepignore,
"cellarrays" : cellarrays,
"columnignore" : columnignore,
"colprefix" : colprefix,
"separator2" : separator2,
"elements" : elements,
"connections" : connections,
"elementsIndex" : elementsIndex,
"elementsValue": elementsValue,
"connectionsIndex" : connectionsIndex,
"connectionsValue": connectionsValue,
};
return JSON.stringify(properties);
}
//Actually sets the local properties based on stored settings.
function updateProperties(properties){
var settings;
if(properties == null || properties === ""){
settings = {};
}
else{
settings = JSON.parse(properties);
}
//General
//connections = settings["connections"] != null ? settings["connections"] : connections;
elements = settings["elements"] != null ? (settings["elements"] === "" ? elements : settings["elements"]) : elements
elementsIndex = settings["elementsIndex"] != null ? settings["elementsIndex"] : elementsIndex;
elementsValue = settings["elementsValue"] != null ? settings["elementsValue"] : elementsValue;
connections = settings["connections"] != null ? (settings["connections"] === "" ? connections : settings["connections"]) : connections
connectionsIndex = settings["connectionsIndex"] != null ? settings["connectionsIndex"] : connectionsIndex;
connectionsValue = settings["connectionsValue"] != null ? settings["connectionsValue"] : connectionsValue;
emptycells = settings["emptycells"] != null ? settings["emptycells"] : emptycells;
headerrow = settings["headerrow"] != null ? settings["headerrow"] : headerrow;
datarow = settings["datarow"] != null ? settings["datarow"] : datarow;
prefix = settings["prefix"] != null ? settings["prefix"] : prefix;
separator = settings["separator"] != null ? settings["separator"] : separator;
keepignore = settings["keepignore"] != null ? settings["keepignore"] : keepignore;
cellarrays = settings["cellarrays"] != null ? settings["cellarrays"] : cellarrays;
separator2 = settings["separator2"] != null ? settings["separator2"] : separator2;
columnignore = settings["columnignore"] != null ? settings["columnignore"] : columnignore;
colprefix = settings["colprefix"] != null ? settings["colprefix"] : colprefix;
refreshSideBar();
//populate(elementsValue, connectionsValue);
}
//Function to rebuild the sidebar after loading export parameters
function refreshSideBar(){
document.getElementById('emptycells').checked=emptycells;
if(headerrow=="")
document.getElementById('headerrow').value="1";
else
document.getElementById('headerrow').value=headerrow;
if(datarow=="")
document.getElementById('datarow').value="2";
else
document.getElementById('datarow').value=datarow;
if(prefix=="")
document.getElementById('prefix').value="ja_";
else
document.getElementById('prefix').value=prefix;
if(separator=="")
document.getElementById('separator').value="|";
else
document.getElementById('separator').value=separator;
document.getElementById('keepignore').checked=keepignore;
document.getElementById('cellarrays').checked=cellarrays;
document.getElementById('columnignore').checked=columnignore;
if(colprefix=="")
document.getElementById('colprefix').value="ig_";
else
document.getElementById('colprefix').value=colprefix;
if(separator2=="")
document.getElementById('separator2').value="|";
else
document.getElementById('separator2').value=separator2;
EnableTextbox1('keepignore', 'prefix' ,'separator')
EnableTextbox('columnignore', 'colprefix')
EnableTextbox('cellarrays', 'separator2')
}
function getProperties(onSuccess){
return google.script.run.withSuccessHandler(onSuccess).getExportProperties();
}
//enable disable
function EnableTextbox(CheckboxId,TextboxId1){
if(document.getElementById(CheckboxId).checked){
document.getElementById(TextboxId1).style.backgroundColor = "#fff"
document.getElementById(TextboxId1).disabled=false;
}
else{
document.getElementById(TextboxId1).style.backgroundColor = "#5bb800"
document.getElementById(TextboxId1).disabled=true;
}
}
function EnableTextbox1(CheckboxId,TextboxId1, TextboxId2){
if(document.getElementById(CheckboxId).checked){
document.getElementById(TextboxId1).style.backgroundColor = "#fff";
document.getElementById(TextboxId2).style.backgroundColor = "#fff";
document.getElementById(TextboxId1).disabled=false;
document.getElementById(TextboxId2).disabled=false;
}
else{
document.getElementById(TextboxId1).style.backgroundColor = "#5bb800";
document.getElementById(TextboxId2).style.backgroundColor = "#5bb800";
document.getElementById(TextboxId1).disabled=true;
document.getElementById(TextboxId2).disabled=true;
}
}
function enableTextBox(){
document.getElementById("elmn").selectedIndex = 0;
document.getElementById("conn").selectedIndex = 0;
document.getElementById("headerrow").value = "1";
document.getElementById("datarow").value = "2";
document.getElementById("emptycells").checked = false;
//========================================================
document.getElementById("keepignore").checked = false;
document.getElementById("prefix").value = "ja_";
document.getElementById("separator").value = "|";
document.getElementById("columnignore").checked = false;
document.getElementById("colprefix").value = "ig_";
document.getElementById("cellarrays").checked = false;
document.getElementById("separator2").value = "|";
document.getElementById("prefix").style.backgroundColor = "#5bb800";
document.getElementById("separator").style.backgroundColor = "#5bb800";
document.getElementById("colprefix").style.backgroundColor = "#5bb800";
document.getElementById("separator2").style.backgroundColor = "#5bb800";
document.getElementById("prefix").disabled=true;
document.getElementById("separator").disabled=true;
document.getElementById("colprefix").disabled=true;
document.getElementById("separator2").disabled=true;
}
//end
getProperties(updateProperties);
</script>
</body>
</html>
I believe your goal is as follows.
You want to remove the following error. (The following image is from your question.)
When I saw your script and your sample Spreadsheet, I noticed that your sheet of "Connections" has only the header row. In this case, an error occurs at var values=sheet.getRange(startRowNum, 1, sheet.getLastRow()-1, sheet.getLastColumn()).getValues(); in your script. Because sheet.getLastRow()-1 is 0. So, in your situation, how about the following modification?
From:
var values=sheet.getRange(startRowNum, 1, sheet.getLastRow()-1, sheet.getLastColumn()).getValues();
To:
var rows = sheet.getLastRow() - 1;
var values = rows > 0 ? sheet.getRange(startRowNum, 1, rows, sheet.getLastColumn()).getValues() : [];
By this modification, when "Connections" sheet has only the header, [] is used as values.
I'm using custom html for a rally app to query and return a list of objects with their attachments. Works well for what I'm doing, but although on screen in Rally I can click the name and it's a link to the attachment, when I grab the list and paste it into excel I end up with just the name of the attachment and I really need a link to the attachment.
Can anyone help me with this html so that it returns the actual url in Rally rather than the name with the url behind it? See these imagesenter image description here. The top represents the current results whereas the bottom represents the desired results.
<html>
<head>
<title>Story Table</title>
<meta name="Name" content="Stories with Attachments" />
<meta name="Version" content="2014.2" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js"></script>
<script type="text/javascript">
var table = null;
function tableExample() {
var rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
function itemQuery() {
var queryObject = {
key: 'theItems',
type: iType,
fetch: 'FormattedID,Name,State,ScheduleState,Description,Attachments,ObjectID',
query: Qvalue
};
rallyDataSource.findAll(queryObject, populateTable);
}
function populateTable(results) {
if (table) {
table.destroy();
}
var col3 = 'ScheduleState';
if (iType == 'task') {
col3 = 'State';
}
var tableDiv = document.getElementById('aDiv');
var config = { 'columnKeys' : ['FormattedID', 'Name', col3, 'Attachments'],
'columnHeaders' : ['FormattedID', 'Name', col3, 'Attachments'],
'columnWidths' : ['100px', '400px', '85px', '300px']
};
table = new rally.sdk.ui.Table(config);
table.addRows(results.theItems);
for (i=0;i<results.theItems.length;i++) {
myStory = results.theItems[i];
myStoryURL = rally.sdk.util.Context.getServerInfo().getUrl()+"/#/" + '__PROJECT_OID__' + "/detail/"+ iType + "/"+myStory.ObjectID;
myStoryHTML = "<div><a href='" + myStoryURL + "' target='_top'> " +
myStory.FormattedID + "</a></div>";
myAttachments = results.theItems[i].Attachments;
myAttachmentHTML = "";
for (j=0;j<myAttachments.length;j++) {
myAttachmentOID = myAttachments[j].ObjectID;
myAttachmentName = myAttachments[j].Name;
myAttachmentURL = rally.sdk.util.Context.getServerInfo().getSlmUrl()+"/attachment/"+
myAttachmentOID + "/" + myAttachmentName;
myAttachmentHTML += "<div><a href='" + myAttachmentURL + "'>" +
myAttachmentName + "</a></div>";
}
table.setCell(i, 3, myAttachmentHTML);
table.setCell(i, 0, myStoryHTML);
}
table.display(tableDiv);
};
itemQuery();
}
rally.addOnLoad(tableExample);
</script>
<script type="text/javascript">
var Qvalue = '';
function textBoxChanged(tb, args) {
Qvalue = args.value;
}
function Qbox() {
var config = {
label : 'Query String: ',
value : '',
width: 500,
showLabel: true
};
var textBox = new rally.sdk.ui.basic.TextBox(config);
textBox.display("textbox", textBoxChanged);
}
rally.addOnLoad(Qbox);
</script>
<script type="text/javascript">
var iType = 'hierarchicalrequirement';
function typeSelect() {
function onChanged(c, args) {
iType = args.value;
}
var config = {
radios: [{label:"Stories", value:"hierarchicalrequirement"},{label:"Defects",value:"defect"},{label:"Tasks",value:"task"},{label:"Test Cases",value:"testcase"}],
labelPosition: "after",
rememberChecked: false,
defaultValue: "hierarchicalrequirement",
groupName: "itemTypes"
};
var radioButtonGroup = new rally.sdk.ui.basic.RadioButtonGroup(config);
radioButtonGroup.display("itemGroup", onChanged);
}
rally.addOnLoad(typeSelect);
</script>
</head>
<body>
<p><div id="itemGroup"></div><span id="textbox"></span>
<button onclick="tableExample()">Refresh</button>
Query Help
<br></p>
<div id="aDiv" style="overflow-y: auto;"></div>
</body>
</html>
I'm assuming you still want to be able to click on the attachment links within the app.
So try replacing this line of code:
myAttachmentHTML += "<div><a href='" + myAttachmentURL + "'>" + myAttachmentName + "</a></div>";
With this:
myAttachmentHTML += "<div><a href='" + myAttachmentURL + "'>" + myAttachmentURL + "</a></div>";
I want to add a text (calculator format) to an input field containing following data:
a digit
a sign (x, -, +, /)
a digit
How to add padding between those elements in one input field, so I could have:
[digit][30px gap][sign][10px gap][2nd digit]
Gaps between digits can be customized either.
Adding simple padding to the input doesn't help... ( https://jsfiddle.net/gzuv6Lr4/ shows it)
Any clues?
._inp {
color: red;
padding-left: 10px;
}
<form>
<input type="text" class="_inp" value="10 x 30" />
</form>
Use the CSS word-spacing property on the input field:
https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing
Look this solution:
var signsMap = new Map();
signsMap.set(16, "X");
signsMap.set(88, "x");
signsMap.set(107, "+");
signsMap.set(109, "-");
signsMap.set(111, "/");
var expression = document.getElementById("expression");
var numberSequence = false;
expression.addEventListener("keyup", function(e) {
console.log(!isNaN(e.key));
if (signsMap.get(e.keyCode)) {
findSign(signsMap.get(e.keyCode));
numberSequence = false;
} else if (!isNaN(e.key) && !numberSequence) {
var expValue = expression.value;
var head = expValue.substring(0, expression.selectionStart - 1);
var body = expValue.substring(expression.selectionStart - 1, expression.selectionStart);
var tail = expValue.substring(expression.selectionStart, expValue.length);
expression.value = head + " " + body + tail;
numberSequence = true;
} else {
e.preventDefault();
}
}, false);
function findSign(sign) {
var expValue = expression.value;
if (sign) {
if (expValue.indexOf(sign, expression.selectionStart - 1) > -1) {
var head = expValue.substring(0, expression.selectionStart - 1);
var body = expValue.substring(expression.selectionStart - 1, expression.selectionStart);
var tail = expValue.substring(expression.selectionStart, expValue.length);
expression.value = head + " " + body + tail;
}
} else {
for (const sign of signsMap.values()) {
if (expValue.indexOf(sign) > -1) {
expression.value = expValue.replace(sign, " " + sign);
break;
}
}
}
}
window.onload = findSign(false);
._inp {
color: red;
word-spacing: 10px;
}
<form>
<input type="text" id="expression" class="_inp" value="10 x 30" />
</form>
I'm trying to use Select2 in wbraganca/yii2-dynamicform. The first row is working fine but when I'm clicking on the plus button, the select2 fild keeps on spinning.
Screenshot - . I've tried - https://github.com/wbraganca/yii2-dynamicform/issues/76 and https://github.com/TimNZ/yii2-dynamicform/blob/master/src/assets/yii2-dynamic-form.js it but seems not to be working.
My code in vendor/wbragance/yii2-dynamicform/asset/yii2-dynamic-form.js looks like -
// "kartik-v/yii2-widget-depdrop"
var $hasDepdrop = $(widgetOptionsRoot.widgetItem).find('[data-krajee-depdrop]');
if ($hasDepdrop.length > 0) {
$hasDepdrop.each(function() {
if ($(this).data('select2') === undefined) {
$(this).removeData().off();
$(this).unbind();
_restoreKrajeeDepdrop($(this));
}
});
}
// "kartik-v/yii2-widget-select2"
var $hasSelect2 = $(widgetOptionsRoot.widgetItem).find('[data-krajee-select2]');
if ($hasSelect2.length > 0) {
$hasSelect2.each(function() {
var id = $(this).attr('id');
var configSelect2 = eval($(this).attr('data-krajee-select2'));
if ($(this).data('select2')) {
$(this).select2('destroy');
}
var configDepdrop = $(this).data('depdrop');
if (configDepdrop) {
configDepdrop = $.extend(true, {}, configDepdrop);
$(this).removeData().off();
$(this).unbind();
_restoreKrajeeDepdrop($(this));
}
var s2LoadingFunc = typeof initSelect2Loading != 'undefined' ? initSelect2Loading : initS2Loading;
var s2OpenFunc = typeof initSelect2DropStyle != 'undefined' ? initSelect2Loading : initS2Loading;
$.when($('#' + id).select2(configSelect2)).done(s2LoadingFunc(id, '.select2-container--krajee'));
var kvClose = 'kv_close_' + id.replace(/\-/g, '_');
$('#' + id).on('select2:opening', function(ev) {
s2OpenFunc(id, kvClose, ev);
});
$('#' + id).on('select2:unselect', function() {
window[kvClose] = true;
});
if (configDepdrop) {
var loadingText = (configDepdrop.loadingText) ? configDepdrop.loadingText : 'Loading ...';
initDepdropS2(id, loadingText);
}
});
}
};
Update -
I've changed the yii2-dynamic-form.js as following
// "kartik-v/yii2-widget-depdrop"
var $hasDepdrop = $(widgetOptionsRoot.widgetItem).find('[data-krajee-depdrop]');
if ($hasDepdrop.length > 0) {
$hasDepdrop.each(function() {
if ($(this).data('select2') === undefined) {
$(this).removeData().off();
$(this).unbind();
_restoreKrajeeDepdrop($(this));
}
});
}
// "kartik-v/yii2-widget-select2"
var $hasSelect2 = $(widgetOptionsRoot.widgetItem).find('[data-krajee-select2]');
if ($hasSelect2.length > 0) {
$hasSelect2.each(function() {
var id = $(this).attr('id');
var configSelect2 = eval($(this).attr('data-krajee-select2'));
if ($(this).data('select2')) {
$(this).select2('destroy');
}
var configDepdrop = $(this).data('depdrop');
if (configDepdrop) {
configDepdrop = $.extend(true, {}, configDepdrop);
$(this).removeData().off();
$(this).unbind();
_restoreKrajeeDepdrop($(this));
}
var s2LoadingFunc = typeof initSelect2Loading != 'undefined' ? initSelect2Loading : initS2Loading;
var s2OpenFunc = typeof initSelect2DropStyle != 'undefined' ? initSelect2Loading : initS2Loading;
$.when($('#' + id).select2(configSelect2)).done(initS2Loading(id, '.select2-container--krajee'));
var kvClose = 'kv_close_' + id.replace(/\-/g, '_');
$('#' + id).on('select2:opening', function(ev) {
//initSelect2DropStyle(id, kvClose, ev);
s2OpenFunc(id, kvClose, ev);
});
$('#' + id).on('select2:unselect', function() {
window[kvClose] = true;
});
if (configDepdrop) {
var loadingText = (configDepdrop.loadingText) ? configDepdrop.loadingText : 'Loading ...';
initDepdropS2(id, loadingText);
}
});
}
Now the there's no error message but I get the following screen -
I'm using Kartik Depdrop and Select2. Only in the first row both seems to be working. In the later only select2 is working with a spinning sign on top of it.
Here's my solution:
I've modified the dynamic-form.js as follows:
/**
* yii2-dynamic-form
*
* A jQuery plugin to clone form elements in a nested manner, maintaining accessibility.
*
* #author Wanderson Bragança <wanderson.wbc#gmail.com>
*/
(function ($) {
var pluginName = 'yiiDynamicForm';
var regexID = /^(.+?)([-\d-]{1,})(.+)$/i;
var regexName = /(^.+?)([\[\d{1,}\]]{1,})(\[.+\]$)/i;
$.fn.yiiDynamicForm = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.yiiDynamicForm');
return false;
}
};
var events = {
beforeInsert: 'beforeInsert',
afterInsert: 'afterInsert',
beforeDelete: 'beforeDelete',
afterDelete: 'afterDelete',
limitReached: 'limitReached'
};
var methods = {
init: function (widgetOptions) {
return this.each(function () {
widgetOptions.template = _parseTemplate(widgetOptions);
});
},
addItem: function (widgetOptions, e, $elem) {
_addItem(widgetOptions, e, $elem);
},
deleteItem: function (widgetOptions, e, $elem) {
_deleteItem(widgetOptions, e, $elem);
},
updateContainer: function () {
var widgetOptions = eval($(this).attr('data-dynamicform'));
_updateAttributes(widgetOptions);
_restoreSpecialJs(widgetOptions);
_fixFormValidaton(widgetOptions);
}
};
var _parseTemplate = function(widgetOptions) {
var $template = $(widgetOptions.template);
$template.find('div[data-dynamicform]').each(function(){
var widgetOptions = eval($(this).attr('data-dynamicform'));
if ($(widgetOptions.widgetItem).length > 1) {
var item = $(this).find(widgetOptions.widgetItem).first()[0].outerHTML;
$(this).find(widgetOptions.widgetBody).html(item);
}
});
$template.find('input, textarea, select').each(function() {
$(this).val('');
});
$template.find('input[type="checkbox"], input[type="radio"]').each(function() {
var inputName = $(this).attr('name');
var $inputHidden = $template.find('input[type="hidden"][name="' + inputName + '"]').first();
if ($inputHidden) {
$(this).val(1);
$inputHidden.val(0);
}
});
return $template;
};
var _getWidgetOptionsRoot = function(widgetOptions) {
return eval($(widgetOptions.widgetBody).parents('div[data-dynamicform]').last().attr('data-dynamicform'));
};
var _getLevel = function($elem) {
var level = $elem.parents('div[data-dynamicform]').length;
level = (level < 0) ? 0 : level;
return level;
};
var _count = function($elem, widgetOptions) {
return $elem.closest('.' + widgetOptions.widgetContainer).find(widgetOptions.widgetItem).length;
};
var _createIdentifiers = function(level) {
return new Array(level + 2).join('0').split('');
};
var _addItem = function(widgetOptions, e, $elem) {
var count = _count($elem, widgetOptions);
if (count < widgetOptions.limit) {
$toclone = widgetOptions.template;
$newclone = $toclone.clone(false, false);
if (widgetOptions.insertPosition === 'top') {
$elem.closest('.' + widgetOptions.widgetContainer).find(widgetOptions.widgetBody).prepend($newclone);
} else {
$elem.closest('.' + widgetOptions.widgetContainer).find(widgetOptions.widgetBody).append($newclone);
}
_updateAttributes(widgetOptions);
_restoreSpecialJs(widgetOptions);
_fixFormValidaton(widgetOptions);
$elem.closest('.' + widgetOptions.widgetContainer).triggerHandler(events.afterInsert, $newclone);
} else {
// trigger a custom event for hooking
$elem.closest('.' + widgetOptions.widgetContainer).triggerHandler(events.limitReached, widgetOptions.limit);
}
};
var _removeValidations = function($elem, widgetOptions, count) {
if (count > 1) {
$elem.find('div[data-dynamicform]').each(function() {
var currentWidgetOptions = eval($(this).attr('data-dynamicform'));
var level = _getLevel($(this));
var identifiers = _createIdentifiers(level);
var numItems = $(this).find(currentWidgetOptions.widgetItem).length;
for (var i = 1; i <= numItems -1; i++) {
var aux = identifiers;
aux[level] = i;
currentWidgetOptions.fields.forEach(function(input) {
var id = input.id.replace("{}", aux.join('-'));
if ($("#" + currentWidgetOptions.formId).yiiActiveForm("find", id) !== "undefined") {
$("#" + currentWidgetOptions.formId).yiiActiveForm("remove", id);
}
});
}
});
var level = _getLevel($elem.closest('.' + widgetOptions.widgetContainer));
var widgetOptionsRoot = _getWidgetOptionsRoot(widgetOptions);
var identifiers = _createIdentifiers(level);
identifiers[0] = $(widgetOptionsRoot.widgetItem).length - 1;
identifiers[level] = count - 1;
widgetOptions.fields.forEach(function(input) {
var id = input.id.replace("{}", identifiers.join('-'));
if ($("#" + widgetOptions.formId).yiiActiveForm("find", id) !== "undefined") {
$("#" + widgetOptions.formId).yiiActiveForm("remove", id);
}
});
}
};
var _deleteItem = function(widgetOptions, e, $elem) {
var count = _count($elem, widgetOptions);
if (count > widgetOptions.min) {
$todelete = $elem.closest(widgetOptions.widgetItem);
// trigger a custom event for hooking
var eventResult = $('.' + widgetOptions.widgetContainer).triggerHandler(events.beforeDelete, $todelete);
if (eventResult !== false) {
_removeValidations($todelete, widgetOptions, count);
$todelete.remove();
_updateAttributes(widgetOptions);
_restoreSpecialJs(widgetOptions);
_fixFormValidaton(widgetOptions);
$('.' + widgetOptions.widgetContainer).triggerHandler(events.afterDelete);
}
}
};
var _updateAttrID = function($elem, index) {
var widgetOptions = eval($elem.closest('div[data-dynamicform]').attr('data-dynamicform'));
var id = $elem.attr('id');
var newID = id;
if (id !== undefined) {
var matches = id.match(regexID);
if (matches && matches.length === 4) {
matches[2] = matches[2].substring(1, matches[2].length - 1);
var identifiers = matches[2].split('-');
identifiers[0] = index;
if (identifiers.length > 1) {
var widgetsOptions = [];
$elem.parents('div[data-dynamicform]').each(function(i){
widgetsOptions[i] = eval($(this).attr('data-dynamicform'));
});
widgetsOptions = widgetsOptions.reverse();
for (var i = identifiers.length - 1; i >= 1; i--) {
identifiers[i] = $elem.closest(widgetsOptions[i].widgetItem).index();
}
}
newID = matches[1] + '-' + identifiers.join('-') + '-' + matches[3];
$elem.attr('id', newID);
} else {
newID = id + index;
$elem.attr('id', newID);
}
}
if (id !== newID) {
$elem.closest(widgetOptions.widgetItem).find('.field-' + id).each(function() {
$(this).removeClass('field-' + id).addClass('field-' + newID);
});
// update "for" attribute
$elem.closest(widgetOptions.widgetItem).find("label[for='" + id + "']").attr('for',newID);
}
return newID;
};
var _updateAttrName = function($elem, index) {
var name = $elem.attr('name');
if (name !== undefined) {
var matches = name.match(regexName);
if (matches && matches.length === 4) {
matches[2] = matches[2].replace(/\]\[/g, "-").replace(/\]|\[/g, '');
var identifiers = matches[2].split('-');
identifiers[0] = index;
if (identifiers.length > 1) {
var widgetsOptions = [];
$elem.parents('div[data-dynamicform]').each(function(i){
widgetsOptions[i] = eval($(this).attr('data-dynamicform'));
});
widgetsOptions = widgetsOptions.reverse();
for (var i = identifiers.length - 1; i >= 1; i--) {
identifiers[i] = $elem.closest(widgetsOptions[i].widgetItem).index();
}
}
name = matches[1] + '[' + identifiers.join('][') + ']' + matches[3];
$elem.attr('name', name);
}
}
return name;
};
var _updateAttributes = function(widgetOptions) {
var widgetOptionsRoot = _getWidgetOptionsRoot(widgetOptions);
$(widgetOptionsRoot.widgetItem).each(function(index) {
var $item = $(this);
$(this).find('*').each(function() {
// update "id" attribute
_updateAttrID($(this), index);
// update "name" attribute
_updateAttrName($(this), index);
});
});
};
var _fixFormValidatonInput = function(widgetOptions, attribute, id, name) {
if (attribute !== undefined) {
attribute = $.extend(true, {}, attribute);
attribute.id = id;
attribute.container = ".field-" + id;
attribute.input = "#" + id;
attribute.name = name;
attribute.value = $("#" + id).val();
attribute.status = 0;
if ($("#" + widgetOptions.formId).yiiActiveForm("find", id) !== "undefined") {
$("#" + widgetOptions.formId).yiiActiveForm("remove", id);
}
$("#" + widgetOptions.formId).yiiActiveForm("add", attribute);
}
};
var _fixFormValidaton = function(widgetOptions) {
var widgetOptionsRoot = _getWidgetOptionsRoot(widgetOptions);
$(widgetOptionsRoot.widgetBody).find('input, textarea, select').each(function() {
var id = $(this).attr('id');
var name = $(this).attr('name');
if (id !== undefined && name !== undefined) {
currentWidgetOptions = eval($(this).closest('div[data-dynamicform]').attr('data-dynamicform'));
var matches = id.match(regexID);
if (matches && matches.length === 4) {
matches[2] = matches[2].substring(1, matches[2].length - 1);
var level = _getLevel($(this));
var identifiers = _createIdentifiers(level -1);
var baseID = matches[1] + '-' + identifiers.join('-') + '-' + matches[3];
var attribute = $("#" + currentWidgetOptions.formId).yiiActiveForm("find", baseID);
_fixFormValidatonInput(currentWidgetOptions, attribute, id, name);
}
}
});
};
var _restoreSpecialJs = function(widgetOptions) {
var widgetOptionsRoot = _getWidgetOptionsRoot(widgetOptions);
// "kartik-v/yii2-widget-datepicker"
var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
if ($hasDatepicker.length > 0) {
$hasDatepicker.each(function() {
$(this).parent().removeData().datepicker('remove');
$(this).parent().datepicker(eval($(this).attr('data-krajee-datepicker')));
});
}
// "kartik-v/yii2-widget-timepicker"
var $hasTimepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-timepicker]');
if ($hasTimepicker.length > 0) {
$hasTimepicker.each(function() {
$(this).removeData().off();
$(this).parent().find('.bootstrap-timepicker-widget').remove();
$(this).unbind();
$(this).timepicker(eval($(this).attr('data-krajee-timepicker')));
});
}
// "kartik-v/yii2-money"
var $hasMaskmoney = $(widgetOptionsRoot.widgetItem).find('[data-krajee-maskMoney]');
if ($hasMaskmoney.length > 0) {
$hasMaskmoney.each(function() {
$(this).parent().find('input').removeData().off();
var id = '#' + $(this).attr('id');
var displayID = id + '-disp';
$(displayID).maskMoney('destroy');
$(displayID).maskMoney(eval($(this).attr('data-krajee-maskMoney')));
$(displayID).maskMoney('mask', parseFloat($(id).val()));
$(displayID).on('change', function () {
var numDecimal = $(displayID).maskMoney('unmasked')[0];
$(id).val(numDecimal);
$(id).trigger('change');
});
});
}
// "kartik-v/yii2-widget-fileinput"
var $hasFileinput = $(widgetOptionsRoot.widgetItem).find('[data-krajee-fileinput]');
if ($hasFileinput.length > 0) {
$hasFileinput.each(function() {
$(this).fileinput(eval($(this).attr('data-krajee-fileinput')));
});
}
// "kartik-v/yii2-widget-touchspin"
var $hasTouchSpin = $(widgetOptionsRoot.widgetItem).find('[data-krajee-TouchSpin]');
if ($hasTouchSpin.length > 0) {
$hasTouchSpin.each(function() {
$(this).TouchSpin('destroy');
$(this).TouchSpin(eval($(this).attr('data-krajee-TouchSpin')));
});
}
// "kartik-v/yii2-widget-colorinput"
var $hasSpectrum = $(widgetOptionsRoot.widgetItem).find('[data-krajee-spectrum]');
if ($hasSpectrum.length > 0) {
$hasSpectrum.each(function() {
var id = '#' + $(this).attr('id');
var sourceID = id + '-source';
$(sourceID).spectrum('destroy');
$(sourceID).unbind();
$(id).unbind();
var configSpectrum = eval($(this).attr('data-krajee-spectrum'));
configSpectrum.change = function (color) {
jQuery(id).val(color.toString());
};
$(sourceID).attr('name', $(sourceID).attr('id'));
$(sourceID).spectrum(configSpectrum);
$(sourceID).spectrum('set', jQuery(id).val());
$(id).on('change', function(){
$(sourceID).spectrum('set', jQuery(id).val());
});
});
}
var _restoreKrajeeDepdrop = function($elem) {
var configDepdrop = $.extend(true, {}, eval($elem.attr('data-krajee-depdrop')));
var inputID = $elem.attr('id');
var matchID = inputID.match(regexID);
if (matchID && matchID.length === 4) {
for (index = 0; index < configDepdrop.depends.length; ++index) {
var match = configDepdrop.depends[index].match(regexID);
if (match && match.length === 4) {
configDepdrop.depends[index] = match[1] + matchID[2] + match[3];
}
}
}
$elem.depdrop(configDepdrop);
};
// "kartik-v/yii2-widget-depdrop"
var _restoreKrajeeDepdrop = function($elem) {
var configDepdrop = $.extend(true, {}, eval($elem.attr('data-krajee-depdrop')));
var inputID = $elem.attr('id');
var matchID = inputID.match(regexID);
if (matchID && matchID.length === 4) {
for (index = 0; index < configDepdrop.depends.length; ++index) {
var match = configDepdrop.depends[index].match(regexID);
if (match && match.length === 4) {
configDepdrop.depends[index] = match[1] + matchID[2] + match[3];
}
}
}
$elem.depdrop(configDepdrop);
};
var $hasDepdrop = $(widgetOptionsRoot.widgetItem).find('[data-krajee-depdrop]');
if ($hasDepdrop.length > 0) {
$hasDepdrop.each(function() {
if ($(this).data('select2') === undefined) {
$(this).removeData().off();
$(this).unbind();
_restoreKrajeeDepdrop($(this));
}
var configDepdrop = eval($(this).attr('data-krajee-depdrop'));
$(this).depdrop(configDepdrop);
});
}
// "kartik-v/yii2-widget-select2"
var $hasSelect2 = $(widgetOptionsRoot.widgetItem).find('[data-krajee-select2]');
if ($hasSelect2.length > 0) {
$hasSelect2.each(function() {
var id = $(this).attr('id');
var configSelect2 = eval($(this).attr('data-krajee-select2'));
$.when($('#' + id).select2(configSelect2)).done(initS2Loading(id));
$('#' + id).on('select2-open', function() {
initSelect2DropStyle(id)
});
if ($(this).attr('data-krajee-depdrop')) {
$(this).on('depdrop.beforeChange', function(e,i,v) {
var configDepdrop = eval($(this).attr('data-krajee-depdrop'));
var loadingText = (configDepdrop.loadingText)? configDepdrop.loadingText : 'Loading ...';
$('#' + id).select2('data', {text: loadingText});
});
$(this).on('depdrop.change', function(e,i,v,c) {
$('#' + id).select2('val', $('#' + id).val());
});
}
});
}
};
})(window.jQuery);
It's working well on my end.
I've found a solution to remove the spinning icon on the select2. I've removed the 'id' from select2 widget in my _form and that resolved this issue.
Instead of doing changes in vendor's code there is new repo with issue fixes.
Link => https://packagist.org/packages/vivekmarakana/yii2-dynamicform
Either run
php composer.phar require --prefer-dist vivekmarakana/yii2-dynamicform "*"
or add
"vivekmarakana/yii2-dynamicform": "*"
to the require section of your composer.json file.
Able to call the url of my web service that is proved by eclipse console output.
But unable to parse it into HTML table. for a test purpose i write a windows.alert inside get.JSON function. but it does not work however the call is made to service as shown in image below:-
Can anyone help me for this.
Thanks.
after clicking on clickme button on webpage the console get printed: proof of webservice call:
code for HTML Page:-
<!DOCTYPE html>
<html>`enter code here`
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>item svc demo</title>
<p id="demo"></p>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
function myFunction(jQuery)
{
window.alert(5 + 6);
$.getJSON("http://localhost:8080/OnlineStore/kmsg/grocery/item",
function (data) {
window.alert(9 + 6);
}
);
};
$(document).ready(myFunction);
</script>
</head>
<body>
<table id="itemTable" border="2">
<tr>
<th>itemno</th>
<th>offerPercent</th>
<th>regQtyBuyLimit</th>
<th>offerQtyBuyLimit</th>
<th>minReOrderLevel</th>
<th>pkg</th>
<th>addedOn</th>
<th>updatedOn</th>
<th>mrp</th>
<td>regPrice</th>
<th>minBulkQty</th>
<th>bulkDiscount</th>
</tr>
</table><br /><br />
<button onclick="myFunction()">Click me</button>
</body>
</html>
Friends i Have solved this problem couple of weeks age. I am going to answer my own question hope this can help someone:
The function code given below:
function setSales(SalesRecord,type,xml)
{
var SalesRecordTable = document.getElementById("custorder2");
var SalesRecordTableHead = document.getElementById("head2");
var SalesRecordTableBody = document.createElement("tbody");
SalesRecordTableBody.appendChild(SalesRecordTableHead);
for(var i=0; i< SalesRecord.length; i++)
{
var row = document.createElement("tr");
SalesRecordTable.insertRow(-1);
var obj = SalesRecord[i];
var vSalesOrderNo = obj["salesOrderNo"];
var vMobileNo = obj["mobileNo"];
var vitemno = obj["itemNo"];
var vpkg = obj["pkg"];
var vitemQty = obj["itemQty"];
var vitemRate = obj["itemRate"];
var vaddedOn = obj["addedOn"];
var vupdatedOn = obj["updatedOn"];
var cell = document.createElement("td");
var cellText = document.createTextNode(vSalesOrderNo);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vMobileNo);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vitemno);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vpkg);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vitemQty);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vitemRate);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vaddedOn);
cell.appendChild(cellText);
row.appendChild(cell);
cell = document.createElement("td");
cellText = document.createTextNode(vupdatedOn);
cell.appendChild(cellText);
row.appendChild(cell);
SalesRecordTableBody.appendChild(row);
}
SalesRecordTable.appendChild(SalesRecordTableBody);
SalesRecordTable.setAttribute("border", "2");
}
// The JSON data is coming in the "SalesRecord" Parameter and customer2 is table id , head2 is row id, tbody is body of table.
Thanks.
this function like this in controller
public JsonResult LoadIndex()
{
var x = (from a in db.DLVTFaulties
select new DLVTFaultyInfo
{
Id = a.Id,
Explain = a.Explain
});
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
program in the view that you want to show the table is
<script>
function LoadDLVTFaulty() {
$('#update_panel').html('Loading Data...');
var id = 0;
debugger;
$.ajax({
type: 'GET',
url: '/DLVTFaultyInfo/LoadIndex',
datatype: 'json',
success: function (d) {
if (d.length > 0) {
var $data = $('<table id = "Table"></table>').addClass('table table-responsive table-striped');
var header = "<thead><tr><th>Fault </th><th>Code </th><th></th></tr></thead>";
$data.append(header);
$.each(d, function (i, row) {
var $row = $('<tr/>');
$row.append($('<td/>').html(row.Explain));
$row.append($('<td/>').html(row.Id));
$row.append($('<td/>').html("<img id = \"edit\" src='/images/edit.png' title='Edit' onclick=\"EditFault(" + row.Id + ")\"/>"));
$row.append($('<td/>').html("<img id = \"delete\" src='/images/delete.png' title='Edit' onclick=DeleteFault(" + row.Id + ") />"));
$data.append($row);
});
$('#update_panel').html($data);
}
else {
var $noData = $('<div/>').html('no fault');
$('#update_panel').html($noData);
}
},
error: function (xhr, status, error) {
alert(error);
}
});
}
</script>
<div id='update_panel'></div>
i test it and work excellent in mvc