Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 4881

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Aug 1st, 2007

How do I prevent value and attribute delays?

Expand Post »

How can I get JavaScript to display values and attributes when they are written to input boxes by the script, instead of waiting for a rather lengthy (10 sec) calculation to finish?

- IE does not change the boxes at all, until after the script finishes.

- FF displays the text when it is written, but won't display changes in attributes (such as background color) until the script ends.

But both display the changes immeditely when an alert box pops up.

In my application, I want a "wrong value" error condition to show up immediately, so the user knows this before the script ends (so he can visually check values while the script is still making other values). But the alert box interrupts the processing.

In IE, the error message won't show up until after the script ends. The old values and error conditions stay on the screen for the duration. So the user doesn't know to check until the script ends.

In FF, the error message changes when the error appears or disappears, but the yellow error background does not appear or disappear until the script ends. So the user won't notice it until the script ends.

Does anyone have a trick that is not browser-dependent?

Last edited by MidiMagic; Aug 1st, 2007 at 5:16 am.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 1st, 2007

Re: How do I prevent value and attribute delays?

How about posting some code so that we have something to chew on?

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 720

Failure as a human

Offline

8,872 posts
since Jun 2006

Permalink

Aug 1st, 2007

Re: How do I prevent value and attribute delays?

Here is the relevant code.

The JavaScript uses this simple loop to put the values in the form boxes. It works fine, except for the delays.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  for(cs = 1; cs <= 3; cs++){
    tmps = 'cm' + cs;
    document.forms.prgrss[tmps].value = saband[cs];
    erx = errif[cs];
    document.forms.prgrss[tmps].style.backgroundColor=eco[erx];
  };
  for(cs = 1; cs <= 3; cs++){
    tmps = 'cm' + cs;
    document.forms.prgrss[tmps].value = saband[cs];
    erx = errif[cs];
    document.forms.prgrss[tmps].style.backgroundColor=eco[erx];
  };

After this code runs, the JavaScript enters a long series of nested loops which have nothing directly to do with the form items shown. The results are written into other similar text boxes.

Here are the form items. They are inside a form tag pair named "prgrss", along with other form items.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  <input type="text" id="cm1" name="cm1" value=" " size="32" />
  <input type="text" id="cm2" name="cm2" value=" " size="32" />
  <input type="text" id="cm3" name="cm3" value=" " size="32" />
  <input type="text" id="cm1" name="cm1" value=" " size="32" />
  <input type="text" id="cm2" name="cm2" value=" " size="32" />
  <input type="text" id="cm3" name="cm3" value=" " size="32" />

The code itself works. The ONLY problem is that the display does not update until after the long loops finish:

- IE leaves the old values and colors in the text boxes until the script ends. When the script ends, the new values appear first, and the new colors appear about a second later.

- FF replaces the values at the time the script writes them, but leaves the old colors in the boxes until the script ends. When the script ends, the new colors appear.

Last edited by MidiMagic; Aug 1st, 2007 at 2:34 pm. Reason: typogoofical

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 2nd, 2007

Re: How do I prevent value and attribute delays?

Why not keep the function which just does only processing in background for while i.e. make use of setInterval and setTimeout functions which would give the code which displays names enough time to do its job.

Something like this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<html>
<head>
    <script>
    var counter = 0;
    var hnd = null;
 
    function doSomething()
    {   
        //your lengthy processing function
        hnd = setInterval("calculate()", 3000);
 
        //your display function
        var d = document.getElementById('d');
        d.innerHTML = "<b>Hello to all</b>";
    }
 
    function calculate()
    {
        alert("Sum of 3  and 5 is 8");
        clearInterval(hnd);
    }
    </script>
</head>
<body onload="doSomething();">
    <div id="d"></div>
