I am unable Show Parsed Response from Xml Service in JQuery Mobile List View. I unable to get were the Problem is,what i have Tried is.
First i took all the Response to theXML var then iam Trying to append to ListView Which i have Dynamically Created in javaScript Code. Here is my Code,
function processXML(theXML) {
var nodeTree = theXML.documentElement.getElementsByTagName('Employee');
var output = "";
output += "<ul data-role='listview' class='ui-listview'>";
var length = nodeTree.length;
for (var i = 0; i < length; i++) {
var empName = nodeTree[i].getElementsByTagName('name')[0].firstChild.nodeValue;
var empFName = nodeTree[i].getElementsByTagName('Fathername')[0].firstChild.nodeValue;
var empAddr = nodeTree[i].getElementsByTagName('Address')[0].firstChild.nodeValue;
output += buildRow(empName, empFName, empAddr);
}
output += "</ul>";
document.getElementById('result').innerHTML = output;
}
function buildRow(empName, empFName, empAddr) {
var row = "<li><a href='#'>";
row += empName;
row += empFName;
row += empAddr;
row += "</a></li>";
return row;
}
$("result").html(output).trigger("create");
$(".ui-listview").listview('refresh');
Related
I am trying to call my function in controller class from JavaScript with the parameter
success: function(data) {
var output = '';
$("#dropdwn_cari").html(output);
for (var i = 0; i < data.length; i++) {
var buku = data[i];
console.log(buku['value']);
output += "<a class='dropdown-item' href='<?= site_url('data/buku/" + buku['value'] + "')?>'><a/>";
$("#dropdwn_cari").html(output);
PHP is a server-side language it runs before the browser renders your page. You can not pass a value to a PHP function in the way you are trying, because the PHP will consider it as a string i.e buku['value']. PHP will not pick the value inside buku['value'].
I'm rewriting it for you to try it.
success: function(data) {
var output = '';
$("#dropdwn_cari").html(output);
for (var i = 0; i < data.length; i++) {
var buku = data[i];
console.log(buku['value']);
output += "<a class='dropdown-item' href='<?= site_url('data/buku/')?>" + buku['value'] + "'><a/>";
$("#dropdwn_cari").html(output);
I making a table and show it in the modal dialogue so that buttons will appear for each row in the table. My question is how to make the button in the modal dialogue run for specific row in spreadsheet? Example : click first button in first row in modal dialogue, will run and change data in first row of spreadsheet. Do I need to create specific ID for each buttons?
My GS code:
function leadRespond(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Query_Script");
var dataRange = sheet.getDataRange();
var dataValue = dataRange.getDisplayValues();
var temp = HtmlService.createTemplateFromFile("lead");
temp.data = {application : dataValue};
var html = temp.evaluate().setWidth(1200).setHeight(600);
SpreadsheetApp.getUi().showModalDialog(html,"Manage Leave");
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Leave Application</h1>
<div id="output"></div>
<script>
var output = document.getElementById("output");
window.onload = function (){
google.script.run.withSuccessHandler(onSuccess).getTable();
}
function onSuccess(data){
if(data.success){
console.log(data.data);
var html = '<table>';
var row;
for(var i=0; i<data.data.length; i++){
html += '<tr>';
row = i;
//console.log(row);
for (var j=0; j<9; j++){
html += '<td>'+ data.data[i][j]+'</td>';
}
html += '<td>'+ '<button onclick="approve()">Approved</button>'+'</td>';
html += '</tr>';
}
html += '</table>';
output.innerHTML = html;
console.log(data);
}
}
function approve(){
google.script.run.getRow();
console.log("test");
}
</script>
</body>
</html>
Code with google.script.run :
function getTable(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Query_Script");
var data = sheet.getDataRange().getDisplayValues();
Logger.log(data);
return {'success': true,'data':data};
}
function getRow(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Query_Script");
for (var i=0; i<dataValue.length; i++){
var row = "";
var rowNum;
for (var j = 0; j < 9; j++) {
if (dataValue[i][j]) {
row = row + dataValue[i][j]; //row = "" + range(0,0) [emailAddress], row = range(0,0)+ range(0,1)[emailAddress,Timestamp]
}
row = row + ",";
}
row = row + " Row num " + i;
rowNum = i;
Logger.log(row);
Logger.log(rowNum);
}
}
Use custom html-data attributes and delegate event to <table>:
html += '<td>'+ '<button data-row="'+i+'" data-column="'+j+'">Approved</button>'+'</td>';
//...
output.innerHTML = html;
console.log(data);
const table = document.querySelector("table");
table.addEventListener('click', approve);
}
function approve(e){
const td = e.target;
const [row, column] = [td.dataset.row,td.dataset.column];
google.script.run.modifyRows(row,column);
}
I am trying to call the delete button to remove the listed file. Can anyone help me to build the logic.
$(document).ready(function () {
$('input[type = "file"]').change(function (e) {
var input = document.getElementById('fileUploader');
var output = document.getElementById('divFiles');
var HTML = "<table>";
for (var i = 0; i < input.files.length; ++i) {
HTML += "<tr><td>" + input.files.item(i).name + "</td><td> <button ></button></td></tr>";
}
HTML += "</table>";
output.innerHTML = HTML;
});
});
You can remove the parent tr tag containing button delete like
$('.btnDelete').on('click', function () {
$(this).closest('tr').remove();
});
I created a table, which seems to work fine, but I have problems assigning an id to this table, count how many rows it has, and assign each row an id. The debugger says:
TypeError: document.getElementById(...) is null
I couldn't figure out what I did wrong. Can someone please help? I commented my questions in the code below as well:
function populateTable(list){
var tableContent = "<table>";
for (var i = 0; i < list.length; ++i) {
var record = list[i];
tableContent += "<tr><td>" + record.Title + "</td></tr>\n";
}
tableContent += "</table>";
tableContent.id="orders";
var rows = document.getElementById("orders").rows.length;//why is this null?
document.getElementById("test").innerHTML = rows;
for (var i=0; i< rows; ++i){
//how do I assign an id for the element here?
}
}
You can do this in this way:
HTML:
<div id="here"> </div> <!-- the table will be added in this div -->
JavaScript:
function populateTable(list){
var tableContent = document.createElement('table');
for (var i = 0; i < list.length; ++i) {
var record = list[i];
var cell = document.createElement('td');
var row = document.createElement('tr');
var textnode = document.createTextNode(record.Title);
cell.appendChild(textnode);
row.appendChild(cell);
tableContent.appendChild(row);
}
tableContent.id="orders";
document.getElementById("here").appendChild(tableContent); // the table is added to the HTML div element
var rows = document.getElementById("orders").rows;
for (var i=0; i < rows.length; ++i){
rows[i].id = "myId" + (i+1); // this is how you assign IDs
console.log(rows[i]);
}
}
var persons = [{Title:"John"}, {Title:"Marry"}];
populateTable(persons);
Edit
It seems you don't know how to properly create a DOM from javascript:
http://www.w3schools.com/jsref/met_document_createelement.asp
Old answer
This line:
var rows = document.getElementById("orders").rows.length;//why is this null?
Get elements from HTML document by id. And it looks like you have not added tableContent yet to the document.
Here's my suggestion (read the comments in the code):
// This will create a table element and return it
function createTable(list){
var table = document.createElement('table'); // This is an actual html element
table.id = 'orders'; // Since it's an html element, we can assign an id to it
tableHtml = ''; // This empty string will hold the inner html of the table we just created
for (var i = 0; i < list.length; ++i) {
var record = list[i];
// we can assign the id here instead of looping through the rows again
tableHtml += '<tr id="row-' + i + '"><td>' + record.Title + '</td></tr>';
}
table.innerHTML = tableHtml; // We insert the html into the table element and parse it
var rows = table.rows.length; // We already have a reference to the table, so no need of getElementById
alert('rows'); // rows holds the number of rows. You can do whatever you want with this var.
return table; // return the table. We still need to insert it into the dom
}
// Create a new table and hold it in memory
var myTable = createTable([{Title:'One'}, {Title:'Two'}, {Title:'Three'}]);
// Inset the newly created table into the DOM
document.getElementById('parent-of-table').appendChild(myTable);
Hope this helps
This is already been answered, but here's my version without all the comments:
function createTable(list){
var table = document.createElement('table');
table.id = 'orders';
tableHtml = '';
for (var i = 0; i < list.length; ++i) {
tableHtml += '<tr id="row-' + i + '"><td>' + list[i].Title + '</td></tr>';
}
table.innerHTML = tableHtml;
var rows = table.rows.length;
alert('rows');
return table;
}
I have a HTML file.
It has Pre-formatted text with CSV data in it.
<pre>1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6
</pre>
How to extract this data and convert it into a HTML table using Javascript?
If you know that the data is going to be in the exact format you gave, then something simple like this will work:
Markup:
<pre id="data">1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6</pre>
<div id="table"></div>
JavaScript:
var table = '';
var rows = new Array();
rows = document.getElementById('data').innerHTML.split('\n');
table += '<table>'
for(var i = 0; i < rows.length; i++) {
var columns = rows[i].split(',');
table += '<tr>';
for(var j = 0; j < columns.length; j++) {
table += '<td>' + columns[j] + '</td>';
}
table += '</tr>';
}
table += '</table>';
document.getElementById('table').innerHTML = table;
Demo
Use the function described in this answer. It returns an array if you give it CSV data. So given the data:
<pre id="CSV_DATA">1,2,3,4
5,6,7,8
9,0,1,2
3,4,5,6
</pre>
You can get the CSV into a Javascript string:
var csv_data = document.getElementById("CSV_DATA").innerHTML;
Then use the function CSVToArray to get an array of the data:
var array_data = CSVToArray(csv_data, ",");
Then make an HTML table:
var table=document.createElement('table');
table.border='1';
document.body.appendChild(table);
for(var i=0; i<array_data.length; i++){
var line = array_data[i];
var tr=document.createElement('tr');
for(var j=0; j<line.length; j++){
var td=document.createElement('td');
td.innerHTML = line[j];
tr.appendChild(td);
table.appendChild(tr);
}
}
I haven't tested this code. Please review it and work out the details. But what it's supposed to do is iterate through the array returned by CSVToArray and add each element of that array to a table row, then add each generated row to a table. The table is added to the document's body, but you can add it wherever you please.
And here's a demo of mine as well.