I'm trying to use:
<script type="text/javascript">
function myfunc() {
var param = 4;
alert("OK");
}
</script>
I call the function like this:
<a4j:jsFunction name="myfunc">
<a4j:actionparam name="param" assignTo="#{MyBean.myfield}"/>
</a4j:jsFunction>
But it does not work. In what may be the reason?
You misunderstood the purpose of <a4j:jsFunction>. It autogenerates a JavaScript function which you can then call from any JavaScript code in your view.
Your example,
<a4j:jsFunction name="myfunc">
<a4j:actionparam name="param" assignTo="#{MyBean.myfield}"/>
</a4j:jsFunction>
will autogenerate the following function
<script>
function myfunc(param) {
// Here some specific JSF Ajax script which assigns "param"
// to a managed bean property #{MyBean.myfield}
}
</script>
You do not need to define it yourself. You only need to invoke it yourself from some JavaScript code elsewhere. For example,
<span onclick="myfunc(4)">click here to set 4 in MyBean.myfield</span>
or
<script>
function someOtherFunction() {
var param = 4;
myfunc(param);
}
</script>
which is in turn to be used like
<span onclick="someOtherFunction()">click here to call someOtherFunction() which will in turn set 4 in MyBean.myfield</span>
See also:
<a4j:jsFunction> component reference
<a4j:jsFunction> showcase example
<a4j:jsFunction
is not used to call an function, it is used to define an function.
So, if MyBean.myfield is an int-field you can set the value 2 using:
<script>myfunc(2);</sript>
There's a bunch of different ways to call that function.
Two you will find particularly useful are:
This:
<body onload="myfunc();">
Example: http://ultimatemmo.webege.com/Test.html
and this:
Click here to execute function
Example: http://ultimatemmo.webege.com/Test2.html
Edit: added examples.
According you snippet of code, you have never called your function. Add myfunc(); within your script tag.
Related
I want to call the JavaScript function "Goto" like this:
javascript:Goto('DM_NEW_OBJECT.ASPX?DM_CAT_ID=2063&DM_PARENT_ID=2217&INPUTSELECTION=&DM_OBJECT_ID=0&PACK_ID=0&CASE_ID=0&mode=0&SITE=Default');
the function is located in the DefaultGeneral.aspx page, and I need to call it from within a WebBrowser control:
webBrowser1.Navigate("http://mySite/DefaultGeneral.aspx");
Do you have any idea?
Since you are using a WebBrowser object, I will assume that this is actually a Windows forms question and not an asp.net question.
You should look at the InvokeScript function of the web browser.
Let's say your webpage has the following function:
WITHOUT PARAMETERS:
<script type="text/javascript">
// Function Without Parameters
function JavaScriptFunctionWithoutParameters() {
outputID.innerHTML = "JavaScript function called!";
}
</script>
You would want to call it the following way:
this.webBrowser.InvokeScript("JavaScriptFunctionWithoutParameters");
WITH PARAMETERS:
<script type="text/javascript">
// Function With Parameters
function Goto(someParameter) {
outputID.innerHTML = someParameter;
}
</script>
You would call it like this:
object[] param = new object[1];
param [0] = "DM_NEW_OBJECT.ASPX?DM_CAT_ID=2063&DM_PARENT_ID=2217&INPUTSELECTION=&DM_OBJECT_ID=0&PACK_ID=0&CASE_ID=0&mode=0&SITE=Default";
this.webBrowser1.Document.InvokeScript("Goto", param );
In C# you have to do something like this:
Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);
Or this:
ClientScript.RegisterStartupScript(GetType(),"hwa","alert('Hello World');",true);
Check out this doc...
http://msdn.microsoft.com/en-us/library/system.web.ui.page.clientscript(v=vs.110).aspx
Maybe ... put the javascript:Goto into the
<body onload="">
... inside the quotes.
I can't find out what is the problem with this JSFiddle.
HTML:
<input type="button" value="test" onclick="test()">
JavaScript:
function test(){alert("test");}
And when I click on button - nothing happened. The console says "test not defined"
I've read the JSFiddle documentation - there it says that JS code is added to <head> and HTML code is added to <body> (so this JS code is earlier than html and should work).
If you do not specify the wrap setting it defaults to "onLoad". This results with all JavaScript being wrapped in a function run after result has been loaded. All variables are local to this function thus unavailable in the global scope.
Change the wrapping setting to "no wrap" and it'll work:
http://jsfiddle.net/zalun/Yazpj/1/
I switched the framework to "No Library" as you don't use any.
The function is being defined inside a load handler and thus is in a different scope. As #ellisbben notes in the comments, you can fix this by explicitly defining it on the window object. Better, yet, change it to apply the handler to the object unobtrusively: http://jsfiddle.net/pUeue/
$('input[type=button]').click( function() {
alert("test");
});
Note applying the handler this way, instead of inline, keeps your HTML clean. I'm using jQuery, but you could do it with or without a framework or using a different framework, if you like.
There is another way, declare your function into a variable like this :
test = function() {
alert("test");
}
jsFiddle
Details
EDIT (based on the comments of #nnnnnn)
#nnnnnn :
why saying test = (without var) would fix it ?
When you define a function like this :
var test = function(){};
The function is defined locally, but when you define your function without var :
test = function(){};
test is defined on the window object which is at the top level scope.
why does this work?
Like #zalun say :
If you do not specify the wrap setting it defaults to "onLoad". This results with all JavaScript being wrapped in a function run after result has been loaded. All variables are local to this function thus unavailable in the global scope.
But if you use this syntax :
test = function(){};
You have an access to the function test because it's defined globally
References :
https://stackoverflow.com/a/338053/3083093
https://stackoverflow.com/a/5830423/3083093
Change wrap setting in the Frameworks & Extensions panel, to "No wrap-in <body>"
There is no problem with your code.Just choose the extension onLoad() from right side.
<script>
function test(){
alert("test");
}
</script>
<input type="button" value="test" onclick="test()">
Select OnDomready
HTML:
<input id="dButton" type="button" value="test"/>
JavaScript:
addEventListener('load', init, false);
function init()
{
oInput = document.getElementById('dButton');
oInput.onclick = test;
}
function test(){
alert("test");
}
I have a method that calls another method (on ajax load, but that's irrelevant for this question). I'd like to pass parameters to this method. How is this possible?
The below page should scroll to id 25 on button click (the scrollable area is dynamically added in codebehind. this is just an example of what I'm attempting to accomplish)
JS
<%# Page Language="C#" Inherits="APTEIT.scrolltest" %>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function callHandler(handler) {
handler();
}
function scroll(id) {
alert("scrolling");
$("#divy").scrollTop($("#"+id).position().top);
}
</script>
<input type="button" value="scroll" onclick='var scroll={param1: "25"};callHandler(scroll)' />
</body>
</html>
You don't seem to pass the parameter into the handler in the callHandler method - instead, you try to invoke the scroll parameter (which is var scroll={param1: "25"}) as a function.
You use the same name scroll both for a config object and a function name. Please use different names :) Moreover, your declared and used function signatures do not agree. The scroll function accepts a string id while you are trying to pass in an object instead.
Unless I misunderstood, if handler is a function then pass arguments to it like any normal scenario.
function callHandler(handler){
var passme = "test";
handler(passme);
}
Update 1
I think what you might be able to do in this instance is the use the this keyword in the context of the input element. What this will ultimately do in your instance is replace id with this. This will also remove the additional select. Try this:
function callHandler(handler)
{
handler();
}
function scroll()
{
$("#divy").scrollTop($(this).position().top);
}
this might not work, as I'm not sure if the context will be that of input, or callHandler, give it a go! :)
Original
You should just be able to pass the parameters into the handler like so:
function callHandler(handler)
{
var param = 'Hello world';
handler(param);
}
callHandler(function(phrase)
{
alert(phrase);
});
put the parameters into an object like so:
var handler = {
param1: 'val1',
param2: 'val2' //ect...
}
handler(handler);
EDIT:
changing:
$("#divy").scrollTop($("#"+id).position().top);
to:
$("#divy").scrollTop($("#"+id.param1).position().top);
should work for your edited question.
<!doctype html>
<html>
<body>
<div id = 'div' style = 'width:100px;height:100px;background:#000000;'></div>
<script type = 'text/javascript'>
document.getElementById('div').addEventListener('click',happen(),true);
function happen()
{
alert(1)
}
</script>
</body>
</html>
In the above code why the event is triggered when the page loads and not triggered when i click on the div...Also which is the correct event name click or onclick....
It's because you've immediately called the function, and passed its null result to addEventListener().
It should be:
document.getElementById('div').addEventListener('click',happen,true);
If you want to pass arguments to happen, you'd have to write this:
document.getElementById('div').addEventListener('click', function() {
happen(args_here, ...);
}, true);
You're calling the function immediately and passing its return value to addEventListener, just like any other function call.
Take out the ().
This should work:
document.getElementById('div').addEventListener('click',happen,true);
The problem is with this line:
document.getElementById('div').addEventListener('click',happen(),true);
You should should only be passing the name of the function happen but since you added the parentheses, you are passing the result.
Try this instead:
document.getElementById('div').addEventListener('click',happen,true);
As the other answerers have said, taking out the () will fix the problem.
An alternative, and a good practice for OO Javascript, is to wrap the function inside a function(){ }, like so:
document.getElementById('div').addEventListener('click',function(){happen()},true);
That will retain scope if the callback needs to execute within an object (in this case it does not).
The event handler does not need parenthesis
document.getElementById('div1').addEventListener('click',happen,true);
I can call JS functions with ExternalInterface.call('func_name',.args). OK
But what if I would like to call a js class instance method instead?
ExternalInterface.call('obj.method_name',.args) //this seems not to work
Is there any way of doing it?
It was only a matter of scope. You must instantiated the swf object outside the js class. Then I can reference it in ExternalInterface.call().
window.addEvent('domready',function(){
swf = new Swiff('../files/swf/italy.swf',{
id:'italy',
container:'italy-flash',
width:280,
height:323,
params:{
bgcolor:'#ffffff',
wmode:'opaque',
allowScriptAccess:'always'
}
});
rm = new RelessersManager('regions');
});
Now from the swf I can call the rm methods. :) (.call('rm.method_name',...params))
Previously, I built the swf inside rm, so there was no way to reference rm from the swf.
You can call a JavaScript-Method with ExternalInterface.
Be sure, you have included your JavaScript-Files or you have written your JavaScript-Function inside your index.template.html-file, this could looks like:
<script type="text/javascript" src="./lib/file.js"></script>
<script type="text/javascript">
function doSomtething() {
alert("Something is done");
}
</script>
If you want to call the function "doSomething()" you can do this with the following code:
ExternalInterface.call("doSomething");
If you want to send some parameter and your JavaScript Function is defined like this:
<script type="text/javascript">
function doSomtething(param1, param2) {
alert("Something is done");
}
</script>
You can call it with this statement:
ExternalInterface.call("doSomething", param1, param2);
If this is not working, check your JavaScript-Functions inside your html-file.
You have posted the following statement:
ExternalInterface.call('obj.method_name',.args)
Are you sure you want to send ".args" instead of "args"?
I hope this will help you a little bit.