I am taking in an input from a text box in one HTML page and saving it to local storage using this function.
function writeMail(emailInput){
console.log(emailInput);
localStorage.setItem('emailInput',emailInput);
let theEmail = localStorage.getItem('emailInput');
console.log(theEmail);
}
This works fine and I can check the inputs are correct through my console logs.
Yet when I try and get this from local storage to store in my table in my emailList html file, it seems to not work at all.
<body>
email = localstorage["emailInput"];
<table>
<caption> Email list
</caption>
<tr>
<th> Name </th>
<th> Email </th>
</tr>
<tr>
<td>email </td>
</tr>
</table>
</body>
For you to be able to manipulate the contents of HTML, you need to modify the DOM node specifically. In this specific case you should have an id attribute on the <td>and then use the innerHTML property of that node to set the desired value.
i.e.:
<td id="xpto"></td>
then on the code:
let theEmail = localStorage.getItem('emailInput');
document.getElementById("xpto").innerHTML = theEmail;
You should also set that code inside of a function that is called once the document has finished loading, so something like:
JAVASCRIPT:
function go(){
let theEmail = localStorage.getItem('emailInput');
document.getElementById("xpto").innerHTML = theEmail;
}
HTML:
<body onload="go()">
Related
I'm trying to get a value from request, that returns a HTML response, using Postman. I'm using Cheerio inside the script section.
The response looks like this:
<table class="etlsessions-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="someclass1">
<div>
<span>info1</span>
</div>
</th>
<th class="someclass2">
<div>
<span>info2</span>
</div>
</th>
<th class="someclass3">
<div>
<span>info3</span>
</div>
</th>
<th class="someclass2">
<div>
<span>info4</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr class="someclass5">
<td class="someclass">
<nobr>info5</nobr>
</td>
<td class="someclass6">
<nobr>info6</nobr>
</td>
<td class="someclass3">info7</td>
<td class="someclass7">
someurl1
</td>
</tr>
</tbody>
</table>
How I can get the info6 value from the someclass6 class?
As Cheerio is built-in to the Postman sandbox environment, you can use it to get the value of the element.
I'm not sure of your complete use-case but you could add something basic like this to the Tests script and print the value to the console:
const $ = cheerio.load(pm.response.text()),
elementValue = $('.someclass6 nobr').text();
console.log(elementValue)
To emphasis Danny was saying
Use the jQuery selector API to get different elements on the page reading dom
const $ = cheerio.load(pm.response.text());
console.log $('.someclass6 nobr').text(); //derive any element from class
which has value someclass6
Or you can write it like this
console.log($("td[class$='someclass6'] nobr").text()); //derive any text value within the td tag from the class which has the value someclass6
console.log($("td").attr('class')) //to fetch values from the attribute(s) of tag td
To store it as a collection variable in postman for useage in other api calls
const $ = cheerio.load(pm.response.text());
var storesomeclass6 = $('.someclass6 nobr').text();
pm.collectionVariables.set("someclass6", storesomeclass6 );
Postman is a software that will allow you to make calls to API endpoints, so basically your program will be written in node.js and you will call the endpoint with postman.
In this case and using cheerio, the code will look like something like this :
function getResponse() {
return fetch(`${YOUR API END POINT URL}`)
.then(response => response.text())
.then(body => {
const $ = cheerio.load(body);
const $info6= $('.someclass6 td );
const info6= $info6.first().contents().filter(function() {
return this.type === 'text';
}).text().trim();
const response= {
info6,
};
return response;
});
}
Best of luck !
I have a large table in WordPress, I need to change the order of the columns, but I have to do it manually every time, when I need. Is there any plugin out there, in which all table loads up and I drag and drop the whole column from there as my choice?
The website is here
Based on your question, i can give you a demo to show you how to move forward with your requirements.
Please check this UPDATED FIDDLE. As you requested we are using Dragtable js.
Once sorting is completed we checks each row of the table finds each column of the respective row and create a json tree structure.
Html
<table id="sort_table">
<thead>
<tr>
<th></th>
<th class="draggable">Col1</th>
<th class="draggable">Col2</th>
<th class="draggable">Col3</th>
<th class="draggable">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>Data11</td>
<td>Data12</td>
<td>Data13</td>
<td>Data14</td>
</tr>
<tr>
<td>Row2</td>
<td>Data21</td>
<td>Data22</td>
<td>Data23</td>
<td>Data24</td>
</tr>
<tr>
<td>Row3</td>
<td>Data31</td>
<td>Data32</td>
<td>Data33</td>
<td>Data34</td>
</tr>
<tr>
<td>Row4</td>
<td>Data41</td>
<td>Data42</td>
<td>Data43</td>
<td>Data44</td>
</tr>
</tbody>
</table>
JS (UPDATED)
$(document).ready(function() {
$('#sort_table').dragtable({
dragaccept: '.draggable',
beforeStop: function() {
var tree = {};
var rows = [];
$('#sort_table tr').each(function() {
var col_count = 0;
var cols = [];
$(this).children().each(function() {
cols[col_count] = $(this).html();
col_count++;
});
rows.push(cols);
});
tree.data = rows;
var tree_json = JSON.stringify(tree); // use the variable to save to DB
console.log(tree_json);
}
});
});
You can save the variable tree_json to database (Call ajax to php and save to DB)
On each page load you could take the value from database to a variable and using json_decode to make the string a json object
$table_structure = ; // Code to take from db
$table_structure = json_decode($table_structure);
You can copy and paste json from console to check if its valid using JSONLint
I have a HTML widget in my ui.xml which I am using in Uibinder to populate data as given below:
ui.xml ->
<g:HTML ui:field="operationsDetailTableTemplate" visible="false">
<table class="{style.LAYOUT_STYLE}" width="100%" border="1">
<tr>
<td><img src="images/indent-blue.gif"/></td>
<td>
<table class="{style.DEFAULT_STYLE}">
<thead>
<tr>
<th>OperationUuid</th>
....
</tr>
</thead>
<tbody>
<tr>
<td>%s</td>
...
</tr>
</tbody>
</table>
</td>
</tr>
....
</g:html>
Uibinder.java--->
String htmlText = operationsDetailTableTemplate.getHTML()
.replaceFirst("%s", toSafeString(operation.getOperationUuid()))
....
HTML html = new HTML(htmlText);
operationsDetail.add(html);
The above is done in a for loop for each of the operation retrieved from the database.
My question is how I can embed a hyperlink or an anchor tag on one of the cell (eg. operation id ) for each of the operation set retrieved. I also wish to have a listener attached to it.
P.S. - It does not allow me to have a anchor tag in HTML in ui.xml.
You'd better use the tools in the way they've been designed to be used: use ui:field="foo" on the <td> and #UiField Element foo + foo.setInnerHTML(toSafeString(...)) instead of extracting the HTML, modifying it and reinjecting it elsewhere. You could also use a <g:Anchor> and attach an #UiHandler to handle ClickEvents.
Your way of using UiBinder makes me think of SafeHtmlTemplates, or the new UiRenderer aka UiBinder for Cells: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Rendering_HTML_for_Cells
Hi i was wondering if this is the expected behaviour:
<html>
<head>
</head>
<body>
<?if(a){
Logger.log("a ="+a)?>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Id</th>
</tr>
<tr>
<td><input type='text' name=firstName id='firstNameToEdit' /></td>
<td><input type='text' name=lastName id='lastNameToEdit' /></td>
<td><label id='down_id'></label></td>
</tr>
</table>
<?}else{Logger.log("a="+a)}?>
</body>
</html>
when a is defined i get the value of the a in the log and everythings shows up as expected
but when i leave the a undefined the execution seems to stop at if(a) and log shows nothing.
I serve the html like this:
var t = HtmlService.createTemplateFromFile('test');
return t.evaluate();
When i serve it this way:
var t = HtmlService.createTemplateFromFile('test');
t.a = b;
return t.evaluate();
where (b:{undefined,null})
then if i log the value of a inside the html template i get that a=null (in both cases).
It seems that you can't have an undefined variable inside a template.
P.S. i would really appreciate a way to turn off auto identation in the editor
If you run the doGet() method in the editor you should see the error:
ReferenceError: "a" is not defined.
In JavaScript you can't reference a variable that doesn't exist. To work around this you can change the if case to:
<? if (this.a) {
Since this is always defined as the current object/scope.
I'm using the javascript method getElementsByTagName("a") to call all 'a' tags and do some effect with them. The method works in FF and Opera but not in Chrome and Safari.
When I look in the debugging tools of Chrome and Safari they say: "Uncaught TypeError: Cannot call method 'getElementsByTagName' of null"
Why is that and what's the fix? Please can someone advise me on this?
Many Thanks in advance.
Here's the code:
function popUpSAPWindow(){
// Find all links in the page and put them into an array.
var linksInOrderLinesTable = document.getElementById("orderLinesTable").getElementsByTagName("a"); // The line doing the error
var linksLen = linksInOrderLinesTable.length;
// If the link text is 'SAP' then modify the attributes
for(var i = 0; i < linksLen; i++){
if(linksInOrderLinesTable[i].innerHTML == "SAP"){
// Store the 'href' value of each SAP link.
var sapHref = linksInOrderLinesTable[i].href;
// Modify the attributes of each SAP link.
linksInOrderLinesTable[i].setAttribute("href", "javascript:return false;");
linksInOrderLinesTable[i].setAttribute("onclick", "sapNewWindow(\'" + sapHref + "\')");
}
}
}
It works with this HTML:
<table id="orderLinesTable" summary="List of orders made by customers that the administrator can pick and deal with">
<tr>
<th>Status</th>
<th>Basket id</th>
<th>Order line id</th>
<th>Product</th>
<th>Company</th>
<th>Catalogue</th>
<th>Date</th>
<th>Details</th>
</tr>
<tr>
<td>Accepted</td>
<td>236569</td>
<td>207</td>
<td>OS Master Map</td>
<td>NHS</td>
<td>Standard</td>
<td>1 Aug 10</td>
<td>Normal SAP</td>
</tr>
<tr>
<td>New</td>
<td>236987</td>
<td>528</td>
<td>Code-Point</td>
<td>BT</td>
<td>Standard</td>
<td>9 Aug 10</td>
<td>Normal SAP</td>
</tr>
But when I'm on other pages it gives the error mentioned.
The problem is, that when you're calling document.getElementById("orderLinesTable").getElementsByTagName("a") on a page that does not have the orderLinesTable getElementById will return null. Therefore calling getElementsByTagName on null will yield an error.
This should solve the problem:
var orderLinesTable = document.getElementById("orderLinesTable");
var linksInOrderLinesTable = [];
if (orderLinesTable) { // only get the links when the table exists
linksInOrderLinesTable = orderLinesTable.getElementsByTagName("a");
}
Safari and Chrome both support the method. The object you're using it on may not be consistently retrieved, so it evaluates to null. Check how you're grabbing the object you're calling it on.
BTW.. it's not a Javascript method, it's a method in the DOM API.
EDIT:
document.getElementById("orderLinesTable")
alert what this is. Is it null?