AngularJS: {{EXPRESSION}} displaying as {{expression}} instead of result - html

Fixed: Thanks to #Sajeetharan, it was discovered that amongst other things the function the expression was attempting to display, GenerateRef, was broken and causing the issue.
I understand this is a reasonably common question but so far my following of other posts or tutorials has not been able to fix my issue with getting {{}} to display the result.
I am trying to make a simple web app to take in a new request. This is given a randomly generated ID which is then presented in a table and is what I'm having problems displaying in the table. Despite following tutorials and attempting to debug it I am unable to, probably as I am very new to Angular and HTML. Apologies in advance.
angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + date.now()]
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="../../app.js"></script>
<script src="../../bower_components/angular/angular.js"></script>
</head>
<body ng-controller="ReqAppController">
<p><span>Add New Request | Accept <input type="checkbox" name="accept"> | Decline <input type="checkbox" name="decline"></span></p>
<table border="1">
<tr><th>REF : {{GenerateRef}}</th> <th>Producer Reference : <input type="text" name="prodRef"></th></tr>
<tr><th>Producer :
<select>
<option>EXAMPLE</option>
<option>EXAMPLE</option>
</select></th> <th>Producer Site : <input type="text"></th>
</tr>
</table>
</body>
</html>
The script locations should be working locally for me (I have tested this) as I am using Bower and Node to install, maintain and run AngularJS and the project. I have tried setting out the AJS controller several different ways so far according to different tutorials and Stack Overflow posts and this is the current rendition as it was the most up to date I could find.
Also worth noting is there have been some edits to the snippet from the code I'm running and some typos or other errors may be a result of me changing variable names to post here.
Thanks to anyone taking the time to read through.

You need to have it as,
var pegasusWebApp = angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + date.now()]
});
you are missing the declaration part. also angular reference should be loaded before loading app.js
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../app.js"></script>
DEMO
var pegasusWebApp = angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + new Date()]
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<p><span>Add New Request | Accept <input type="checkbox" name="accept"> | Decline <input type="checkbox" name="decline"></span></p>
<table border="1">
<tr><th>REF : {{GenerateRef}}</th> <th>Producer Reference : <input type="text" name="prodRef"></th></tr>
<tr><th>Producer :
<select>
<option>EXAMPLE</option>
<option>EXAMPLE</option>
</select></th> <th>Producer Site : <input type="text"></th>
</tr>
</table>
</body>
</html>

Related

how to call GAS functions in local html page

to demonstrate what im trying to do using a simple example:
<html>
<head>
<base target="_top">
</head>
<body>
<form id="uploaderForm" action="https://script.google.com/macros/.......exec Method="POST">
<input type="text" name="applicantName" id="applicantName">
<input type="text" name="applicantEmail" id="applicantEmail">
<input type="button" value="Submit">
</form>
<script>
.
.
.
google.script.run.withSuccessHandler(onFileUploaded)
.uploadFile(content, file.name, folderId);
</script>
so this is an example of the html and js page that is in my pc, not in the google app, i just called the google app in the form, and in the javascript part im calling a function called uploadFile, which is located in the google script, but obviously i get an error in the console , it says :
Uncaught ReferenceError: google is not defined
at uploadFiles (6166bff606ac6fee1994e592:67)
at HTMLInputElement.onclick
is it possible to call a GAS function inside JS that is not in the GAS html.
is what im trying to do even possible, the whoel reason im doing this is so that i can pass the username and email automatically from the database to the app, the app works if the html part is hosted in the google app script, but then i cant figure out how to pass the email and username to it because in this case i call the app using , so is it possible to pass the username and email through the iframe call, i dunno im very new to this i have so many questions, honestly the documentation wasn't helpful to me. please feel free to comment anything, everythign is helpful
Since you're just posting the form data, you can name the function you want to call as doPost()(instead of uploadFile) and it will receive the posted data. You have to republish the webapp as a new version after the modification.
I just ran it as a dialog. I returned the data back into the success handler and loaded by into the html to insure it was working.
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<body>
<form>
<input type="text" name="applicantName" id="applicantName"/>
<input type="text" name="applicantEmail" id="applicantEmail"/>
<input type="button" value="Submit" onclick="uploadfile(this.parentNode);" />
</form>
<div id="msg"></div>
<script>
function uploadfile(form) {
google.script.run
.withSuccessHandler((m) => document.getElementById("msg").innerHTML = m)
.uploadMyFile(form);
}
</script>
</body>
</html>
gs:
function uploadMyFile(obj) {
return `Applicant Name: ${obj.applicantName}<br />Applicant Email: ${obj.applicantEmail}`;
}
function launchFormDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),'Test Dialog');
}
Dialog:

Vue v-model breaks after history forward, history back

local index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form action="/sign" method="POST">
<input v-model="zip" id="zip" type="text">
<input type="submit" value="Submit">
</form>
{{ zip }}
</div>
<script>
const App = new Vue({
el: '#app',
data: {
zip: ''
},
})
</script>
</body>
</html>
We open this in chrome. After entering something in the input box, we can see in the chrome console that v-model is correct:
App.zip and document.querySelector('#zip').value are the same.
If we then navigate to a new site (www.google.com, etc.), and then hit back on the browser to go back to the index.html file,
App.zip = ''
and
document.querySelector('#zip').value is = to what we put in before.
Is this documented and expected? Can we make it so that App.zip tracks this correctly?
Thanks.
That's back-forward cache (at least the implementation on Chrome).
In a real scenario bfcache is disabled because the app is either on https or because it's not cached (header Cache-Control: no-cache, max-age=0, must-revalidate, no-store)
I could not comment, I wrote as an answer because my score was not enough. I think you should take a look here. https://vuex.vuejs.org/

