|
Id doesn't update the status bar in the loop...
var autoUpdate = true;
var autoUpdateString = "";
function updateStatusBar()
{
window.status = autoUpdateString;
autoUpdateString += ".";
}
function fillItemContent(category)
{
.
.
.
for(i = 0; i < items.length; i++ )
{
if(items[i]._category == category)
{
if(autoUpdate)
{
setTimeout(function() { updateStatusBar(); }, 10);
}
...
}
}
}
|
|
|
|
|
That is not how it should be. You need to drop the loop, just have a function that executes one iteration of it, and if it isn't the last iteration, use setTimeout to call itself again. That way the main (and only) thread gets relinquished for a short while, so the GUI can be updated and more calculations will happen later on.
Here[^] is an example.
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Status update test</title>
<script type="text/javascript">
var update = false;
var x = 0;
var theString = "";
function start() {
update = true;
setTimeout(function () { statusUpdate(); }, 10);
StartTimer.value = "Running.....";
}
function theInc() {
if (x < 10000000) {
x++;
theString = "Loop Value: " + x.toString();
}
else {
StartTimer.value = "Finished";
update = false;
}
}
function statusUpdate() {
TheValue.innerHTML = theString;
window.status = theString;
if (update) {
theInc();
setTimeout(function () { statusUpdate(); }, 10);
}
else {
TheValue.innerHTML = "Finished updating";
window.status = "Finished updating";
}
}
</script>
</head>
<body>
This is a test update page for the status updates within loop.
<input id="StartTimer" type="button" value="Start with Timer" onclick="start();" />
<div id="TheValue"></div>
</body>
</html>
|
|
|
|
|
Great example!
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
|
You are still trying to use a loop.
You should perform an incremental increase on one item in each update then re-initiate the timer to call the update process for the next update, repeat until all items are updated.
|
|
|
|
|
|
var autoUpdate = false;
var theString = "";
function startUpdate()
{
autoUpdate = true;
setTimeout(function () { updateStatus(); }, 10);
window.status = "Start updating...";
}
function updateStatus()
{
window.status = theString;
if(autoUpdate)
{
setTimeout(function () { updateStatus(); }, 10);
}
else
{
window.status += " > Updated...";
}
}
function fillItemContent(category)
{
var frameTop = 20;
var frameLeft = 0;
var frameWidth = 0;
var frameHeight = 0;
var width = 256;
var height = 302;
var borderWidth = 2;
var horGap = 8;
var verGap = 8;
var colCount = 0;
var rowCount = 0;
var colCnt = -1;
var rowCnt = 0;
var art = 1;
var itemCount = 0;
var outerContent = document.getElementById('sisalto2');
for(i = 0; i &lt; items.length; i++)
{
if(items[i]._category == category)
{
++itemCount;
}
}
colCount = Math.floor(document.body.clientWidth / (width + horGap));
frameWidth = colCount * (width + 2 * borderWidth + horGap) + 2 + 2 * borderWidth;
frameLeft = (document.body.clientWidth - frameWidth) / 2;
rowCount = Math.ceil(itemCount / colCount);
frameHeight = rowCount * (height + 2 * borderWidth + verGap) + 2 + 2 * borderWidth;
theString = "";
startUpdate();
contentString = '&lt;div id="container_' + category + '" style="width: ' + frameWidth + 'px;'
+ ' height: ' + frameHeight + 'px; padding-top: 0; margin-top: 20px; margin-bottom: 38px; margin-left: '
+ frameLeft + 'px; border: solid thin #AAA;"&gt;';
for(i = 0; i &lt; items.length; i++ )
{
if(items[i]._category == category)
{
++colCnt;
theString += ".";
sleep(199);
contentString += (
' &lt;div id="art_' + i +'" style="position:absolute; border:thin solid #000;'
+ ' background-image: url(img/tuote_tausta.gif); width:' + width + 'px; height:'
+ height + 'px; margin:' + (rowCnt * (height + verGap + 2) + verGap) + 'px auto ' + 'auto '
+ (colCnt * (width + horGap + 2 * borderWidth) + horGap) + 'px;"&gt;'
+ ' &lt;div id="tuoteotsikko_' + i + '" style="text-align:center; color:#b5672d; height:18px; '
+ ' border-bottom:thin solid #000;'
+ ' padding:2px; background-color:#ff9b44;"&gt;&lt;strong&gt;'
+ items[i]._shortname + '&lt;/strong&gt;&lt;/div&gt;'
+ ' &lt;div id="tuote_kehys_' + i + '" style="border:;'
+ ' color:#000; text-align: center; background: none; width:128px; height:96px; '
+ ' margin:10px auto auto 10px;"&gt;'
+ ' &lt;img id="tuotekuva_' + i + '" height="96px" style="background-color: #666; cursor: pointer;'
+ ' moz-opacity:1;filter:alpha(opacity=100);"'
+ ' onmouseout="this.style.MozOpacity=1;this.filters.alpha.opacity=100"'
+ ' onmouseover="this.style.MozOpacity=0.5;this.filters.alpha.opacity=50"'
+ ' onclick="showModal(event)"'
+ ' src="' + itemImages[i].src + '" /&gt;&lt;/div&gt;'
+ ' &lt;div id="tuotetiedot_' + i + '" style="position:absolute; border:none; color:#000;'
+ ' text-align:right; padding:0;'
+ ' height:96px; width:96px; top: 18px; overflow: hidden;'
+ ' margin:13px auto auto 146px;"&gt;Hinta:&lt;br /&gt;&lt;strong&gt;' + items[i]._price + '&lt;/strong&gt;&lt;br /&gt;'
+ items[i]._desc2 + '&lt;/strong&gt;&lt;/div&gt;'
+ ' &lt;div id="tuotekuvaus_' + i + '" style="text-align:left; position:absolute; border:thin solid #AFAF61;'
+ ' color:#000; background-image: url(img/tuote_taustaRev.gif);'
+ ' text-indent: 0px; width:232px; height:148px; margin:10px auto 10px 10px;"&gt;' + items[i]._desc1 + '&lt;/div&gt;'
+ ' &lt;/div&gt;');
if(colCnt &gt;= (colCount - 1))
{
colCnt = -1;
++rowCnt;
}
}
}
contentString += '&lt;/div&gt;';
autoUpdate = false;
outerContent.innerHTML = contentString;
}
</code>
Olli.
|
|
|
|
|
here is what you should do:
1. remove the for loop
2. look closely at the example given by Dave
3. stop removing your messages
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
 Sorry about for those removals, won't happend again...
