Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE slow with onchange event 1

Status
Not open for further replies.
Ghodmode

Ghodmode

Programmer
Feb 17, 2004
177
NZ
I have a page with a form and 201 select boxes with 29 options each. The first of the select boxes has an onChange event which triggers a function to change the values of the other 200.

In Firefox, this runs very well, but IE has a long delay when I click to open the first select box.

If someone can take a look at my code, below, and offer some advice, I would greatly appreciate it.

Based on W3Cs interpretation of the change event, I would think that the delay is coming before the event triggers, but MS's definition seems a little vague to me :

W3C said:
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.
Click to expand...
ref: Document Object Model Events

Microsoft said:
onchange Event

Fires when the contents of the object or selection have changed.
Click to expand...
ref: onchange Event

The part that's unclear, to me at least, is that MSs spec doesn't say that the event fires when the object loses focus. This may be my problem if it means that it fires exactly when the value changes.

Here's the JavaScript function :
Code: 
function func_set_all( caller ) {
    for ( i = 0; i < num_objs; i++ ) {
        elm = form_obj.elements[i];
        if ( elm.id.indexOf('loc_') != -1 ) {
            elm.value = caller.value;
        }
    }
} // End set_all function

Here's a subset of the code itself :
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<head>
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <title>without_location</title>

    <link rel="stylesheet" type="text/css" href="css/menu.css" />
    <link type="text/css" rel="stylesheet" href="css/without_location.css" />
                

    <script type="text/javascript">
        var xDT = parent.xDT;
    </script>

    <script type="text/javascript" src="js/quirksmode.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

    <script type="text/javascript" src="js/without_location.js">
    </script>
                
    <script type="text/javascript">
        processing();
    </script>

</head>
<body onload="
        parent.LOADED = 1;
    
        /*
           Moving these here was my first attempt at speeding up the code.

           I thought that going through all of the form elements might be a
           little expensive.

           This didn't seem to have much effect.

        */
        form_obj = document.getElementById( 'edit_locations_form' );
        num_objs = form_obj.elements.length;

        done_processing();
    ">

<h3>PERDANA ENTERPRISE</h3>
<form id="edit_locations_form" action="[URL unfurl="true"]http://home:9694/kqsbstart/without_location.pl"[/URL] method="post">
<input type="hidden" name="co_id" id="co_id" value="3" />
<div id="submit_button_block">
    <input type="submit" value="Submit" />
</div>
<table id="edit_locations" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td colspan="4" class="right">Set all of these deliveries to :</td>
    <td class="left">

    <!--

        This is the select-box that changes all of the others.

    -->
        <select name="set_all" id="set_all"
            onchange="func_set_all(this);">
        <option value="null">--</option>
        <option value="17">Andus</option>
        <option value="12">Beaufort</option>
        <option value="8">Beverly Hill</option>
        <option value="27">Bongawan</option>
        <option value="16">Ex-Quarry</option>
        <option value="20">G.F.Jetty</option>
        <option value="4">Green Nursery Beringgis</option>
        <option value="3">Inanam</option>
        <option value="21">Jensun Const. S/B-MRSM KINARUT</option>
        <option value="22">Jln. Safoda Jica, Papar.</option>
        <option value="15">Kimanis</option>
        <option value="13">Kinarut</option>
        <option value="10">Lok Kawi Heights</option>
        <option value="19">Luyang</option>
        <option value="9">Maktab Rendah Sains Mara</option>
        <option value="5">Melinsung</option>
        <option value="7">Palm Beach Village-Kinarut</option>
        <option value="26">Papar</option>
        <option value="23">PDRM KINARUT</option>
        <option value="11">Pem. Pusat Latihan Koperasi</option>
        <option value="1">Penampang</option>
        <option value="2">Petagas</option>
        <option value="18">Pusat Latihan Koperasi</option>
        <option value="25">Putatan</option>
        <option value="14">Road maintenance jetty</option>
        <option value="24">S.K.Nyaris-nyaris Bongawan</option>
        <option value="28">Sepangar Bay</option>
        <option value="6">Sg.muok kinarut</option>
        <option value="29">Tg. Aru</option>
        </select>
    </td>
</tr>
<tr>
    <th>#</th>
    <th>Date</th>
    <th class="left">Product</th>
    <th>Weight<br />(tons)</th>
    <th class="left">Location</th>
</tr>
<tr>
    <td>1</td>
    <td>20 Apr 2001 15:03:02</td>
    <td class="left">3" Hard Core</td>
    <td class="right">12.31</td>
    <td class="left">

    <!--

        There are 199 more like this

    -->
        <select name="loc_101169" id="loc_101169">
        <!-- same list as used for "set_all" -->
        </select>
    </td>
</tr>
</table>
</form>
</body>
</html>

--
-- Ghodmode
 
Sort by date Sort by votes
Do you have any form elements that are NOT the selects you want to change? What I'm getting at is, the time lag could possibly be due to your comparison against the element ids using indexOf. If you're ONLY looking for selects, it might be a little beneficial to try something like:

Code: 
function func_set_all( caller ) {
    var select_elements = form_obj.getElementsByTagName("select");
    for ( i = 0; i < select_elements.length; i++ ) {
        elm = select_elements[i];
        if ( elm.id.indexOf('loc_') != -1 ) {
            elm.value = caller.value;
        }
    }
} // End set_all function



*cLFlaVA
----------------------------
[tt]( <P> <B>)13 * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Thanks clflava. You make a good point. In fact, my form doesn't have anything other than the selects I want to change. So, I might be able to do away with the indexOf entirely.

Unfortunately, though, I just discovered that the problem isn't happening with the onChange event. I took the event off entirely, so that the set_all select is the same as the other 200 and I still experienced the problem. I double-checked after closing the browser, clearing my cache and re-loading the page.

So, this may not have been a JavaScript issue in the first place.

I found that I can't get reasonable speed until I reduce the number of records to about 50. After that, the event works well, too.

I've tried some tricks like the CSS fixed table-layout and specifying column widths to no avail. I'll do some searching around to try and find tips on improving my HTMLs efficiency within IE. If I don't have any luck, I'll probably post here again, but to a different forum.

Thank you,
-- Ghodmode

--
-- Ghodmode
 
Upvote 0 Downvote
You might want to call your parameter something other than "caller", too. There is a "caller" property available within functions, pointing to the function that called it. Maybe use "callingElement" or something else.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
555
Daniel K
Daniel K
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
422
feherke
feherke
JScannell
  • Locked
  • Question
Making elements visible during an onChange() event
Replies
3
Views
404
vacunita
vacunita
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
446
ggriffit
ggriffit
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
272
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top