Conflict between Mootools and a pure JS script - mootools

I am stuck with a pure JS script that should be included in Joomla (1.7, Mootools 1.3.2)
and raises a conflict with this library while working perfectly outside it.
Examples :
no Mootools
http://jsfiddle.net/2W87v/
with Mootools
http://jsfiddle.net/2W87v/1/
Firebug error around line 133 :
document.getElementById("pu_" + champs[i]) is null
I tried all kinds of solutions, renaming certain variables, using $ instead of document.getElementById, wrapping each function around an anonymous function. To no avail.
If someone could point in the right direction, I'd be very grateful.

mootools is prototypical.
var champs = ['surfaceMaison','surfaceGarage','terrasseCouverte','terrasseNonCouverte','cloture'];
var prix = ['pack','valeur','valeur','valeur'];
var options = ['toitureMultipentes','doucheItalienne','wcSuspendu','enduitTaloche','voletsRoulants','climGainable'];
// and..
for (var i in champs)
for (var i in options)
is a no go as is, it will go up the prototype chain and get the stuff mootools adds to the Array prototype.
in general, for var in object as a construct has always been intended for OBJECTS and not arrays. it works anyway, because in javascript you don't have a proper Array type, it's just an Object type with Array-like properties (eg, length).
loop the arrays via options.each(function(el, i) {} or a normal for loop instead.
also, you can check for hasOwnProperty:
for (var i in champs)
if (champs.hasOwnProperty(i)) {
// do the stuff
}

Related

Basic DOJO 1.8: How to get a reference to a method?

I'm am pretty new to DOJO 1.8 and would like to know how I can call a function from outside a require-method? I try to implement a message-box which fades in and out.
I created the method:
require(["dojo/dom", "dojo/on", "dojo/domReady!" ], function(dom, on, ready) {
/*function which shows a msg-box on top of the page */
var showMsg = function(text) {
dom.byId("msgbox").innerHTML = text;
}
});
OK! IT works....but I no I would like to call it from somewhere else in my application:
showMsg("Item saved");
But that doesn't work: Uncaught ReferenceError: showMsg is not defined
How do I get that reference?
Thank you for your help!
AFX
As things stand you're declaring a local variable and so it's not visible elsewhere in the program.
You could make the variable global, for example
window.showMsg = function(text) {
dom.byId("msgbox").innerHTML = text;
}
The downside of this approach is that as you application gets bigger you end up with more and more global variables and that makes maintenance harder.
So Dojo offers ways to package chunks of reusable code and refer to them. You are already exploiting some of those capabilities when you use "require" - you're getting access to chunks of dojo. You can make your own code visible as reusable chunks in the same way.
This is quite a big topic, but you could start by reading this
Another thing you can do is to move the require inside the function.
Even if you have many such functions, while it's annoying to repeat, there is essentially no runtime penalty for requiring over and over. The only thing to watch for is that code inside the function becomes asynchronous, so instead of returning a value you have to use a callback or promise.
Alternatively, if you're only using this function from within some event handlers (I see dojo/on), you can set them up within the scope of this same require block.

Defining for loop iterator before the for loop?

Recently I'd been criticized for structuring my for loops like so:
var i:MovieClip;
for each(i in array)
{
// be awesome
}
Or,
var i:uint = 0;
for(i; i<10; i++)
{
// be more awesome
}
This reads better for me personally, yet I'm being attacked for it. Is there any difference?
Old Answer
Yes: The way you're doing it, the variable lives on after the loop ends. Making sure the variable doesn't exist outside of the scope of the loop ensures that you never accidentally refer to it outside the loop.
Update:
At least that's how most languages do it. However, in ActionScript the for loop variable is in the scope of the parent! So there really is no difference in ActionScript.
trutheality's answer is the best consideration in most languages, and a great response considering that this question wasn't tagged actionscript-3 until later.
However Actionscript uses variable hoisting where variables defined anywhere in the function are scoped to that function rather than its inner most block. This blog post describes it well, and it's mentioned in the docs on variable scope. Due to hoisting, there is no difference in Actionscript between defining the variables before or inside the loop.
To show how crazy this can get, you can even define the variable after the loop:
for (i = 0; i < 5; i++) {
trace(i);
}
var i:int;

MooTools return undefined object

I have predefine MooTools.js and some another javascript called moomenu for dropdown...
However i could test the code and i come to know that "typeof(MooTool)" return undefined...
I am new to MooTool so will any body please tell me what happens there???
It's because your calling it "MooTool" instead of "MooTools"; however, if you look at the source, var MooTools only refers to an object with the version and build information. If you're trying to select an element, you want to look at the $ and $$ functions of the Element object:
http://mootools.net/docs/core/Element/Element

Eval formula in AS3?

I'm playing around a bit with ActionScript. What I want is that I can display a mathematical function from a string.
E.g. in my working python script I do something like that:
formula = 'x**2 + 3*x'
for x in range( 0, 100 ):
y = eval( formula )
graph.display( x, y )
I want to port this to ActionScript, but it seems like there is no more eval since version 3. How can I compute my function values anyway?
Something that might also work in your case, is using Javascript eval instead. You can use something like:
var result = ExternalInterface.call(myEvalFunctionInJS,formula)
to evaluate math functions.
This is an somewhat easy and useful workaround as javascript is quite close to actionscript.
If you put the ExternalInterface call inside an loop, it may become sluggish. To avoid that, you can write the loop in javascript. (You can even write the entire javascript inside as3, so that you do not need to touch the actual html page.)
edit:
Here's an link for that.
http://www.actionscript.org/resources/articles/745/2/JavaScript-and-VBScript-Injection-in-ActionScript-3/Page2.html
You will have to write an eval yourself. You will have to parse the string and invoke the right operators.
Here's a link to get you started.
The Tamarin project has a ECMAScript parser written in ES4. Try this as well.
"You can even write the entire javascript inside as3, so that you do not need to touch the actual html page." Do you have links / tutorials? – okoman
Both AS and JS are based on the same ECMAScript standard. So, if you pass a string of AS3 to a container, and use JS's eval on this string, it should work just fine.
Just noticed this question and realized I answered almost the exact same thing here: https://stackoverflow.com/a/11460839/1449525
To paraphrase myself, you can definitely use D.eval, AS3Eval, or ExternalInterface (as seen in the currently chosen answer) assuming you're running in a web page. However, all it seems like you really need is something like this simple MathParser (More info about the MathParser)
Here's how you'd use the MathParser:
package {
import bkde.as3.parsers.*;
import flash.display.Sprite;
public class MathTest extends Sprite {
public function MathTest() {
var parser:MathParser = new MathParser([]);
var compiledObj:CompiledObject = parser.doCompile("(10/3)*4+10");
var answer:Number = parser.doEval(compiledObj.PolishArray, []);
var xyParser:MathParser = new MathParser(["x", "y"]);
var xyCompiledObj:CompiledObject = xyParser.doCompile("(x/3)*y+10");
var xyAnswer:Number = xyParser.doEval(xyCompiledObj.PolishArray, [10, 4]);
}
}
}
I'm sure ExternalInterface stuff works just fine, but I have personal reservations about the cross language communication (especially in terms of efficiency and security) as well as just the awkward nature of it. I feel like a wholly-contained, same-language solution is typically preferable in most situations.
A bit late, but for reference, the D.eval library does what you are asking for:
http://www.riaone.com/products/deval/
It is free and works great for me, but doesn't come with source. I found this question looking for an alternative built-in or source-available solution.
There is also a seemingly abandoned project to port Tamarin to Flash itself:
http://eval.hurlant.com/
Would be awesome if more progress was made, but seems like a curiosity for now.

Get Flex app's position on a web page?

Is it possible to get the x,y coordinates of a Flex app within an HTML page? I know you can use ExternalInterface.ObjecID to get the "id attribute of the object tag in Internet Explorer, or the name attribute of the embed tag in Netscape" but I can't seem to get past that step. It seems like it should be possible to get a handle on that embed object. Any suggestions?
Thanks.
I think the easiest thing to do is to include some kind of JavaScript library on the HTML page, say jQuery, and use it's functions for determining the position and size of DOM nodes. I would do it more or less like this:
var jsCode : String = "function( id ) { return $('#' + id).offset(); }";
var offset : Object = ExternalInterface.call(jsCode, ExternalObject.objectID);
trace(offset.left, offset.top);
Notice that this is ActionScript code, but it runs JavaScript code through ExternalInterface. It uses jQuery and in particular its offset method that returns the left and top offset of a DOM node.
You could do without jQuery if you looked at how the offset method is implemented and included that code in place of the call to jQuery. That way you wouldn't need to load jQuery in the HTML and the Flex app would be self-contained. The reason I suggest to use a library like jQuery is that browsers do these things differently. I'm not sure if calculating offsets is very different from browser to browser, but it doesn't hurt to be insulated from browser differences.
The JavaScript in my example is an anonymous function so that the ID of the embed/object tag can be passed in to it as a parameter to ExternalInterface.call, but you could just use string concatenation if you want:
var jsCode : String = "$('#' +" + ExternalInterface.objectID + ").offset()";
var offset : Object = ExternalInterface.call(jsCode);
That would work too, I just think the first version is more elegant.
If you are trying just to measure where it's at within a page as the external user the only thing that pops into my mind is a Firefox extension called MeasureIt I've used it occasionally for various measuring on web pages.
Are you trying to do this programmatically from within the embedded page itself and if so which langauge?