I removesd the loop and now the code works as it should be working,
Thank you all.'
GBY: Olli.
|
|
|
|
|
hit a nerve by any chance..........
|
|
|
|
|
Just trying to put an end to this thread as the entire solution had been given many messages up already...
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
|
Agree with Luc.....stop removing your messages 
|
|
|
|
|
Sorry about for those removals, won't happend again...
I removesd the loop and now the code works as it should be working,
Thank you all.'
GBY: Olli.
|
|
|
|
|
Hi all,
is there any issue that you comes with chrome and IE when setting script with innerHtml in div element?
I'll explain it in this way.
I've define my own div element as popup message (just by floating on top of the page) and works fine. I can set html text on it as well properly. But when I set some script on it, FF works fine but chrome and IE not works fine. Anyone of you have an idea about that?
Hope you are clear with my issue, if not please let me know.
Thanks
I appreciate your help all the time...
CodingLover
modified on Thursday, April 28, 2011 5:11 AM
|
|
|
|
|
Can you provide an example that doesn't work in IE? Until then, here are some general guidelines:
Use "innerHTML", not "innerHtml".
Use createElement, set its innerHTML, then add it to the DOM, rather than adding the element to the DOM then setting the innerHTML. So, do this:
var newDiv = document.createElement("div");
newDiv.innerHTML = "Hello, <b>World</b>.";
var oldDiv = document.getElementById("myDiv");
oldDiv.parentNode.insertBefore(newDiv, oldDiv);
oldDiv.parentNode.removeChild(oldDiv);
newDiv.id = "myDiv";
Alternatively, avoid the use of innerHTML completely:
var mainDiv = document.getElementById("myDiv");
mainDiv.appendChild(document.createTextNode("Hello, "));
var boldWorld = document.createElement("b");
boldWorld.appendChild(document.createTextNode("World"));
mainDiv.appendChild(boldWorld);
mainDiv.appendChild(document.createTextNode("."));
Here is a hack that may or may not work:
var mainDiv = document.getElementById("myDiv");
mainDiv.innerHTML = "Hello <b>World</b>.";
mainDiv.innerHTML = mainDiv.innerHTML;
Depending on your specific issue, I've also seen hacks that modify the z-index so the browser knows to refresh the content.
|
|
|
|
|
Thanks for the reply.
AspDotNetDev wrote: Use "innerHTML", not "innerHtml".
Sorry about that, by mistake I've type it.
Say my string is something like this, it's working actually.
newDiv.innerHTML = "<script>function call_Al(){alert('this is a message');}</script><a href=\"#\" onclick=\"call_Al();\" >Click Here</a>"
I appreciate your help all the time...
CodingLover
|
|
|
|
|
This is not a bug rather a safety feature. You cannot add javascript code dynamically to a page after it has been rendered. Which means you can put the script content on the innerHTML, but it will not be processed by the script engine.
The only way I know of to dynamically add more script to a page after the initial page render is by using eval on the script string. Keep in mind though that means that the script you are adding is being executed.
|
|
|
|
|
Thanks for the comment.
can you have a look at in my previous reply. I try to wrap the string with eval() function, but it wont work too.  I'm totally lost.
I appreciate your help all the time...
CodingLover
|
|
|
|
|
You should only apply the eval on the script code part. So excluding any HTML. In your case you would have to try and split the javascript code from the string you are trying to append and eval that.
You would append <a href=\"#\" önclick=\"call_Al();\" >Click Here</a> this part to the innerHTML attribute and pass the content of the javascript to the eval statement. Keep in mind you will need to rewrite your javascript slightly to:
eval("call_Al = function() { alert('this is a message'); }");
|
|
|
|
|
Gerben Jongerius wrote: You would append <a href=\"#\" önclick=\"call_Al();\" >Click Here</a> this part to the innerHTML attribute and pass the content of the javascript to the eval statement. Keep in mind you will need to rewrite your javascript slightly to:
I never know that. I try to bind all html and script together. 
Anyway I've redesign my code, and now it works fine. Thanks a lot.
I appreciate your help all the time...
CodingLover
|
|
|
|
|
Hi,
I'm starting to test the new Dynamics CRM 2011 ; i'd like to figure out whether it could be useful for our needs.
I'm facing a problem since a couple of days : in the previous version, I could customize the time-pickers to show different time interval (default is 30 minutes).
But I can't find the right syntax for the 2011 version.
Here's my script :
var schedstart = Xrm.Page.getAttribute("scheduledstart");
var interval = 15;
var timeField;
var tables;
var table;
var row;
var cell;
var time;
if (schedstart != null)
{
timeField = schedstart.all.time;
if (timeField != null)
{
tables = timeField.getElementsByTagName("table");
if ((tables != null) && (tables.length > 0))
{
table = tables[1];
while (table.firstChild != null)
{
table.removeChild(table.firstChild);
}
for (hour = 0; hour < 24; hour++)
{
for (min = 0; min < 60; min += interval)
{
row = table.insertRow();
cell = row.insertCell();
time = ((hour < 10) ? "0" : "") + hour + ":" + ((min < 10) ? "0" : "") + min;
cell.setAttribute("val", time);
cell.innerText = time;
}
}
}
}
}
The problem is on line timeField = schedstart.all.time;. I've been searching for a reference document about manipulating form elements, but none of them does talk about datetime fields. I got plenty of examples if I want to deal whith lookups, optionsets, text, etc. ; but complete blackout about datetime fields.
Does anyone have an idea about how to access the time-picker of a datetime field in javascript ?
Edit :
I found how to manage this requirement. Here's the code :
setTimeInterval: function (ctrl, interval)
{
var control = Xrm.Page.getControl(ctrl);
var timeField = control._control._element.children[0].children[1].all.time.children[1].firstChild;
var row;
var cell;
var time;
if (timeField != null)
{
while (timeField.firstChild != null)
timeField.removeChild(timeField.firstChild);
for (hour = 0; hour < 24; hour++)
{
for (min = 0; min < 60; min += interval)
{
row = timeField.insertRow();
cell = row.insertCell();
time = ((hour < 10) ? "0" : "") + hour + ":" + ((min < 10) ? "0" : "") + min;
cell.setAttribute("val", time);
cell.innerText = time;
}
}
}
}
Hope this will be useful to someone 
|
|
|
|
|
|
Thanks for your reply. Unfortunately, it isn't a native HTML5 time field.
I'll keep trying to access the table cell where the combo box resides.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