</body>
</html>
<html>
<head>
    <script>
    var counter = 0;
    var hnd = null;
   
    function doSomething()
    {   
        //your lengthy processing function
        hnd = setInterval("calculate()", 3000);

        //your display function
        var d = document.getElementById('d');
        d.innerHTML = "<b>Hello to all</b>";
    }
   
    function calculate()
    {
        alert("Sum of 3  and 5 is 8");
        clearInterval(hnd);
    }
    </script>
</head>
<body onload="doSomething();">
    <div id="d"></div>
</body>
</html>

This way you can keep the function which consumes the most of CPU cycles to run at a later moment.

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 720

Failure as a human

Offline

8,872 posts
since Jun 2006

Permalink

Aug 2nd, 2007

Re: How do I prevent value and attribute delays?

There is something that doesn't work here:

The lengthy processing function requires values to be passed to it from the error display process. It does nothing to the values displayed, but it does need them to know what to calculate default values for.

I can't pass the values to the processing function if they haven't been set yet.

Also, site policy says I should not modify the html code with scripts. I need to set styles and values instead.

Also, you put in an alert. That alone will cause the display to complete. But I don't want to distract the user from what he is doing with an alert.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 3rd, 2007

Re: How do I prevent value and attribute delays?

It didn't do what I wanted. It delayed the execution of EACH repetition of the loop, extending 8 seconds of execution to over a minute.

One thing is that there is no "single function" for the long calculation. It depends on which button is pushed on the form.

It looks like this (note that the JS is an external file, not embedded):

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function button1(){      // activated by pushing button number one
  var a, b, c, d, e, l1, l2, maxa, max1, max2;
  getgrid(a, b, c, d, e);     // this is the error printing function
 
  for(l1 = 0; l1 < d; l1++){
    for(l2 = 0; l2 < e; l2++){
      calcgrid(a, b, c, l1, l2);       // this function takes time
      checkgrid(a, l1, l2, maxa, max1, max2);
    }
  };
  putgrid(maxa, b, c, max1, max2);
};
 
function button2(){      // activated by pushing button number two
  var a, b, c, d, e,, l1 l2, maxa, max1, max2;
  getgrid(a, b, c, d, e);     // this is the error printing function
 
  for(l2 = 0; l2 < e; l2++){
    calcgrid(a, b, c, d, l2);       // this function takes time
    checkgrid(a, d, l2, maxa, max1, max2);
  };
  putgrid(maxa, b, c, max1, max2);
};
 
function button3(){      // activated by pushing button number three
  var a, b, c, d, e, l1, l2, maxa, max1, max2;
  getgrid(a, b, c, d, e);     // this is the error printing function
 
  for(l1 = 0; l1 < d; l1++){
    calcgrid(a, b, c, l1, e);       // this function takes time
    checkgrid(a, l1, e, maxa, max1, max2);
  };
  putgrid(maxa, b, c, max1, max2);
};
 
function button4(){      // activated by pushing button number four
  var a, b, c, d, e, l1, l2, maxa, max1, max2;
  getgrid(a, b, c, d, e);     // this error printing function
 
  calcgrid(a, b, c, d, e);       // this is the function takes time
  checkgrid(a, d, e, maxa, max1, max2);
 
  putgrid(maxa, b, c, max1, max2);
};
function button1(){      // activated by pushing button number one
  var a, b, c, d, e, l1, l2, maxa, max1, max2;
  getgrid(a, b, c, d, e);     // this is the error printing function

  for(l1 = 0; l1 < d; l1++){
    for(l2 = 0; l2 < e; l2++){
      calcgrid(a, b, c, l1, l2);       // this function takes time
      checkgrid(a, l1, l2, maxa, max1, max2);
    }
  };
  putgrid(maxa, b, c, max1, max2);
};

function button2(){      // activated by pushing button number two
  var a, b, c, d, e,, l1 l2, maxa, max1, max2;
  getgrid(a, b, c, d, e);     // this is the error printing function

  for(l2 = 0; l2 < e; l2++){
    calcgrid(a, b, c, d, l2);       // this function takes time
    checkgrid(a, d, l2, maxa, max1, max2);
  };
  putgrid(maxa, b, c, max1, max2);
};

