Problem with Form.Request and evalScripts?

[hairbo]

Hi all,

I'm not sure how to set up an Ajax test in the Mooshell, so here's
hoping I can explain my issue here.

I'm trying to submit form data using Form.Request, and then pass back
some javascript with the HTML that gets returned. I'd like the
Javascript to get evaluated. According to the Form.Request docs,
evalScripts defaults to "true", so this basic call should get me what
I need:

var myFormSubmit = new Form.Request(
'myForm',
'myFormContainer'
)

The data from my form is submitted correctly, and my Ajax page returns
this:

hi there
<script type="text/javascript">alert('hi');</script>

If I look at the "Response" tab in Firebug, I see that data returned.
However, the JS is not executed. Furthermore, if I use "View
Generated Source" from the Firefox plugin Web Developer, I see that
"hi there" has been written into the DOM, but my script statement is
nowhere to be seen. So, it would appear that it's getting returned
and picked up by Firebug, but then at some point after that, it
disappears. Here's hoping I'm doing something very stupid.

Any advice is appreciated.

Thanks,
hairbo

[hairbo]

Hmm...I *was* able to get my above example to work, but trying
different javascript fails, so something else has to be going on.

[Roman Land]

I am not sure, but you should start by removing the <script>.. tags from the response, you can eval JS data only..

--
---
"Make everything as simple as possible, but not simpler."

- Albert Einstein

[hairbo]

Okay, there may be things here that I don't understand, so
apologies...

1) I thought this function was supposed to be able to handle a mix of
HTML and JS, and would be smart enough to evaluate any JS it finds in
the returned data. If this is the case (as it does appear to be),
then removing the script tag would surely break.

2) It turns out that my problem was the JS I had returned wasn't being
evaluated because it didn't recognize a Mootools class I had
instantiated. This I don't think I understand. I created a class,
like this:

var MyClass = new Class({

...bla bla bla...

});

MyClass.implement (new Options, new Events);

...then, I did this in the page:

window.addEvent('domready',function(){
var STUFF = new MyClass();
});

I expected that the JS being returned by my Ajax page would be able to
do this:

STUFF.subMethod();

...but that failed. I don't get why it failed, though, since I'm able
to just create a regular JS function on the page, and reference
*that*, like this:

function myFunction () {}

...and then my JS in the AJAX response is this:
myFunction()

Why does that second example work, and the first not work? What basic
JS principle am I missing?

Thanks.

[Aaron Newton]

On Wed, Jan 20, 2010 at 2:36 PM, hairbo <bmue...@gmail.com> wrote:

Okay, there may be things here that I don't understand, so
apologies...

1) I thought this function was supposed to be able to handle a mix of
HTML and JS, and would be smart enough to evaluate any JS it finds in
the returned data.  If this is the case (as it does appear to be),
then removing the script tag would surely break.

This is the case; it should script the scripts from the response (which is why you don't see it if you log the response html) and then evaluates it after updating your element.

 

2) It turns out that my problem was the JS I had returned wasn't being
evaluated because it didn't recognize a Mootools class I had
instantiated.  This I don't think I understand.  I created a class,
like this:

var MyClass = new Class({

...bla bla bla...

});

MyClass.implement (new Options, new Events);

...then, I did this in the page:

window.addEvent('domready',function(){
       var STUFF = new MyClass();
});

I expected that the JS being returned by my Ajax page would be able to
do this:

STUFF.subMethod();

...but that failed.  I don't get why it failed, though, since I'm able
to just create a regular JS function on the page, and reference
*that*, like this:

function myFunction () {}

...and then my JS in the AJAX response is this:
myFunction()

Why does that second example work, and the first not work?  What basic
JS principle am I missing?

This is where we can't help you so much. You need to use console (firebug) and start logging things you are expecting to be present to get to the bottom of it. I can say that Form.Request is well tested and works (I use it constantly)... 

[hairbo]

Hey Aaron,

Thanks for the reply. Let me just say...OMFG.

I did (and usually have done) this:

window.addEvent('domready',function(){
var STUFF = new MyClass();
});

...instead of this:

window.addEvent('domready',function(){

STUFF = new MyClass();
});

sigh. Thanks for the help

On Jan 20, 4:39 pm, Aaron Newton <aa...@iminta.com> wrote:

[Aaron Newton]

ha. yeah. easy mistake. no worries.

[Daniel Lohse]

Care to share your revelation with me/us?

Is it because when defined with "var" no global variable is defined and so the class instance (STUFF) is not accessible in the HTML?

Cheers, Daniel

[hairbo]

Yes, sorry. I assumed this was so obvious to the rest of you that I
didn't bother explaining. It would appear that declaring "var STUFF"
keeps the "STUFF" object scoped (and here's where I get a little
fuzzy) to the function that is fired on 'domready'. Removing "var"
makes "STUFF" a global var accessible to anything on the page.

I learned about the importance of declaring "var" more recently than I
should have (like, only 4 years ago or so), and so I've become more of
a nazi about it. In retrospect, I suppose it should have been obvious
that declaring "var STUFF" would keep that object's scope narrow.
However, I suppose I assumed that the "domready" event was special in
some way...like, why would you *ever* want to keep variables scoped
just to that function? Probably very rarely. Anyway, it was just me
being careless.

Though...thinking back, this probably explains some of the other
headaches I've endured in the past, since I normally do say "var
STUFF" in the domready function.

[Aaron Newton]

var x = 'x';

var foo = function(){

  var x = 'foo';

};

foo();

//x is still 'x'

var bar = function(){

  x = 'bar';

};
bar();

//x is now 'bar'

window.addEvent('domready', bar); //changes x to 'bar' on domready

window.addEvent('domready', function(){

  x = 'bar';

}); //the *exact* same behavior

Best practice:

var x;

window.addEvent('domready', function(){

  x = 'whatever';

});

If you want a global variable, declare one. Don't *imply* one by not declaring it and not using var inside your domready statement or elsewhere.

[hairbo]

You and your "best practices" and "good coding habits".