as mentioned in the title I need a specific javascript function to be called in html, the function changes constantly upon pressing start and it looks the following:
<dt style="width: 120px">Start 1:</dt> <dd style="margin-left: 150px">{{ start.number1 }}</dd>
{{ start.number1 }} is the function I need to be displayed in html, could you help me with that please? Thanks in advance.
Using curly brackets to bind a Javascript variable into your HTML view is something very typical of javascript frameworks that provide Data Binding such as AngularJS or EmberJS
This might be what you're looking for.
There are of course other ways of doing this, such as the new Object.observe() function that's available in Chrome, but it will take a while until its widely supported.
Related
I have a HTML page where a user is able to edit a HTML resource (using ACE Editor). Within this HTML source, there is a <script>-tag, which does some pretty basic stuff.
Is there any elegant solution to parse the script tag in order to (e.g.) evaluate the variables used within the script tag? For "normal" tags I use parseHTML() to have the html as a jQuery object.
From this example, I would like to retrieve the value of $myVal (which is "f00") and write it to #myLabel:
<textarea id="myScript" rows="5" readonly>
<script>
$myVal = "f00";
</script>
</textarea>
<label id="myLabel">Hello</label>
$(function(){
$scriptVar = $('#myScript').text;
// parse the $scriptVar
// retrieve the value of, $myVal, write it to #myLabel
//$myParsedValue = ???
//$('#myLabel').text('bar!');
});
And here is the fiddle: https://jsfiddle.net/stepdown/jqcut0sn/
Is this possible at all? I don't really care about vanilla js, jQuery, regex or maybe even an external library for that purpose.
Thanks to #JeremyThille, who pointed me to the right direction. I found out, what I want to achieve is possible through jQuerys $.globalEval() - see the official documentation.
Basically what globalEval() does: it runs the script which is written in the <textarea> and makes the variables / functions globally accessible.
IMPORTANT: this implies, that syntax errors (etc) by the user will break the evaluation, and sequential functionality could be flawed. Also, the new variables are GLOBAL, so basically a user could rewrite scripts on the hosting page. (In my case both problems are of minor importance, since this is an internal application for trained users - they also have syntax highlighting through the amazing ACE editor. But I wanted to make sure to point it out. Also, there are several articles regarding the risks/ouch-moments when using eval()...)
I updated the fiddle to achieve what I wanted: https://jsfiddle.net/stepdown/Lxz7q6uv/
HTML:
<textarea id="myScript" rows="5" readonly>
$myVal = "f00";
</textarea>
<hr />
<label id="myLabel">Hello</label>
Script:
$(function(){
var myScriptContent = $('#myScript').text();
$.globalEval(myScriptContent);
console.log($myVal);
$('#myLabel').text($myVal);
});
I would like to know how I can pass JSF managed bean properties to a JavaScript function.
Something like this:
<script>
function actualizaMenu(key){
#{linkedMenu.setKey(key)}
}
</script>
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
This is not exactly "passing" of JSF variables. This is just printing JSF variables as if they are JavaScript variables/values. You know, JSF and JS do not run in sync at all. JSF runs in webserver and produces HTML/CSS/JS code which in turn runs in webbrowser once arrived over there.
Your concrete problem is most likely caused because you wrote JSF code in such way that it generates invalid JS syntax. An easy way to verify that is by just checking the JSF-generated HTML output which you can find by rightclick, View Source in browser, and by checking if you don't see any syntax error reports in the JS console in browser which you can find by pressing F12 in Chrome/IE9+/Firefox23+.
Imagine that #{entity.key} here
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
prints a Java string variable like "foo", then the generated HTML would look like
<a onclick="actualizaMenu(foo)">some name</a>
But hey, look, that represents a JavaScript variable named foo, not a JS string value! So if you actually want to ultimately end up as
<a onclick="actualizaMenu('foo')">some name</a>
then you should instruct JSF to generate exactly that HTML:
<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>
Beware of special characters in the JSF variable though. You can use OmniFaces of:escapeJS() function for that.
Unrelated to the concrete problem, the concrete implementation of actualizaMenu() makes no sense. You seem to be attempting to set a bean property. You should not use JS for that, but a <h:commandLink> instead.
<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />
Nest if necessary a <f:ajax> to make it asynchronous.
I would recommend using event binding with jQuery and the data attribute on elements to get the same result (assuming you use jQuery):
<script>
function actualizaMenu(key){
/* Logic here ... */
}
$(document).ready(function(){
$('.menuItem').click(function(){
var key = $(this).data('key');
actualizaMenu(key);
);
});
</script>
...
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
And, as pointed out elsewhere, unless #{linkedMenu.setKey(key)} actually returns a piece of javascript (which seams unlikely and would probably be really bad even if it did) you need to fix the function as well.
I know this question is old, but to those who are still looking there's an alternative.
If you are using primefaces just try this out.
Request Context
I am experiencing odd behavior when data linking an object to a form that led me to re-question what exactly is being data bound?
Basically I have a form that creates new Companies as well as updates them. The actual creation/update is done via ajax, which is why I am using the same form for both purposes. In the case when I have to create a company, everything works as I expect. However when I have to update a company, things don't work like how I expect them to. Please have a look at the following code.
Here is my sample Form HTML:
<div id="result"></div>
<script type="text/x-jsrender" id="CompanyFormTemplate">
<form>
<input type="text" data-link="Company.Name" />
</form>
</script>
Here is my Javascript code:
var app = new CompanyFormContext();
function CompanyFormContext() {
this.Company = {
Name: ''
};
this.setCompany = function (company) {
if (company) {
$.observable(this).setProperty('Company', company);
}
};
};
$(function () {
initPage();
...
if (...) {
// we need to update company information
app.setCompany({ Name: 'Company ABC' });
}
});
function initPage() {
var template = $.templates('#CompanyFormTemplate');
template.link("#result", app);
}
Instead of the form input showing 'Company ABC', it is empty. However if I enter anything in it, then the Company.Name value does change! But while I want the input to data bind to Name property of my Company object, I also want it to be aware of any changes made to the (parent) Company object and update it's data binding to it's Name property accordingly.
So my question is how should I change the way I am writing this code so that I can achieve a data bound both on the root object as well as the property?
The issue you were having was because in your scenario, you have paths like Company.Name for which you want to data-link to changes not only of the leaf property but also to changes involving replacing objects higher up in the path (in this case the Company).
For that you need to use the syntax data-link="Company^Path".
See the section Paths: leaf changes or deep changes in this documentation topic:
http://www.jsviews.com/#observe#deep.
See also the examples such as Example: JsViews with plain objects and array in this topic: http://www.jsviews.com/#explore/objectsorvm.
Here is an update of your jsfiddle, using that syntax: https://jsfiddle.net/msd5oov9/2/.
BTW, FWIW, in your fix using {^{for}} you didn't have to use a second template - you could alternatively have written:
<form class="form-horizontal">
{^{for Company}}
...
<input type="text" data-link="Name" />
{{/for}}
</form>
To respond also to your follow-up question in your comment below, you can associate any 'block' tag with a template. Using tmpl=... on the tag means you have decided to separate what would have been the block content into a separate re-usable template. (A 'partial', if you will). The data context for that template will be the same as it would have been within the block.
So specifically, {{include}} {{if}} and {{else}} tags do not move the data context, but {{for}} and {{props}} do. With custom tags you can decide...
So in your case you could use either {^{for Company tmpl=.../}} or {{include tmpl=.../}} but in the second case your other template that you reference would use <input type="text" data-link="Company^Name" /> rather than <input type="text" data-link="Name" />.
Here are some relevant links:
http://www.jsviews.com/#samples/jsr/composition/tmpl
http://www.jsviews.com/#includetag
http://www.jsviews.com/#fortag
I discovered one way to achieve this. It might seem complex at first but it will make sense once you understand it properly.
(PS: I wish there was a sample like this. I might just blog about it.)
HTML Markup:
<script type="text/x-jsrender" id="CompanyFormTemplate">
<form>
{^{for Company tmpl="#CompanyDetailsTemplate" /}
</form>
</script>
<script type="text/x-jsrender" id="CompanyDetailsTemplate">
<input type="text" data-link="Name" />
</script>
Javascript: No changes needed from code above.
Okay so as I said, the solution might look complicated but it turns out all I really had to do was to set up data binding first on the Company object, and then to it's property objects. I wonder if there is a more elegant solution (i.e. one in which all of this can be achieved in a single template) however this solution ensures that data-binding is happening both on the parent object as well as its' properties.
I have posted a JsFiddle for this solution, so if anyone comes across this problem and wants to understand how this solution would work for their particular problem, they will be able to play with a working solution.
I am trying to make dynamic code examples for our api that can be constructed from from input html elements.
A paired down example looks like this, I give the user an input to name the device they would like to create.
<input class="observable-input" data-key="deviceName" type="text" value="deviceKey" />
I would then like that input to update code examples (replacing the device name in the example with the one the user inputs).
<code lang="python">
device = { "name": "<span data-observeKey="deviceName">Name</span>" }
client.createDevicewrite(device)
</code>
I have all of the code setup for observing a change in the input and updating the code examples, this works great. All of the syntax highlighters I have looked at, usually chop the snippet up and rerender the example wrapped with its own html (for styling). Is there an option/configurable way to get a syntax highlighter to not strip the these tags, or is there a different approach I should be looking at for preserving the syntax highlighting and still supporting dynamic updates without having to do a full text search of each snippet's rendered tags.
The example output of the pygment (current syntax highlighter I'm using).
<li>
<div class="line">
<span class="n">device</span>
<span class="o">=</span>
<span class="n">{</span>
<span class="s">"name"</span>
<span class="p">:</span>
<span class="s">"Name"</span>
<span class="n">}</span>
</div>
</li>
I decided to just go with a brute force approach, it ended up being decently performant, ill leave my code here if anyone is interested in what I did
https://gist.github.com/selecsosi/5d41dae843b9dea4888f
Since i use backbone, lodash, and jquery as my base app frameworks the gist uses those. I have a manager which will push updates from inputs to spans on the page which I use to dynamically update the code examples
I would like to know how I can pass JSF managed bean properties to a JavaScript function.
Something like this:
<script>
function actualizaMenu(key){
#{linkedMenu.setKey(key)}
}
</script>
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
This is not exactly "passing" of JSF variables. This is just printing JSF variables as if they are JavaScript variables/values. You know, JSF and JS do not run in sync at all. JSF runs in webserver and produces HTML/CSS/JS code which in turn runs in webbrowser once arrived over there.
Your concrete problem is most likely caused because you wrote JSF code in such way that it generates invalid JS syntax. An easy way to verify that is by just checking the JSF-generated HTML output which you can find by rightclick, View Source in browser, and by checking if you don't see any syntax error reports in the JS console in browser which you can find by pressing F12 in Chrome/IE9+/Firefox23+.
Imagine that #{entity.key} here
<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
prints a Java string variable like "foo", then the generated HTML would look like
<a onclick="actualizaMenu(foo)">some name</a>
But hey, look, that represents a JavaScript variable named foo, not a JS string value! So if you actually want to ultimately end up as
<a onclick="actualizaMenu('foo')">some name</a>
then you should instruct JSF to generate exactly that HTML:
<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>
Beware of special characters in the JSF variable though. You can use OmniFaces of:escapeJS() function for that.
Unrelated to the concrete problem, the concrete implementation of actualizaMenu() makes no sense. You seem to be attempting to set a bean property. You should not use JS for that, but a <h:commandLink> instead.
<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />
Nest if necessary a <f:ajax> to make it asynchronous.
I would recommend using event binding with jQuery and the data attribute on elements to get the same result (assuming you use jQuery):
<script>
function actualizaMenu(key){
/* Logic here ... */
}
$(document).ready(function(){
$('.menuItem').click(function(){
var key = $(this).data('key');
actualizaMenu(key);
);
});
</script>
...
<ul>
<ui:repeat value="#{moduleList.modulos}" var="entity">
<li>
<a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a>
</li>
</ui:repeat>
</ul>
And, as pointed out elsewhere, unless #{linkedMenu.setKey(key)} actually returns a piece of javascript (which seams unlikely and would probably be really bad even if it did) you need to fix the function as well.
I know this question is old, but to those who are still looking there's an alternative.
If you are using primefaces just try this out.
Request Context