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/
Related
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.
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>
Has anyone used the Adobe Creative SDK yet? I registered my site and received the api key and plugged into my web page. It is extremely simple, basically copying their example and using my own image except i keep getting the following error:
"There was a problem loading the image URI provided to the 'url' config key. Please verify that the URI is publicly accessible, and that the image is a supported format."
I checked the Adobe site with no luck and I have a small 354 x 384 image i am using.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aviary Test</title>
<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'MY KEY',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
</head>
<body>
<div id='injection_site'></div>
<img id='image1' src='desert.jpg'/>
<!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'Desert.jpg');" /></p>
</body>
</html>
I am having the same problem.
Everything works, but when you try to load an image from a different location you get the "there was a problem loading the image uri provided to the 'url' config key" error.
My site looks like this:
full (full sized image folder)
thumb (folder)
index.html
You can see the error here: http://koffid.nl/memetests/sdk2/
When you use the Edit Photo button which uses an external URL to the image it works.
When you click on the image which uses my file structure instead of the button the error shows up.
So this doesn't work:
<img id='image1' src='thumb/feather_thumb.jpg' value='Edit photo' onclick="return launchEditor('image1', 'full/feather_default.jpg');" /></p>
And this does work:
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>
You can't use a relative url, you need to pass the full url of the image, ie. http://example.com/images/myimage.jpg
I have a simple html page generated by a servlet on websphere .
<!DOCTYPE html>
<html>
<head>
<title>Server Management</title>
<meta http-equiv='refresh' content='3;URL="console"' />
<script>
function setVal(command, i){
var elmnt = document.getElementById('myvalue')
elmnt.value = command + '-' + i;
}
</script>
</head>
<body>
<form action='console'>
<button type='submit' onclick='setVal("stop", this.value)' name='stop' value='0'>Stop</button>
<button type='submit' onclick='setVal("start", this.value)' name='start' value='0'>Start</button>
<button type='submit' onclick='setVal("status", this.value)' name='status' value='0'>Status</button>
<div style='display:inline'>Server 3 is <div style='display:inline;color:green'>UP</div> </div>
<br/>
<input type='hidden' name='myvalue' id='myvalue' value='bla'/>
</form>
</body>
</html>
The thing is, when I call localhost(or 127.0.0.1) to upload the page everithing works as expected, and the right values are sent
http://localhost:9081/MyApp/MyAction?status=0&myvalue=status-0
BUT when I use the hostname (or IP) instead of localhost the element's innerHTML is sent rather then it's value, which of course cause errors.
http://myhostname:9081/MyApp/MyAction?status=Status&myvalue=status-Status
What should I do?
It's all about the IE version... Turning on competability mode fixed the issue.
A better solution is adding
<meta http-equiv="X-UA-Compatible" content="IE=8" />
to the HTML.
Thank you Microsoft for the great apps you give us
A very peculiar bug in a simple html form. After changing an option, button has to be clicked twice to submit the form. Button is focused after clicking once, but form is not submitted. It's only this way in IE8 and works fine in Chrome and FF.
PAY ATTENTION TO 'g^' right before <select>. It has to be a letter or number followed by a symbol to generate this bug. For example, 'a#','f$','3(' all create the same bug. Otherwise it works fine. BTW, if you don't change option and click button right away,there won't be any bug.
Very strange, huh?
<form method="post" action="match.php">
g^
<select>
<option>Select</option>
<option>English</option>
<option>French</option>
</select>
<input type="submit" value="Go" />
</form>
I am providing the code here, which is working fine. Check this code whether this code also is giving you the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Sample page for language selection </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p{display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// language as an array
var language = ['Arabic', 'Cantonese', 'Chinese', 'English', 'French', 'German', 'Greek', 'Hebrew', 'Hindi', 'Italian', 'Japanese', 'Korean', 'Malay', 'Polish', 'Portuguese', 'Russian', 'Spanish', 'Thai', 'Turkish', 'Urdu', 'Vietnamese'];
$('#muyu').append('<option value=0>Select</option>');
//loop through array
for (i in language) //js unique statement for iterate array
{
$('#muyu').append($('<option>', { id: 'muyu' + i, val: language[i], html: language[i] })) }
$('form').submit(function() {
// alert('I am being called!'); // check if submit event is triggered
if ($('#muyu').val() == 0) { $('#muyu_error').show(); } else { $('#muyu_error').hide(); return true; }
return false;
});
})
</script>
</head>
<body>
<form method="post" action="PostProb">
I am fluent in <select name='muyu' id='muyu'></select>
<p id='muyu_error'>Tell us your native language</p>
<input type="submit" value="Go"/>
</form>
</body>
</html>