Need help with screen update during event processing

Discussion in 'Javascript' started by Bob, Jan 10, 2004.

  1. Bob

    Bob Guest

    Below is sample code that illustrates what I'm trying to do. For sake
    of brevity I didn't include the properties of buildBtn that determine
    what data to request.

    The problem is I never see "Processing request" and depending on
    server utilization the response can take several seconds to load
    leading the users to wonder if the system is working. Unfortunately
    getting rid of the users is not an option :) so any help I can get on
    making this work is greatly appreciated.

    TIA,
    Bob



    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <script type="text/javascript">

    // dynamically build button
    function buildBtn(val){

    function evt(){
    results.innerHTML = '<h2>Processing request</h2>';

    // Use for loop to simulate time it takes to
    // get results page from server
    for (var i=0; i<1500000; i++)
    null;

    // display results
    results.innerHTML = "<h2>" + btn.value + " results</h2>";
    }

    var btn = document.createElement('input');
    btn.type = "button";
    btn.value = val;
    btn.onclick = evt;
    document.body.appendChild(btn);
    }
    </script>
    </HEAD>

    <BODY>
    <script type="text/javascript">
    var b1 = new buildBtn('button 1');
    var b2 = new buildBtn('button 2');
    </script>

    <div id="results" />
    </BODY>
    </HTML>
     
    Bob, Jan 10, 2004
    #1
    1. Advertisements

  2. Bob

    McKirahan Guest


    I don't know why it doesn't work but you could use:
    window.status = "Processing request"
    instead then set it to blank afterwards.


    It also didn't work when I tried toggling the visibility of an animated gif
    such as:
    http://www.itn.net/gif/style/ua/loading.gif
    using this HTML:

    <span id="loading" style="visibility:hidden">
    <img src="http://www.itn.net/gif/style/ua/loading.gif" border="0"
    alt="Processing request">
    </span>

    and this JavaScript:
    loading.style.visibility = "visible";
    and
    loading.style.visibility = "hidden";
    a the beggining and end of the "evt()" function.
     
    McKirahan, Jan 10, 2004
    #2
    1. Advertisements

  3. Bob

    DU Guest


    Written like that, only MSIE will be able to support this.
    document.getElementById("results").innerHTML = "<h2>Processing
    request</h2>";
    will work on most W3C DOM 2 compliant browsers.

    The 2nd problem is that the buildBtn is called as the document loads and
    results is not seen in the program. You can not make a call about an
    object which does not already exists. Here, the referenced object
    "results" does not exist at the point where the 2 buildBtn functions are
    called.
    This is a scope problem. Just by using defer or an init function on the
    load event of the body, you can avoid all this.
    This looks very very weird to me. You're deliberately occupying the cpu
    with a bogus, pointless loop. This abuses user's system resources. Just
    imagine what this will cause to users having different system resources.
    You're overwriting what was previously written. Is that intentional?

    I personally would have used entirely compliant DOM methods to write
    dynamically these results into the document and, of course, without the
    weird and suspicious for loop.
    evt is often used as the event object generated by an event listener in
    W3C DOM 2 events; that's why I would use another identifier than evt.

    I'm pretty sure you can not minimize the div like that. I would be very
    surprised if you can do that without problems.
    DU
     
    DU, Jan 11, 2004
    #3
  4. Bob

    Bob Guest

    First off, thanks for taking the time to respond. This is an intranet
    only page where the client configuration is restricted only to MSIE.
    Two instances of buildBtn are instantiated when the form loads however
    the contents of "results" are only modified as part of the onclick
    event for each button so "results" does exist at the time it's
    referenced.
    The loop was only put in as a time delay to demonstrate the issue. The
    actual page sends form information to the server and retrieves the
    results.
    Yes, it is intentional, "results" is used to display dynamic data
    based on user input
    Thanks, I'll change it to something else.
    I haven't had any problems so far but I'll keep this in mind should I
    encounter any weirdness.
     
    Bob, Jan 11, 2004
    #4
  5. Bob

    Bob Guest

    Your response got me to thinking. I'm trying to update the screen in
    the middle of handling an event which probably is the reason why it
    doesn't work. What I really need to do is handle the event then
    retrieve the info. So I tried splitting "evt" into two function and
    using setTimeout to process the loadTbl function. The problem is I'm
    not sure how to reference loadTbl.

    If I move loadTbl outside of buildBtn it works but then I have other
    issues to deal with so I'd rather not do that if I could avoid it. Any
    ideas?

    function evt(){
    results.innerHTML = '<h2>Processing request</h2>';
    setTimeout(loadTbl, 1); // This line produces an error
    }

    function loadTbl(){
    // Use for loop to simulate time it takes to
    // get results page from server
    for (var i=0; i<1500000; i++)
    null;

    // display results
    results.innerHTML = "<h2>" + btn.value + " results</h2>";
    }
     
    Bob, Jan 11, 2004
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.