Richtext not working when preview in webbrowser - lotusspellshecker not found

I try to develop and test XPages locally as much as possible because of speed. One thing that have been bugging me for years now is that richtext fields does not work when using "Preview in webbrowser".
This is the XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:inputRichText id="inputRichText1"></xp:inputRichText>
</xp:view>
The result in webbrowser is an empty screen
In developer tools it looks like this
I get the same result on two computers, I am using english version of designer, 9.0.1 FP8. It does not make a difference if lang="sv" or lang="en"
The HTML looks like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css">
<script type="text/javascript">var dojoConfig = {locale: 'sv-se', parseOnLoad: true};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.3/dojo/dojo.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.sv-se/#In.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript">dojo.require("dojo.parser")</script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspCKEditor")</script>
</head>
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/nn.nsf/Test.xsp" class="xspForm" enctype="multipart/form-data">
<input id="view:_id1:inputRichText1_h" name="view:_id1:inputRichText1_h" type="hidden" value=""><input id="view:_id1:inputRichText1_mod" name="view:_id1:inputRichText1_mod" type="hidden" value=""><div class="domino-richtext xspInputFieldRichText"><textarea rows="1" cols="1" id="view:_id1:inputRichText1" name="view:_id1:inputRichText1" dojoType="ibm.xsp.widget.layout.xspCKEditor"></textarea></div>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!eudik9rn2f!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
<script type="text/javascript">
XSP.addOnLoad(function() {
dijit.byId("view:_id1:inputRichText1").initForEdit();
function view__id1_inputRichText1_rteSubmit(thisEvent) {
var rte=dijit.byId("view:_id1:inputRichText1");
var txta=XSP.getElementById("view:_id1:inputRichText1_h");
if(!rte || !txta) return;
txta.value = rte.getValue();
return true;
}
XSP.addQuerySubmitListener("view:_id1", view__id1_inputRichText1_rteSubmit, null, "view__id1_inputRichText1_rteSubmit");
});
</script>
</body>
</html>
How can I fix this so that the Richtext fields load correctly when preview in webbrowser
Thanks
Thomas
Almost certainly, there are some plugins not available for Designer Local Preview that are expected. ".ibmxspres" in the URL points to XPages-provided resources. Many of those since 8.5.2 were delivered via OSGi plugins. This is one of the reasons that over the last 18 months I've been working with IBM to get a developer license for the Domino server. That's available now from developerWorks and it's the easiest, quickest and best practice solution.

show * when field not valid

I am at level 0 in breeze so bear with me. I dont want any ready made code as of now. I am using breeze and want to do client side validation. What i want is to show "*" near html input if data entered is not valid. Below is my code to bind to data returned from breeze.
<td > <input data-bind="value: Name" /></td>
How can i achieve this using breeze? Please do let me know if there any live example i can refer to.
I tried googling but couldnt find any examples.
Not breeze, but pure JS might help?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type='text/css'>
span.red { color:red; }
</style>
<script>
function ValidateFields() {
//usually use regex to check phones, this is only example.
// test if value is '123456' in this example.
if ('123456' == document.getElementById('inpPhone').value) {
document.getElementById('spnPhoneValid').innerHTML = '';
} else {
document.getElementById('spnPhoneValid').innerHTML = '*';
}
}
</script>
</head>
<body>
Phone Number (Only 123456):<input id='inpPhone' onchange='ValidateFields();'> <span class='red' id='spnPhoneValid'>*</span>
</body>
</html>
And of course it's for the client's usability and not instead of server-side validation!
Breeze IS NOT a tool for making html/css modifications to the page view. Breeze knows nothing about DOM.

ngTable / Angular with external JSON data, buttons not showing

I know there's quite a lot of info already on stackoverflow regarding ngTable/AngularJS, but I tried everything, and it just doesn't work.
my html is this:
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Sequencing experiments overview</title>
<script src="/LIMS/angular-1.2.14/angular.js"></script>
<script src="/LIMS/js/controllers.js"></script>
<script src="/LIMS/ng-table-master/ng-table.js"></script>
<link rel="stylesheet" href="/LIMS/ng-table-master/ng-table.css" />
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="/LIMS/style.css" />
</head>
<body ng-app="dataOverview" ng-controller="searchCtrl">
<div>
Search: <input ng-model="query">
<p><strong>Page:</strong> {{tableParams.page()}}
<p><strong>Count per page:</strong> {{tableParams.count()}}
<table ng-table="tableParams" class="table">
<tr ng-repeat="exp in $data | filter:query">
<td data-title="'id'">
{{exp.id}}
</td>
<td data-title="'name'" sortable ="'name'">
{{exp.name}}
</td>
<td data-title="'Type'">
{{exp.type}}
</td>
</tr>
</table>
</div>
</body>
</html>
my controller.js file is this:
var dataOverview = angular.module('dataOverview', ['ngTable']);
dataOverview.controller('searchCtrl', function searchCtrl($scope, $http, ngTableParams) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5 // count per page
},{
getData: function($defer,params) {
$http.get('/LIMS/index_query.php').
success(function(data, status) {
var orderedData = data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(),params.page() * params.count()));
})
}
})
});
The index_query.php returns a valid JSON object queried from a MySQL DB (will not show this here).
So, this code is almost ok i guess. It displays a table with columns and values from the DB. I can filter using the value in the filter box. However, it only shows 5 rows, and there are no buttons to go to the next 5 rows or increase the number of rows on the page. As described on the ngTable page (http://bazalt-cms.com/ng-table/example/1).
When checking console with firebug, I see an 'Uncaught TypeError: Cannot call method 'push' of undefined ' error. I assume it;s an error populating the array which should build the buttons to go from 1 page with 5 records to another? I wasted 10h on this today, so please enlighten me, I would be very grateful.