•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 425,933 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 1,632 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2494 | Replies: 17 | Solved
 |
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation: 
Rep Power: 7
Solved Threads: 115
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?
- 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 4:16 am.
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2006
Location: India
Posts: 6,855
Reputation: 
Rep Power: 23
Solved Threads: 344
How about posting some code so that we have something to chew on?
I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 115
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.
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.
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.
The JavaScript uses this simple loop to put the values in the form boxes. It works fine, except for the delays.
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];
};Here are the form items. They are inside a form tag pair named "prgrss", along with other form items.
<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 1:34 pm. Reason: typogoofical
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2006
Location: India
Posts: 6,855
Reputation:
Rep Power: 23
Solved Threads: 344
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:
This way you can keep the function which consumes the most of CPU cycles to run at a later moment.
Something like this:
<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.
I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 115
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.
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.
Daylight-saving time uses more gasoline
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 115
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):
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?
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):
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 12:19 pm. Reason: thot
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2006
Location: India
Posts: 6,855
Reputation:
Rep Power: 23
Solved Threads: 344
•
•
•
•
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.
And the 'alert()' in my code was just an example.
Last edited by ~s.o.s~ : Aug 3rd, 2007 at 12:13 pm.
I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 115
See the entry before yours. Our posts crossed in time.
Daylight-saving time uses more gasoline
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 115
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.
- 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 5:09 pm.
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2006
Location: India
Posts: 6,855
Reputation:
Rep Power: 23
Solved Threads: 344
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...
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...
I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Previous Thread: Onactivate event not working for flash object in firefox
- Next Thread: Debug WebApp in IE7
