How to excecute a <p:remoteCommand> from javascript - javascript

I have a trouble when I try to excecute a remote command from a javascript code, always in the console I have the erro, ReferenceError: notificar is not defined and I don’t know why, this is my code, thanks
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Hello from Facelets
<p:growl id="notifyGrowl" widgetVar="notifyGrowl" life="3000" showDetail="true"/>
<h:form>
<p:remoteCommand name="notificar" actionListener="#{remoteCommandView.execute}" update="notifyGrowl" />
</h:form>
</h:body>
<script type="text/javascript">
if (window.WebSocket) {
var ws = new WebSocket("ws://localhost:8080/SEIPA3/push");
} else {
console.log(" Browser doesn't support it");
}
ws.onmessage = function (event) {
notificar();
};
</script>

Guys I solved this problem, what happened was that I ran my application and as I was in the browser, I went to my client directly from the url by typing the address where he is staying, doing an inspection of the source code of the page of the cliene I realize that I was still showing the code of primefaces as such, which is not right, should have been processed and displayed as pure html, so put a button from my index to send me to the client, so that now when doing the inspection showed me the html code already processed, and everything went well. thanks.

Related

JS acees variable another HTML

I'm actually trying to access variable of other HTML file using JS.
I mean, I have a file (file1.htm) that open dialog box and I would like to send information of the file selected to another file (file2.htm) and modify a value in this file. I found solution but only for JS files, and not HTML :/
I had already done it with 2 files but file1a was the parent of the other, so I used
parent.framWin = window; in file2a and
framWin.divX=document.getElementById("one").offsetWidth; for example in file1a to modify the variable divX in file2a (I'm pretty sure this is not the best solution, but it works ;) ). Here, in this case, file1 and file2 are not parent, and they are just located in the same folder.
I tried <script type="text/javascript" src="file1.htm"> to access var but it doesn't seem to work.
Do you have any idea how I can accomplish this?
Thanks a lot!
(Here's my code :
file1.htm :
<!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" xml:lang="en" lang="en">
<head>
<title>SiteMap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
</style>
<script type="text/javascript">
<!--
function OK(e){
var name = document.getElementById("dialog").value;
//Here I would like to do something like File2.NameSpace1 = name;
//And File2.modifyMyName(); // But here, it's another question, to use JS script in another file ;)
}
//-->
</script>
</head>
<body >
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile' onchange="OK()" id="dialog">
</form>
</body>
</html>
and file2.htm:
<!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" xml:lang="en" lang="en">
<head>
<title>SiteMap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
<!--
var NameSpace1;
function modifyMyName(){
document.GetElementById("first").src = NameSpace1;
}
//-->
</script>
</head>
<body>
<div>
<img src ="" id="first" />
</div>
</body>
I know this won't work properly because there are some errors here in the syntax. But the problem is visible ;)
Thanks again :)
You can't simply modify the content of file on the server using client side code.
The examples you've cited just change the data that is loaded into the browser at the time the code runs while leaving the data on the server untouched.
There are two approaches you can take to this:
Store the changes in the browser.
In page one, use localstorage to record information about the change you want to make. (You'd probably want to convert the image into a data: scheme URL to achieve this given your example code).
In page two, have some more JS that reads from localstorage and uses that information to make the change to itself after it loads.
Send the changes to the server.
Submit a form (so you don't need to use client side code at all) or use Ajax to send information about the change to the server.
Have server side code read it and then store it in a session (if you want the change to be on a per-user basis) or somewhere more permanent (in a database if you are sensible but you could modify the file directly) (if you want it to be shared between users).
Page two would then be a server side program that would read that data and use it to generate the page.
You can use localStorage to perform this operation.
function OK(e){
var name = document.getElementById("dialog").value;
window.localStorage.setItem('dialogValue', "Name");
}
And In your file2.html
function modifyMyName(){
var NameSpace1 = window.localStorage.getItem('dialogValue');
document.GetElementById("first").src = NameSpace1;
}

Jscolor stops working after first postback of fresh deploy, but continues to work after postback of a reload

Could anyone tell me something helpful to the following behavior in JSF with Jscolor component?
I have got this simple xhtml code:
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>RDFa test</title>
</h:head>
<h:body>
<script type="text/javascript" src="resources/js/jscolor/jscolor.js"/>
<h:form>
<h:commandButton class="color" value="ok"/>
<h:commandButton value="server" type="submit" action="#{testBean.tmp}"/>
</h:form>
</h:body>
</html>
TestBean.java:
#ManagedBean
#SessionScoped
public class TestBean implements Serializable {
public TestBean() {}
public void tmp() {
System.out.println("SERVER!");
}
}
If I do the first deployment and click on the "server" button, the Jscolor will go away and does not work (it is like destroying the javascript on the page)! If I then reload the page and click on the same button, the Jscolor works normally. There's no exception in server log, nor any error in Firebug JS console. How is this caused and how can I solve it?
EDIT:
I am not the only developer, who straggles with this issue. Here tyhand describes exactly, what I mean: http://www.tek-tips.com/viewthread.cfm?qid=1641380
COuld you please explain me what is happening and how to solve it?
Finally I found a solution. It is so easy!!! I have to add before all input fields with class='color' (binding fileds to the jscolor) this code:
<script>jscolor.init();</script>
I wanted to use jscolor inside a repeater that was inside an update panel in a custom DNN module.
None of the various solutions I saw here worked...I finally figured it out.
At top of HTML in your usercontrol:
Use <dnn:DNNJsInclude..... /> to point to your jscolor.js file, then add
<script type="text/javascript">
function pageLoad(sender, args) {
$(".jscolor").each(function (i, obj) {
var picker = new jscolor(obj);
});
};

JavaScript object properties are "sometimes" undefined

I am very confused.
I created the following script which is located at http://tapmeister.com/test/dom.html. For some unknown reason, tinymce.editors.ta1 and tinymce.editors[0] show up as undefined, and attempting to use a method under them results in an error. But when I inspect tinymce or tinymce.editors using FireBug, I see them in the DOM.
So, I create a jsfiddle http://jsfiddle.net/JWyWM/ to show the people on stackoverflow. But when I test it out, tinymce.editors.ta1 and tinymce.editors[0] are no longer undefined, and the methods work without error.
What is going on??? Maybe something to do with public/protected/private properties? How do I access methods such as tinymce.editors.ta1.hide()? Thank you!!!
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({selector: "textarea#ta1"});
tinymce.init({selector: "textarea#ta2"});
console.log(tinymce);
console.log(tinymce.editors);
console.log(tinymce.editors.ta1);
console.log(tinymce.editors[0]);
//tinymce.editors.ta1.hide();
//alert('pause');
//tinymce.editors.ta1.show();
</script>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
</body>
</html>
TinyMCE doesn't do all of the setup work immediately when you call init. It provides a callback, setup, to tell you when the work is done.
So if you provide a setup callback, you can interact with the editor instance then.
Here's an example (I've also moved your scripts to the end, which is best practice regardless):
Live Example | Live Source
<!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=ISO-8859-1" />
<title>Testing</title>
</head>
<body>
<form>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
</form>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#ta1, #ta2",
setup: function(e) {
console.log("Editor " + e.id + " is ready");
}
});
</script>
</body>
</html>
Now, if you want to actually access the editor instance, bizarrely TinyMCE doesn't add it to tinymce.editors until after calling the setup function. But if you throw in a brief yield, you're all set. Here's the above with a changed setup function:
Live Copy | Live Source
setup: function(e) {
// Bizarrely, TinyMCE calls `setup` *before* adding
// the relevant editor to `tinymce.editors`,
// so we have to yield briefly
console.log("Editor " + e.id + " is ready");
if (e.id === "ta2") {
console.log("It's ta2, I'll hide it in a moment.");
setTimeout(function() {
tinymce.editors[e.id].hide();
}, 0);
}
}
So why did it work on jsFiddle? Well, jsFiddle has a truly brain dead surprising default setting, which is to put all of your script in a window#load callback function. window#load happens very late in the load process, after all external resources have been loaded. (You can see that in the jsFiddle UI, it's the second drop-down list on the left.) So apparently TinyMCE was completely ready at that point, where it isn't earlier in the cycle.
Side note: 99.9% of the time, there is absolutely no point in supplying a tag name with an id selector, e.g. textarea#ta1. id values are unique, so you don't have to qualify them unless you explicitly want to avoid matching an element that may sometimes have one tag name, or other times have another, which is a pretty unusual use case.
There's a large chance that your script is running before tinyMCE has actually loaded. It might be the case that it loads faster from your test site so that is why it works.
Use as a quick check.