function button3(){      // activated by pushing button number three
  var a, b, c, d, e, l1, l2, maxa, max1, max2;
  getgrid(a, b, c, d, e);     // this is the error printing function

  for(l1 = 0; l1 < d; l1++){
    calcgrid(a, b, c, l1, e);       // this function takes time
    checkgrid(a, l1, e, maxa, max1, max2);
  };
  putgrid(maxa, b, c, max1, max2);
};

function button4(){      // activated by pushing button number four
  var a, b, c, d, e, l1, l2, maxa, max1, max2;
  getgrid(a, b, c, d, e);     // this error printing function
 
  calcgrid(a, b, c, d, e);       // this is the function takes time
  checkgrid(a, d, e, maxa, max1, max2);

  putgrid(maxa, b, c, max1, max2);
};

I can't figure out where to put the setInterval without causing multiple delays, because there is no "single function" to call only once.

The setInterval function seems to delay only the function attached to it. I need to delay execution of EVERYTHING after the getgrid function. Yet, all of those other items must execute in the proper order, or the wrong valuyes are used by following functions.

Is there a way to put something right after the getgrid function and before the for loop that delays the following statements to let the output occur?

Last edited by MidiMagic; Aug 3rd, 2007 at 1:19 pm. Reason: thot

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 3rd, 2007

Re: How do I prevent value and attribute delays?

Quote ...

There is something that doesn't work here:

The lengthy processing function requires values to be passed to it from the error display process. It does nothing to the values displayed, but it does need them to know what to calculate default values for.

I can't pass the values to the processing function if they haven't been set yet.

Also, site policy says I should not modify the html code with scripts. I need to set styles and values instead.

Also, you put in an alert. That alone will cause the display to complete. But I don't want to distract the user from what he is doing with an alert.

I guess I still don't get the big picture. As far as the processing function requiring the data is concerned, you can always make the function which is called before the processing function to make changes to the global variable(map or associative array). This way you don't need to pass anything. Plus you get to decide when to call the processing.

And the 'alert()' in my code was just an example.

Last edited by ~s.o.s~; Aug 3rd, 2007 at 1:13 pm.

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 720

Failure as a human

Offline

8,872 posts
since Jun 2006

Permalink

Aug 3rd, 2007

Re: How do I prevent value and attribute delays?

See the entry before yours. Our posts crossed in time.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 3rd, 2007

Re: How do I prevent value and attribute delays?

There are several interlocking requirements:

- After the button is pushed, the getgrid function must run and report the errors.

- The error reports must appear before the loops and the long calculations start.

- Each function needs the result of the function before it. In the loop, each function needs the passed variables which the previous functions produced in THAT iteration of the loop.

- There must be nothing which requires the attention of the user except the error messages and the numbers on the screen. No alerts.

Last edited by MidiMagic; Aug 3rd, 2007 at 6:09 pm.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 4th, 2007

Re: How do I prevent value and attribute delays?

The more I think about it, the more I feel that using AJAX (if possible and permitted) is the way to go, though I am assuming that your application is not just an eye candy one which does no real work at the server.

AJAX is asynchronous (though you can make in synchronous, which is not of much help). This asynchronous nature helps the user is continuing his task while you do your time intensive processing at the server.

Also, is the user allowed to press multiple buttons or is it assured that only one button at a time would be pressed till the end result and processing finishes?

Once the loop starts, do the values of variables 'a', 'b', 'c', 'd' etc. change or remain the same as they were when the control entered the function?

But still, considering the checkgrid and the putgrid functions require the values from the computation of calcgrid() function, I don't think delaying the execution of calcgrid() would be of any use...

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 720

Failure as a human

Offline

8,872 posts
since Jun 2006

Page 1
2
Next

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Onactivate event not working for flash object in firefox

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Debug WebApp in IE7

DaniWeb Message

Cancel Changes

User Name
Password