Script in AJAX-loaded page inside parent page not firing

[pbd22]

Hi.

Help much appreciated... thanks

I have a page - Page.aspx.

In the page, there is a button that fires an XMLHTTP event:

return NewPage('srchfrm.aspx?q=' + query.value + "&type=" +
type.value,'tabs-1','tabs-2');

The result is that SrchFrm.aspx is loaded in a DIV on Page.aspx.

Now, in the loaded SrchFrm.aspx there is a drop down list
with associated values. I have a window.load script that
assigns onclick functions for each of the <option> elements
on this page.

If I test this script in SrchFrm.aspx (without
the page being loaded into Page.aspx) it works fine. But, when it is
loaded, it doesn't work.

I am guessing I am missing something along the lines of one form being
loaded into another via ajax. Any suggestions?

Also, Page.aspx has a Window.Onload event but, when I try
to add SrchFrm.aspx's script as a function in this Window.Onload
event, it still does not fire.

Here is my script at the head of SrchFrm.aspx for what it is worth:

<script type="text/javascript">
window.onload = function()
{

var mangaSelect=document.getElementById("fcat");

var maxi = mangaSelect.options.length;

for( var i = 0; i < maxi; i++ )
{
var option = mangaSelect.options;
option.addEventListener( "click", toggleElem, true );

}

};


function toggleElem(event)
{
alert(event.target.value);
}
</script>

Thanks in advance.

 

[Thomas 'PointedEars' Lahn]

I have a page - Page.aspx.

In the page, there is a button that fires an XMLHTTP event:

XMLHTTP _request_

return NewPage('srchfrm.aspx?q=' + query.value + "&type=" +
type.value,'tabs-1','tabs-2');

Useless snippet as NewPage() is user-defined and you did not post its code.

[...]
I am guessing I am missing something along the lines of one form being
loaded into another via ajax. Any suggestions?

Also, Page.aspx has a Window.Onload event but, when I try

window.onload, and it's an event *handler* (for the `load' event).

to add SrchFrm.aspx's script as a function in this Window.Onload
event, it still does not fire.

Here is my script at the head of SrchFrm.aspx for what it is worth:

<script type="text/javascript">
window.onload = function()
{
[...]
var option = mangaSelect.options;
option.addEventListener( "click", toggleElem, true );

Use 2*x spaces for indentation, not tabs (at least when posting here).

You have not told where this code is supposed to run; obviously this cannot
work in Internet Explorer, for example (the MSHTML DOM does not implement
W3C DOM Level 2 Events). However, the .aspx suffix suggests ASP .NET which
in turn suggests IE as targeted client, so that might be the cause of your
problem.

Curious why you use the proprietary window.onload property and then use the
standards-compliant addEventListener() method. The proprietary
event-handler attributes have the advantage that, for historical reasons,
they are widely supported (even in MSHTML/IE); the disadvantage is inherent.
The standards-compliant method has obvious advantages (read the Spec); the
disadvantage is that MSHTML/IE does not support it (as the only UA out
there, AFAIK). Make a design choice or use a wrapper method to support both
(google `_addEventListener').

One wonders if you know what you are doing here, and if you have even RTFM
before you coded, let alone posted; passing `true' for the third argument of
addEventListener() makes this a capturing listener (the element receives the
event before all other elements.)

In addition, the `click' event is not universally supported for `option'
elements (IIRC, MSHTML does not support it there). Use the `click' or
(better) `change' event of the `select' element instead.

<http://jibbering.com/faq/#posting>


PointedEars

 

[SAM]

Le 9/11/09 7:46 PM, pbd22 a écrit :

Hi.

Help much appreciated... thanks

I have a page - Page.aspx.

In the page, there is a button that fires an XMLHTTP event:

return NewPage('srchfrm.aspx?q=' + query.value + "&type=" +
type.value,'tabs-1','tabs-2');

The result is that SrchFrm.aspx is loaded in a DIV on Page.aspx.

Now, in the loaded SrchFrm.aspx there is a drop down list
with associated values. I have a window.load script that
assigns onclick functions for each of the <option> elements
on this page.

If I test this script in SrchFrm.aspx (without
the page being loaded into Page.aspx) it works fine. But, when it is
loaded, it doesn't work.

I am guessing I am missing something along the lines of one form being
loaded into another via ajax. Any suggestions?

Also, Page.aspx has a Window.Onload event but, when I try
to add SrchFrm.aspx's script as a function in this Window.Onload
event, it still does not fire.

How do you expect a WINDOW.onload could fire if the file isn't :
1) LOADED
2) IN a WINDOW

Didn't you speak of a *DIV* ? (which isn't a window)
Aren't the data ('SrchFrm') "innered" in the HTML of the div ?
(the file isn't really "loaded", its lines were passed to a variable)

Put the script at the end of the file 'SrchFrm'.

When Ajaxxing it would be better that the "donwloaded" files have no
HEAD nor body or html tags ...
.... as they are already present in the mother : 'Page'.
(remember you'll feed a div, and not display an html page)

Here is my script at the head of SrchFrm.aspx for what it is worth:

No real interest for the moment.
Except that it could be simpler ?

function toggleElem(what){
alert(what.options[what.selectedIndex].value);
}

var mangaSelect=document.getElementById("fcat");
mangaSelect.onclick="toggleElem(this);"