Is it possible to change firefox bidi numeral by javascript?

Is it possible to change firefox bidi numeral by javascript? I need it to display numbers in a report created by PHP.
From a normal web page, no.
Here is an old article about saving an html file in the mozilla RES folder that may still work
http://forums.mozillazine.org/viewtopic.php?f=7&t=87755
Make a file in your Firefox installation folder, under the res directory, called for example 'bidi.htm',
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" lang="en" xml:lang="en">
<head>
<title>Bidi Toggle</title>
<script type="text/javascript">
// <![CDATA[
function loaded() {
netscape.security.PrivilegeManager
.enablePrivilege("UniversalBrowserAccess UniversalXPConnect");
var prefs = Components.classes["#mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefBranch);
if (prefs.getIntPref("bidi.numeral") == 3) {
prefs.setIntPref("bidi.numeral", 4);
}
else {
prefs.setIntPref("bidi.numeral", 3);
}
self.close();
};
self.onload = loaded;
// ]]>
</script>
</head>
<body>
Please wait...
</body>
</html>
and have a bookmarklet
javascript: void(window.open('resource:///res/bidi.htm'));

Adding divs to the HTML body using Lift

I have been playing around with Scala/Lift/Comet/Ajax etc. recently. I came across a problem which boils down to this:
Summary
I want to update a specific div (by id) when a certain event occurs. If the div does not exist yet, it must be created and appended to the HTML body.
Currently I cannot get this to work when using the Lift framework.
Source File
LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
updateOrCreateMouseDiv('123', 'coords')
});
function updateOrCreateMouseDiv(uniqueId, coords) {
if ($('#mouse_'+uniqueId).length == 0) {
$('body').append('<div id=' + uniqueId + '>' + coords + '</div>');
}
$('#mouse_'+uniqueId).html(coords)
}
// ]]>
</script>
</head>
<body></body>
</html>
The Error
If I open the above file directly in a browser (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) it works i.e. a new div is created.
But if I run it through Lift/Jetty (http://localhost:8080/static/mouseViewTest) I get the following JavaScript error:
Chrome:
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
Firefox (Firebug):
An invalid or illegal string was specified" code: "12
Comparing the Sources in Browser
When comparing the page sources in the browser, I can see only one difference, namely: Lift adds the following JavaScript just before the closing </body> tag:
<script type="text/javascript" src="/ajax_request/liftAjax.js"></script>
<script type="text/javascript">
// <![CDATA[
var lift_page = "F320717045475W3A";
// ]]>
</script>
Questions
Does anyone have an idea why this happens?
If I would want to move the JavaScript code into the Scala file (using Lift's JavaScript and jQuery support), what would the code look like?
Please note: When I used Jq("body") ~> JqAppend() to create new divs, it worked. I just didn't know how to check whether the div id already existed. Thats why I moved the code into the template, planning on using Lift's Call function to execute the JS function. And thats when these problems started...
Thanks!
I recently ran into a similar problem and, from what I've gathered, the problem is because the page when served by lift is served as XHTML and there are some issues when writing to the DOM if the page is XHTML vs. HTML. I don't know whether this is a bug with jQuery or Safari or if it's just something that's not possible in XHTML, but a quick way to fix it is to modify your Boot.scala to tell Lift to not use XHTML as the mime type with this line:
LiftRules.useXhtmlMimeType = false

Categories

Resources