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.
Related
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/
Being new to Dojo I'm trying to initialize a Dijit form with values, e.g. read from storage, XHR etc.
However, invoking form.setFormValues() causes an error TypeError: invalid 'in' operand this.formWidgets thrown by http://yandex.st/dojo/1.7.3/dojox//form/manager/_Mixin.js
Is there anything I'm doing wrong or is this a Dojo issue? (The complete sample is also found here: http://pastebin.com/7LUHr3iA)
<!-- language-all: lang-html -->
`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/javascript">
dojoConfig = {async: true,parseOnLoad: true};
</script>
<script type="text/javascript" src="http://yandex.st/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dijit/form/TextBox","dijit/form/Button","dojox/form/Manager",
"dojo/parser","dojo/dom","dijit/registry"], function () {});
</script>
</head>
<body class="claro">
<form id="myForm" method="post" data-dojo-type="dojox.form.Manager">
<label for="name">Name</label>
<input id="name" name="nameField" data-dojo-type="dijit.form.TextBox"/><br/>
<label for="surname">Surname</label>
<input id="surname" name="surnameField" data-dojo-type="dijit.form.TextBox"/><br/>
<button data-dojo-type="dijit.form.Button">Submit</button>
<script type="dojo/method" event="startup">
var form = dijit.byId("myForm");
form.setFormValues({
nameField: "Hello",
surnameField: "World"
});
</script>
</form>
</body>
</html>
`
Dojo 1.7 is asynchronous. Code should take the form:
require(["dependency"], function(dep) {
// use dependency
});
There is no reason to believe dojox/form/Manager would be loaded when you try to reference it further down the page.
The registry is the correct way to reference the widget, not 1.6 style code of the form dijit.byId. See livedocs.
See also the dojo/domReady! plugin.
I am writing a simple HTML code which uses YUI autocomplete (to display suggestion as you type like Google). But a <select> block is getting displayed over the suggestions list in IE6 only.
It is working fine in other browsers.
I used bgiframe to avoid it because of z-index bug in IE6 but had no luck.
My simple code is here:
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#myContainer').bgiframe();
});
</script>
<style type="text/css">
#myAutoComplete {
width:25em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
</head>
<body>
<h1>Autocomplete using YUI !</h1>
<label for="myInput">Search names in our database:</label>
<div id="myAutoComplete" class="yui-skin-sam">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<br>
<div>
<form action="#" method="get" accept-charset="utf-8">
<select>
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</form>
</div>
</body>
Here select is displayed over myContainer (myContainer displays populated suggestions).
I know I am making some blunder.
Please help me to figure it out.
One thing you can do is hide the <select> (use visibility:hidden as not to mess up the layout) at the beginning of the process and show it at the end.
BTW: The likelihood of finding another StackOverflow user using YUI + jQuery + bgiframe + ie6 is quite low. Most users like to help with debugging code, not plug-ins.
jQuery and YUI live in separate namespaces so there shouldn't theoretically be a problem. Are you sure there are no JavaScript errors? Are all the libraries loaded correctly?
Could use jQuery autocomplete instead?
Edit: You can configure the YUI autocomplete to use an iFrame! It kind of works in that it does hide the <select> but not instantly. This is probably the best solution since it does not needs jQuery or bgiframe.
Edit 2: I was not happy with the speed at which the <iframe> was created by YUI so came up with this hack! Here is a complete solution that seems to work in IE6 for me. THe problem is that YUI is in control of the #myContainer which seems to break the bgiframe that jQuery sets up. So I opted to simply manipulate the height of #myContainer with the YUI method hooks. You may need to change this value to fit your layout, but I'm hoping it will work for you.
Sorry the CSS alteration is jQuery. I have never used YUI before and haven't got any idea how to change CSS properties in YUI :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="myAutoComplete">
<label for="myInput">Enter a state:</label><br/>
<input id="myInput" type="text"/>
<div id="myContainer"></div>
</div>
<div>
<form action="#" method="get" accept-charset="utf-8">
<p>
<select>
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</p>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#myContainer').bgiframe();
});
YAHOO.example.Data = {
arrayStates: [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'Wyoming'
]
}
YAHOO.example.BasicLocal = function() {
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
var restoreHeight = function(sType, aArgs) {
$('#myContainer').css({height:'auto'});
};
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.prehighlightClassName = "yui-ac-prehighlight";
// oAC.useIFrame = true; // works but changes the container into an iFrame a bit too late for my liking
oAC.doBeforeExpandContainer = function () {
$('#myContainer').css({height:'50px'}); // might need to play around with this value
return true;
}
// restore height
oAC.containerCollapseEvent.subscribe(restoreHeight);
oAC.useShadow = true;
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
</body>
</html>
Hey So I have a project for school where I have to create a website and in the website there has to be a quiz. The questions are asking for numbers as answers, so I cannot use radio buttons. I know how to make textboxes and submit buttons but I dont think the box is getting the information, so I was wondering if someone could help me fix my code
Here is the end of what I have
*This is not the question I am asking this is just so I can get the code working
<P><INPUT TYPE=SUBMIT VALUE="Submit"> </FORM>
<SCRIPT type=text/javascript>
</FORM>function getAnswer(input) { if (input == "3.14") {alert ("Congradulations")} else {alert ("No that's incorrect, please try again...")}
}
</SCRIPT>
You surely haven't given us the complete code we need to answer your question, but here's all the wrong things I can see in your code snippet fixed.
The most obvious wrong thing was the text </FORM> placed inside your <script> tag.
I also fixed your misspelling Congradulations, because I imagine that wouldn't go down too well :)
<p><input type="submit" value="Submit" /></p>
</form>
<script type="text/javascript">
function getAnswer(input) {
if (input == "3.14") { //What is the value of Pi to 2 decimal places?
alert("Congratulations");
} else {
alert("No that's incorrect, please try again...");
}
}
</script>
If this isn't helpful, please show us more of your file.
#Olivia try this 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>Untitled Document</title><br />
</head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="getAnswer();"
<p>
<label for="textfield"></label>
Q. What is the value of Pi to 2 decimal places?</p>
<p>Answer
<input type="text" name="textfield1" id="textfield1" />
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p>
</form>
<script type="text/javascript">
function getAnswer(input) {
if (document.form1.textfield1.value == "3.14") { //What is the value of Pi to 2 decimal places?
alert("Congratulations");
} else {
alert("No that's incorrect, please try again...");
}
}
</script>
</body>
</html>
In form submit I give an action to call the function.
onsubmit="getAnswer();"
Inside the function I am getting the value as
document.form1.textfield1.value
Then simple steps.
Cheers
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>