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.
Related
I have javascript file called screener.js
function ScreenerPage() {
function onScreenListChange() {
do stuff
};
}
from the index.html file I include the javascript file like this:
<script type="text/javascript" src="./js/screener.js"></script>
Then later in the head section of index.html I instantiate the screenerPage object like this:
<script type="text/javascript">
$(document).ready(function () {
screenerPage = new ScreenerPage();
}
</script>
Then down in the body section there is a select with onchange event that calls
<select id="screenList" onchange="screenerPage.onScreenListChange()">
but the browser shows error:
Uncaught TypeError: screenerPage.onScreenListChange is not a function
What am I doing wrong?
The way javascript works is it has objects and the way of which they are created matter!
Here is the way i've found that works for this kind of thing
screener.js
var ScreenerPage = function() {
this.onScreenListChange = function() {
//do stuff
console.log("test")
}
}
Later on
var a = new ScreenerPage();
a.onScreenListChange();
if you have any questions on how it works feel free to try to message me!
The reason it does not work is that you're having a scope issue.
The function ScreenerPage is defined in the global scope, meaning it is accessible anywhere. Now inside that function you define a local function called onScreenListChange.
You are able to do that, but that function only exists within the scope of the function you defined it in.
When I look at your function, I think you want to use classes. A class is a single name that can have multiple variables / methods to do a specific task.
class ScreenerPage {
constructor(text){
this.onScreenListChange(text) // Call this "method" on object creation.
}
onScreenListChange(text) {
console.log(text ? text : 'do stuff');
};
}
var a = new ScreenerPage('hi'); // now watch your console log.
a.onScreenListChange();
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 got this JQuery code:
file: code.js
jQuery(function(){
function renderSVG(){
//Something
};
});
File: index.html
<script>
function mostrarOdonto() {
renderSVG();
};
</script>
But i got a problem here:
http://i.gyazo.com/9550a64fc16c7570107706fb2162d84f.png in renderSVG() inside mostrarOdonto()
"Uncaught ReferenceError: renderSvg is not defined"
I tried $renderSVG(); but doesnot work. Anyone can help me?
Thanks so much!
PD: Sorry bad english
That is caused by javascript closures. It is local within the jQuery call and not accessible outside. You can read more about it here: MDN Documentation
You can declare objects outside of the jQuery function call to have it available globally. i.e.:
function RenderSVG(){
//Do Stuff
}
jQuery(function(){
RenderSVG();
});
This ensures that it is accessible outside the jquery scope
or if you really need it within jQuery you can go the route of a jQuery Plugin a la: jQuery docs
Example:
(function( $ ) {
$.fn.renderSVG = function( options ) {
//Do Stuff with canvas since it would be referenced in this.
};
}( jQuery ));
Then you can call it like: $('#mycanvas').renderSVG({/*options*/});
Update 1:
You have to ensure when your code is called after loading jQuery and any plugins.
in your <head> tag
you should put <script src=".../jquery.min.js"> or whatever your file for jquery is called
followed by any plugin scripts ...src="jquery.svg.js", then you put your code:
<script>
function RenderSVG(){
}
//And most important is that you call it after it is ready. In this example
//I use jQuery(window).load you can also use jQuery(document).ready
jQuery(window).load(function(){
RenderSVG();
});
</script>
if it still doesn't work you have to ensure the library for the svg methods aren't doing something weird. To be sure we would have to know the library you are using.
The function renderSVG() is a local function,since it is inside jQuery(function(){ }. It is valid only in that scope , So it is not accessible via other scopes. So try it like this.
<script>
jQuery(function(){
function mostrarOdonto() {
renderSVG();
};
};
</script>
You can Do it in this way JSFIDDLE LINK
HTML:
<input type="button" value="go" onclick=" mostrarOdonto();">
Scripts:
$.renderSVG = function() {
alert("I am calling form jquery");
};
$(document).ready(function() {
alert("function is ready to use now");
});
function mostrarOdonto() {
$.renderSVG();
};
This should work as per your requirement. The Jquery part can go into your Code.js file.
I think could help you it's simple and straight forward
$(document).ready(function() {
mostrarOdonto();
});
function renderSVG() {
alert("Testing purpose only");
};
function mostrarOdonto() {
renderSVG();
};
I have a file called function.js which has all my jQuery for my aplication which looks like this
$(document).ready(function(){
insert_initial(); //first time to the page, insert into cart and set the subtotal originally
function update_gallery(product_id){
...
}
function update_prices(product_selector){
...
...
}
function insert_initial(){
...
}
$('.trigger').click(function(){
$('.stations').find(".drop-down").slideToggle();
return false;
});
...
...
On the top of the file i have my function call insert_initial(); which gets run on the initial load....and this works great..My problem is that i now need to include this js file on my php pages say 1.php and 2.php and 3.php and 1.php is the only one that needs the insert_initial(); ....so i was thinking of the best way to do this. I assumed taking out the function call out of the functions file and putting it into a separate file
<script src="/someting/js/functions.js" type="text/javascript"></script>
<script src="/someting/js/functions_insert.js" type="text/javascript"></script>
and in my functions_insert.js file i would have only
$(document).ready(function(){
insert_initial(); //first time to the page, insert into cart and set the subtotal originally
});
but that didnt work either...any ideas on how to fix this
This checks to make sure that the location of the current page includes "1.php" before calling insert_initial():
if(window.location.href.indexOf('1.php') != -1)
insert_initial();
I would recommend having your definitions and executions separate in this instance. You don't need to define your functions inside of jQuery's DOM ready event. But it is also good to namespace them as mentioned. A common paradigm I follow is like so:
functions.js
(function($, window, undefined) {
function update_gallery(product_id){
...
}
function update_prices(product_selector){
...
...
}
function insert_initial(){
...
}
window.MyApp = {
update_gallery: update_gallery,
update_prices: update_prices,
insert_initial: insert_initial
};
})(jQuery, window);
1.php
<script src="functions.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
MyApp.insert_initial();
});
</script>
Now you can include your definitions as needed, and call them as necessary.
Try namespacing your functions and attaching them to a nice global object.
window.MyApp = {};
MyApp.insert_initial = function(){
};
Then you can access it from wherever you need, provided it's included earlier in the page.
Edit:
If this doesn't work, you've got an error elsewhere in your code - load order, perhaps? Either method you've described to invoke the function is fine, just make sure it's defined when you invoke it.
Your functions defined in functions.js are only visible in the scope of that document ready function. A simple case where it doesn't work:
(function() {
function square(x) {
return x*x;
}
})();
alert(square(2)); //Fails, since square is not in scope
The easiest way to fix this is to declare your functions in the global namespace:
function square(x) {
return x*x;
};
alert(square(2)); //4
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.