MY js code :
function OrderFormControllerForRE($scope, $http) {
var urlString = window.location.href;
var urlParams = parseURLParams(urlString);
var jsonData = $.ajax({
url: "http://******:8989/getRuleEngine",
dataType: "json",
crossDomain: true,
}).responseText;
debugger;
if (!jsonData || jsonData === "") {
window.location.pathname = "../html/noDataFetched.html";
}
var parsed = JSON.parse(jsonData);
if (parsed.error) {
window.location.pathname = "../html/error.html";
}
$scope.ruleEngineJSON = parsed;
$scope.ruleName = "";
$scope.priority = "";
$scope.modifyPriority = function(ruleName) {
$scope.ruleName = ruleName;
$scope.priority = $scope.ruleEngineJSON[ruleName];
};
};
function navigateRuleEngine() {
window.location.pathname = "../html/modifyRuleEngine.html";
}
function parseURLParams(url) {
var queryStart = url.indexOf("?") + 1,
queryEnd = url.indexOf("#") + 1 || url.length + 1,
query = url.slice(queryStart, queryEnd - 1),
pairs = query.replace(/\+/g, " ").split("&"),
parms = {}, i, n, v, nv;
if (query === url || query === "") return;
for (i = 0; i < pairs.length; i++) {
nv = pairs[i].split("=", 2);
n = decodeURIComponent(nv[0]);
v = decodeURIComponent(nv[1]);
if (!parms.hasOwnProperty(n)) parms[n] = [];
parms[n].push(nv.length === 2 ? v : null);
}
return parms;
}
My Html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>POC-SalesForce</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
<img src="../img/spinner.gif" id="img" style="display:none"/>
<link href="https://fonts.googleapis.com/css?family=Cookie|Open+Sans:400,700" rel="stylesheet"/>
<!-- The main CSS file -->
<link href="../css/style.css" rel="stylesheet"/>
<link href="../css/codeReview.css" rel="stylesheet"/>
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/preloader.css">
<script src="../js/scriptRuleEngine.js"></script>
</head>
<body ng-app ng-controller="OrderFormControllerForRE">
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Modify Rule Engine </span></h1>
</div>
</div>
</header>
<section class="col-md-12 col-lg-12 dateSection">
<!--<form method="get">-->
<table id="ruleEngine" class="table table-sm table-inverse table-responsive table-striped table-bordered"
cellpadding="20" width="100%">
<thead>
<tr>
<th>Rule Name</th>
<th>Priority</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr ng-repeat="(key,value) in ruleEngineJSON">
<td>{{key}}</td>
<td>{{value}}</td>
<td><button type="button" class="btn btn-default"
ng-click="modifyPriority(key)">Modify</button></td>
</tr>
</tfoot>
</table>
<!--</form>-->
</section>
<footer>
<p>Salesforce Free Code Review For Syngenta, Copyright © 2017</p>
<p>Developed By - Nagendra Kumar Singh</p>
</footer>
</body>
</html>
When I load the page the url fires the controller and return the correct JSON format as I can see the results directly in the browser by accessing http://********:8989/getRuleEngine
But when the page is loaded I get this error in the JS while debugging:
"ReferenceError: url is not defined
at eval (eval at OrderFormControllerForRE (http://usblrnagesingh1:8989/js/scriptRuleEngine.js:12:9), <anonymous>:1:1)
at c.OrderFormControllerForRE (http://usblrnagesingh1:8989/js/scriptRuleEngine.js:12:9)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:35:36)
at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:35:165)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:68:194
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:54:298
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:7:392)
at K (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:54:163)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:47:397)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:47:17"
enter image description here
I dont know why is it failing because I have a similar page which has <body ng-app ng-controller="OrderFormController"> and the script has function OrderFormController($scope, $http) {}. It works fine there without any error.
Update
I have even tried changing the angular js version, but that does not work. Also this version should work as I have similar page which is working.
Related
Good afternoon, I'm a beginner, I'm having trouble getting information from a table that consumes data from an api.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
<title>Document</title>
</head>
<body onload="apendeOnClick()">
<table id="tablerow">
<caption>Alien football stars</caption>
<thead>
<tr>
<th>DATA</th>
<th>TELEFONE</th>
<th>RAMAL</th>
<th>DESCRIÇÃO</th>
<th>ACÕES</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
<script>
</script>
</body>
</html>
My code is this, it feeds the table normally, but I would like when the person clicks on the row button to display the information in the alert.
main.js
fetch("https://my-json-server.typicode.com/lfnoleto/api-fake/contact").then((data) => {
return data.json()
}).then((Objectdata) => {
//console.log(Objectdata[0].data)
let tabelaData = ""
Objectdata.map((values)=>{
tabelaData += `<tr>
<td>${values.data}</td>
<td>${values.tefone}</td>
<td>${values.ramal}</td>
<td>${values.descricao}</td>
<td><button id="butao" class="btn btn-success" ><i class="fa fa-phone"></button></td>
</tr>`
})
document.getElementById("table_body").innerHTML = tabelaData
innerHTML = tabelaData
})
function apendeOnClick(){
const table = document.getElementById("tablerow")
console.log(table)
if (table) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].childNodes[5].childNodes[1].onclick = function() {
tableText(this);
};
}
}
}
function tableText(tableRow) {
let telefone = tableRow.childNodes[1].innerHTML;
let ramal = tableRow.childNodes[2].innerHTML;
let obj = {'telefone': telefone, 'ramal': ramal};
console.log(obj);
}
I hope that when the person clicks on the telephone icon, he displays the extension and telephone information
you can use data attribute to store extension info or other information.
<button id="butao" data-extension="123" class="btn btn-success" >
in javascript :
const button = document.querySelector('button');
button.dataset.extention // "123"
a good references:
https://www.w3schools.com/tags/att_data-.asp
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
I want to move my functions to a separate js file, but when I do it, they stop working. How to approach this problem? Are there some other syntaxes when you want to move the functions to a separate *.js file?
function edit_description() {
var targetDescription = $("#description-1");
var value = targetDescription.text();
if (value != "") {
value = ""
};
targetDescription.html(`<input class="description form-control" data-target="description-1" type="text" value=${value}>`);
$("input:text").focus();
$("input").blur(function (e) {
e.preventDefault();
var target = targetDescription.children('input').attr("data-target");
$(`#${target}`).text($(this).val());
var description = $(this).val();
save_description(identification = "description-1", description);
});
};
function save_description(identification, description){
console.log('Saved!');
var userInput = {"identification":identification, "description":description};
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src=/static/main.js></script>
<div class="table-wrapper">
<table id="table" class="table table-striped">
<thead>
<tr>
<th scope="col"><span>Edit</span></th>
<th scope="col"><span>Description</span></th>
</tr>
</thead>
<tbody>
<tr>
<td id = "edit-1"><a class="btn" role="button" onclick="edit_description();">Edit ></a></td>
<td id = "description-1">Lorem</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
As you can see I put my js in a file called main.js in a static directory.
Avoid using absolute paths since an app may not always live in the root of a domain, stick to relative paths.
If the script is in the same folder as the HTML file, use src="./main.js"
Double Quotation ("") is missing!
Try this:
<script src="/static/main.js"></script>
Or this:
<script src="~/static/main.js"></script>
Good afternoon.
I am trying to create a button to refresh the page, through the Google app Script Web, but the method "window.location.reload ();", does not work could someone help?
link Google app Script Web: https://script.google.com/d/1jyWe9jm0dIqHsY1uKJZ0pOJYzLuq9dip1cSsXhxBwv53cFakW2LHgM_n/edit?mid=ACjPJvGbLXQwvhjDh7fsdifcTFvgQby-gsIUWeCSmwUzTdnVvXw8LNckG8rXcsyhcYvAcWAN7pU4E05bQEJwZl_1189N-bwyvttAxpHxmbvzUvx_d9SDKh19x3VzY9XxClhXweVlmqdMOSs&uiv=2
<html>
<base target="_se">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script>
<button onclick="sortTable()">Sort</button>
<button onclick="refresh()">refresh </button>
<table class="striped centered ajuste" id="tab">
<thead >
<tr>
<th>ID</th>
<th>NOME</th>
<th>DATA</th>
</tr>
</thead>
<tbody id="coportoTabela">
</tbody>
</table>
document.addEventListener("DOMContentLoaded", function(){
google.script.run.withSuccessHandler(gerarTabela).pegarTabelaEstoque();
});
function gerarTabela(dataArray){
var tcorpo = document.getElementById("coportoTabela");
dataArray.forEach(function(r){
var linha = document.createElement("tr");
var coluna1 = document.createElement("td");
coluna1.textContent = r[0];
var coluna2 = document.createElement("td");
coluna2.textContent = r[1];
var coluna3 = document.createElement("td");
coluna3.textContent = r[2];
linha.appendChild(coluna1);
linha.appendChild(coluna2);
linha.appendChild(coluna3);
tcorpo.appendChild(linha);
});
}
function refresh(){
window.location.reload();
}
Try this:
Javascript:
function reLoad() {
google.script.run
.withSuccessHandler(function(url){
window.open(url,'_top');
})
.getScriptURL();
}
GS:
function getScriptURL() {
return ScriptApp.getService().getUrl();
}
After location.reload() you should return false in onclick function:
function teste(){
location.reload();
return false;
}
Hello can you guys point out my fault ? I just wanna show my td and tr therefore I created a variable called variavel but it does not return anything in my html.
var lista = [
{ "descricao":"arroz","qtd":"1" , "valor":"5.40" },
{ "descricao":"cerveja","qtd":"12" , "valor":"1.99" },
{ "descricao":"carne","qtd":"1" , "valor":"15.00" }
];
function listas (lista)
{
total = 0;
for (var key in lista)
{
total+= lista[key].valor * lista[key].qtd;
}
return total;
}
function criatabela(lista)
{
// var tabelabody = document.createElement('table');
// tabelabody.id="tabelalista";
var tabela = '<thead><tr><td>DESCRICAO</td><td>QUANTIDADE</td><td>VALOR</td><td>EDITAR | ACAO </td></tr></thead><tbody>';
for (var key in lista)
{
tabela +='<tr> <td> '+lista[key].descricao+' </td> <td> '+lista[key].qtd+' </td><td> '+lista[key].valor+' </td><td> </td></tr>';
alert(lista[key].descricao);
alert(lista[key].qtd);
alert(lista[key].valor);
}
tabela +='</tbody>';
document.getElementById('tabelalista') = tabela;
}
listas(lista);
criatabela(lista);
<!DOCTYPE html>
<html>
<head>
<title> Shopping Control </title>
</head>
<script type="text/javascript" src="js/config.js" > </script>
<script type="text/javascript" src="js/main.js" > </script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="navTitulo" href="index.html" > </a>
</div>
</div>
</nav>
<div class="container-fluid">
<table id="tabelalista" class="table">
</table>
</div>
</body>
</html>
is my js written by wrong way ? Please help me!
You have to set the innerHTML of the table equal to your tabela variable.
document.getElementById('tabelalista').innerHTML = tabela;
Please use innerHTML in this line:
document.getElementById('tabelalista').innerHTML = tabela;
var lista = [
{ "descricao":"arroz","qtd":"1" , "valor":"5.40" },
{ "descricao":"cerveja","qtd":"12" , "valor":"1.99" },
{ "descricao":"carne","qtd":"1" , "valor":"15.00" }
];
function listas (lista)
{
total = 0;
for (var key in lista)
{
total+= lista[key].valor * lista[key].qtd;
}
return total;
}
function criatabela(lista)
{
// var tabelabody = document.createElement('table');
// tabelabody.id="tabelalista";
var tabela = '<thead><tr><td>DESCRICAO</td><td>QUANTIDADE</td><td>VALOR</td><td>EDITAR | ACAO </td></tr></thead><tbody>';
for (var key in lista)
{
tabela +='<tr> <td> '+lista[key].descricao+' </td> <td> '+lista[key].qtd+' </td><td> '+lista[key].valor+' </td><td> </td></tr>';
}
tabela +='</tbody>';
document.getElementById('tabelalista').innerHTML = tabela;
}
listas(lista);
criatabela(lista);
<!DOCTYPE html>
<html>
<head>
<title> Shopping Control </title>
</head>
<script type="text/javascript" src="js/config.js" > </script>
<script type="text/javascript" src="js/main.js" > </script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="navTitulo" href="index.html" > </a>
</div>
</div>
</nav>
<div class="container-fluid">
<table id="tabelalista" class="table">
</table>
</div>
</body>
</html>
If you see in your developer console, you will notice a reference error. That's because you can't assign html like this. You need to user .innerHTML or .append() (if using jquery)
var lista = [
{ "descricao":"arroz","qtd":"1" , "valor":"5.40" },
{ "descricao":"cerveja","qtd":"12" , "valor":"1.99" },
{ "descricao":"carne","qtd":"1" , "valor":"15.00" }
];
function listas (lista)
{
total = 0;
for (var key in lista)
{
total+= lista[key].valor * lista[key].qtd;
}
return total;
}
function criatabela(lista)
{
// var tabelabody = document.createElement('table');
// tabelabody.id="tabelalista";
var tabela = '<thead><tr><td>DESCRICAO</td><td>QUANTIDADE</td><td>VALOR</td><td>EDITAR | ACAO </td></tr></thead><tbody>';
for (var key in lista)
{
tabela +='<tr> <td> '+lista[key].descricao+' </td> <td> '+lista[key].qtd+' </td><td> '+lista[key].valor+' </td><td> </td></tr>';
}
tabela +='</tbody>';
document.getElementById('tabelalista').innerHTML = (tabela); //Note this.
}
console.log(document.getElementById('tabelalista'))
listas(lista);
criatabela(lista);
<!DOCTYPE html>
<html>
<head>
<title> Shopping Control </title>
</head>
<script type="text/javascript" src="js/config.js" > </script>
<script type="text/javascript" src="js/main.js" > </script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="navTitulo" href="index.html" > </a>
</div>
</div>
</nav>
<div class="container-fluid">
<table id="tabelalista" class="table">
</table>
</div>
</body>
</html>
I have made a function test tool for my company app using html/css/javascript/node.js/express/tablesorter.
My test tool is successfully performed the function tests.
My table style is from opensource 'Tablesorter'.
This is edit screen. The file is .ejs format. So, Node.js server render the file to html dynamically.
But, I wonder how to insert the row additionally in this table. So, I searched to solve the problem and got some solution like below.
for (var i in rList) {
var table = document.getElementById("ID_Table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var list = rList[i].split(" ");
cell1.innerHTML = list[0];
cell2.innerHTML = list[1];
}
But, this way is incomplete. The result is like this.
The 'tablesorter' style is not applied to additional rows. I don't know how to solve this.
<!DOCTYPE html>
<html>
<head>
<!-- Character Set -->
<meta charset="utf-8">
<!-- Title -->
<title><%= title %></title>
<!-- Style -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<!-- JS -->
<script src="/javascripts/indexCore.js"></script>
<!-- jQuery -->
<script src="/opensources/tablesorter/docs/js/jquery-latest.min.js"></script>
<script src="/opensources/tablesorter/docs/js/jquery-ui.min.js"></script>
<!-- Tablesorter: theme -->
<link class="theme default" rel="stylesheet" href="/opensources/tablesorter/css/theme.default.css">
<link class="theme blue" rel="stylesheet" href="/opensources/tablesorter/css/theme.blue.css">
<link class="theme green" rel="stylesheet" href="/opensources/tablesorter/css/theme.green.css">
<link class="theme grey" rel="stylesheet" href="/opensources/tablesorter/css/theme.grey.css">
<link class="theme ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.ice.css">
<link class="theme black-ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.black-ice.css">
<link class="theme dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.dark.css">
<link class="theme dropbox" rel="stylesheet" href="/opensources/tablesorter/css/theme.dropbox.css">
<link class="theme metro-dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.metro-dark.css">
<!-- Tablesorter script: required -->
<script src="/opensources/tablesorter/js/jquery.tablesorter.js"></script>
<script src="/opensources/tablesorter/js/widgets/widget-filter.js"></script>
<script src="/opensources/tablesorter/js/widgets/widget-stickyHeaders.js"></script>
<script id="js">
$(function(){
/* make second table scroll within its wrapper */
$('#ID_Table').tablesorter({
widthFixed : true,
headerTemplate : '{content} {icon}', // Add icon for various themes
widgets: [ 'zebra', 'stickyHeaders', 'filter' ],
widgetOptions: {
// jQuery selector or object to attach sticky header to
stickyHeaders_attachTo : '.wrapper' // or $('.wrapper')
}
});
$("#ID_Table tbody").click(function () {
//$(this).addClass('selected').siblings().removeClass('selected');
//alert('a');
});
});
</script>
<script>
$(function() { //이 부분은 렌더링 되자마자 실행되는 부분
window.includeCaption = true;
$('.caption').on('click', function(){
includeCaption = !includeCaption;
$(this).html( '' + includeCaption );
$('#ID_Table').each(function(){
if (this.config) {
this.config.widgetOptions.stickyHeaders_includeCaption = includeCaption;
this.config.widgetOptions.$sticky.children('caption').toggle(includeCaption);
}
});
});
// removed jQuery UI theme because of the accordion!
$('link.theme').each(function(){ this.disabled = true; });
var themes = 'dropbox blue green grey ice black-ice dark default metro-dark', //테마 순서
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length; i++) {
o += '<option value="' + t[i] + '">' + t[i] + '</option>';
}
$('select:first')
.append(o)
.change(function(){
var theme = $(this).val().toLowerCase(),
// ui-theme is added by the themeswitcher
files = $('link.theme').each(function(){
this.disabled = true;
})
files.filter('.' + theme).each(function(){
this.disabled = false;
});
$('table')
.removeClass('tablesorter-' + t.join(' tablesorter-'))
.addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme) );
}).change();
});
</script>
</head>
<body>
<div id="header">
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
Main
Edit
Blank
<hr/>
</div>
<div id="wrap">
<div id="Main_Screen">
<input type="button" value="로딩" id="btn" onclick="dynamicLoadScript_Main('/temps/MainScript.js', '/temps/WrapScript.js')"></input>
<input type="button" value="수행" id="btn1" onclick="Automation()"></input>
<button type="button">결과 리스트 출력</button>
</div>
<div id="List_Screen" class="narrow-block wrapper">
Theme: <select></select>
<table id="ID_Table" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>Function</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This is my .ejs File.
And, this is printResult Function in indexCore.js.
function printResult(){
var rList = resultList.split('\n');
for (var i in rList) {
var table = document.getElementById("ID_Table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var list = rList[i].split(" ");
cell1.innerHTML = list[0];
cell2.innerHTML = list[1];
}
}
You can edit and apply your logic at the .ejs file directly at your backend as your client side solution seems to be run after table being initialized by Tablesorter. You can also try to implement your client side solution adding the rows to table first then initialize Tablesorter. Good Luck!