Why SetTimeout doesn't work inside object? - JavaScript Discussion Boards

AspDotNetDev wrote:
<layer>Yeah, the reason eval doesn't work is because "myDiv" isn't created yet, and eval tries to immediately evaluate code that references that element.

Correct! And if you move the script after the body tag, both will work.

AspDotNetDev wrote:
Using setTimeout seems to put the function call onto a procession queue so that it gets called once the current operation (loading the HTML) is complete.

Yeah, it seems the function is executed only after the whole HTML is loaded.

..Go Green..

"eval" will execute "somecode()" right away. "setTimeout" will execute "somecode()" at a later time (even with the duration set to 0).

C++

S<T>::f(U) // Out of line.

How later?

Help people,so poeple can help you.

I am not sure exactly, but I think it will execute next chance it gets (i.e., after the current processing is complete). So, for example, if the page is still loading, the JavaScript will run after the page has loaded.

C++

S<T>::f(U) // Out of line.

ok, sir;
i have used setTimeout() with 0 time to call client method when a message box dialog got closed. actualy i am not good in javascript, but i sow that call in some web resources used in ajax controls toolkit for asp.net.
plaese take a look at my article of Message Box Control[^] and tell me what do you think;

regards;

Help people,so poeple can help you.

Hi ,
I on button click I open a jquery modal with iframe which loads another aspx page.
Now this other aspx page makes a call to webservice and then loads data. I have the service call on the page load of this page.
So there a gap between the modal window opens and the data load in it.
How can I implement a wait gif or just a text like say 'processing' till the data loads?

Thanks

My code is as below

<div id="mydiv" >
       <iframe id ="popup"  width ="100%" height="50%"></iframe>
   </div>

jquery/javascript

function openDialog() {

           var url = "test.aspx?NAME=" + encodeURIComponent($("#<%=txtName.ClientID %>").val());
           $("#popup").attr("src", url);

           $("#mydiv").dialog('open');
       }

$(document).ready(function() {

           $("#mydiv").dialog({
               autoOpen: false,
               modal: true,
               width: 500,
               scroll: true

           });

       });

You don't really need to use an iframe in this instance, at least that I can see. iframes are typically used to display content from a different source, like a different URL. You can simply replace the the HTML content of the div. That would give you more control over the process

The general idea is

function openDialog()
{
  $("#wait").show();

  $.ajax({
  url: "test.aspx?NAME=" + encodeURIComponent($("#<%=txtName.ClientID %>").val());,
  success: complete;
  }
}); 
}

function complete(result)
{
  $("#wait").hide();
 
  $("#mydiv").html(result);
 
  // show dialog 
 
}

I know the language. I've read a book. - _Madmatt

I have a problem and i can't figure out why th setTimeout function in this object doesn't tick...
Everything else work just fine but the no ticking. I've struggled with this almost all day but
i ca'nt get the setTimeout working...

Please u wiser ones, hjälp mej...auttakaa minua...help me...

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <script type="text/javascript" src="js/prototype.js"></script> 

<script type="application/javascript">
<!--
  
var objIdCnt = 0;
var objIdPre = "progressBar";

var ProgressBar = Class.create({
  initialize: function(Container) {
     this.Container     = Container;              // Specifies the container of img element.
    this.Id             = objIdPre + objIdCnt++;  // Specifies  unique id for each img element
    this.Type           = 1;                      // Specifies look of the progress bar: 
                                                  //  1 = Red, 2 = green, 3 = Blue in v1.0
    this.Interval       = 100;                    // Time in milliseconds between marquee animation updates.
    this.Step           =  2;                     // Specifies the marquee steps in pels when animating.   
    this.Stopped        = true;                   // Determines if animation is stopped.      
    this.Min            = 0;                      // Specifies the lower limit of the range of possible positions.       
    this.Max            = 100;                    // Specifies the upper limit of the range of possible positions.
    this.Position       = 50;                     // Specifies the current position of the progress bar. 
    this.Width          = 100;                    // Specifies the width of img element, same as the width
                                                  //  of img bitmap loaded. Updates automatically.
    this.Left           = 10;                     // Specifies the left edge of container
    this.Top            = 10;                     // Specifies the top edge of container
    this.Visible        = false;                  // Determines whether the component appears onscreen.  
    
    this.t;
    this.IncDecTotal    = 0;
    this.IncDec         = 0;
    this.ValTo          = 0;    
  },    
  create : function(position, value)
  {
    if(this.Container == null)
    {
      alert("No container.");  
    }        
    else
    {  
      var progBarImage;
      progBarImage = document.createElement('IMG');
      progBarImage.setAttribute("id", this.Id);
      progBarImage.src = "img/Frame_200x16.png";
      progBarImage.style.backgroundRepeat = "no-repeat";
      this.Width = progBarImage.width; 
      progBarImage.style.backgroundPosition = 
        -(this.Width - (this.Position - this.Min) /(this.Max - this.Min) * this.Width) + "px 0px";              
      this.Container.appendChild(progBarImage);
      this.Container.style.position = "absolute";
      this.Container.style.left = this.Left + "px";
      this.Container.style.top  = this.Top  + "px";
      this.setType(value);
      this.setPosition(position);      
    }          
  },
  hide : function()
  {
    $(this.Id).style.visibility = "hidden";  
  },
  show : function()
  {
    $(this.Id).style.visibility = "visible";  
  },
  setPosition : function(position)
  {
    this.Position = position;
    if(position > this.Max)
    {
      this.Position = this.Max;
      clearTimeout(this.t);        
    }
    if(position < this.Min)
    {
      this.Position = this.Min;
      clearTimeout(this.t);
    }
    $(this.Id).style.backgroundPosition = 
      -(this.Width - (this.Position - this.Min) / (this.Max - this.Min) * this.Width) + "px 0px";
  },
  setType : function(value)
  {
    switch(value)
    {
      case 1: $(this.Id).style.backgroundImage = "url(img/RedBar_400x16.png)";
        break;          
      case 2: $(this.Id).style.backgroundImage = "url(img/GreenBar_400x16.png)";
        break;
      case 3: $(this.Id).style.backgroundImage = "url(img/BlueBar_400x16.png)";
        break;            
    }
  },  
  doAnimate : function(value)
  {      
    if(this.Position == value)
    {
      return;
    }
    this.IncDecTotal = 0;
    this.ValTo = value;      
    this.IncDec = this.Step;
    if(this.Position > value)
    {
      this.IncDec = -this.Step;  
    }
    this.Stop = false;
    this.timedAnimate();
  },
  timedAnimate : function()
  {
//    alert("this.Id: " + this.Id + " Intv: " + this.Interval);
    this.setPosition(this.Position + this.IncDec);
    if((this.IncDec < 0) && (this.Position <= this.ValTo))
    {
      clearTimeout(this.t);
      this.Stop = true;
    }
    else if((this.IncDec > 0) && (this.Position >= this.ValTo))
    {    
      clearTimeout(this.t);
      this.Stop = true;
    }
    else
    {
      this.t = setTimeout("this.timedAnimate()", this.Interval);    
//      this.t = setTimeout(function() { this.timedAnimate(); }, this.Interval);
    }  
  },  
  sleep : function(delay)
  {
    var start = new Date().getTime();
    var cur = start
  
    while(cur - start < delay)
    {
      cur = new Date().getTime();
    }
  }
});

-->
</script>
</head>

<body>

<div id="progBar0"></div>
<br />
<input type="button" value="+5" onclick="progress0.setPosition(progress0.Position + 5);" />
<input type="button" value="-5" onclick="progress0.setPosition(progress0.Position - 5);" />

<div id="progBar1"></div>
<div id="progBar2"></div>

<script type="application/javascript">
<!--
  
var progress0 = new ProgressBar($("progBar0"));
var progress1 = new ProgressBar($("progBar1"));
var progress2 = new ProgressBar($("progBar2"));

progress0.create(25, 1);

progress1.Top = progress0.Top + 50;
progress1.create(50, 2);

//progress2.hide();

progress2.Top = progress1.Top + 50;
progress2.create(75, 3);

progress1.doAnimate(100);
-->    
</script>

</body>
</html>
</code>

If u want the images for testing, just ask...i'm glad to send them.

GBY:Olli.

Do u want to be always right or do u want to be happy...

Instead of this:

JavaScript

setTimeout("this.timedAnimate()", this.Interval);

Do this:

JavaScript

setTimeout(this.timedAnimate, this.Interval);

With your version, you are passing in a string, which gets evaluated when setTimeout runs your code rather than when you call setTimeout. So, "this" refers to a different scope/context. The solution is to pass in the actual function you want to be called.

C++

S<T>::f(U) // Out of line.

I tried but it didn't worked...is the 'this' pointing window object rather than the object
i've created, if so do i have to move the timed animate to global or can i somehow other
way point it to window.setTimeout method?

I tried also use of closure attribute like setTimeout(function() { timedAnimate(); }, this.Interval),
but noo-ou-ou nothing happened.

i tried like this:

  doAnimate : function(value)
  { 
    if(this.Position == value)
    {
      return;
    }
    this.IncDecTotal = 0;
    this.ValTo = value;      
    this.IncDec = this.Step;
    if(this.Position > value)
    {
      this.IncDec = -this.Step;  
    }
		
		alert("this: " + this + " this.IncDec: " + this.IncDec);	
		
    this.Stop = false;
    this.timedAnimate();
  },
  timedAnimate : function()
  {	
    this.setPosition(this.Position + this.IncDec);
		
    if((this.IncDec < 0) && (this.Position <= this.ValTo))
    {
      clearTimeout(this.t);
      this.Stop = true;
    }
    else if((this.IncDec > 0) && (this.Position >= this.ValTo))
    {    
      clearTimeout(this.t);
      this.Stop = true;
    }
    else
    {
      this.t = setTimeout(timedAnimate, this.Interval);
    }
  },
</code>

Olli.

Instead of this:

JavaScript

this.t = setTimeout(timedAnimate, this.Interval);

Try this:

JavaScript

this.t = setTimeout(this.timedAnimate, this.Interval);

C++

S<T>::f(U) // Out of line.

I'll try that but meanwhile i moved the function to global scope and i pass the object to it. It works just fine but
it's not -in- the object so it ruins my OO way of thinking... Smile | :)

(i'm mainly C++ programmer and JScript is new to me).

I made it like this:

function timedAnimate(elementId)
{	
  if(elementId.Stop == true)
  {
    return;
  }

  elementId.setPosition(elementId.Position + elementId.IncDec);
	
  if((elementId.IncDec < 0) && (elementId.Position <= elementId.ValTo))
  {
    clearTimeout(elementId.t);
    elementId.Stop = true;
  }
  else if((elementId.IncDec > 0) && (elementId.Position >= elementId.ValTo))
  {    
    clearTimeout(elementId.t);
    elementId.Stop = true;
  }
  else
  {
    elementId.t = setTimeout(function() { timedAnimate(elementId) }, elementId.Interval);
  }
};
</code>

Olli.

Hi all,

I've kind of design where once an item is selected from a dropdownlist (HTML select) a new dropdown list is displayed with relevant items. It can be upto another level too. For example, say I've a dropdown to select the country. Once I choose the country relevant cities are displayed in another dropdown list below the original one. Once a city is selected from new list, hotels is displayed in that list.

Now say I submit the form and do the process. That part is fine. But once user click back button (to come back to that dorpdown lists page) I want to preserve user selections.

Any idea that how to do it.

All the lists generated with AJAX calls. Since dynamically generated list from the second level I cannot do with JS, using getElementByID() i cannot find them.

Comments really appreciate.

Thanks in advance

I appreciate your help all the time...
CodingLover Smile | :)

modified on Thursday, May 5, 2011 11:58 PM

Hi
May be this would be helpful.

1. before navigating from Dropdown page to another page you should save all the Three selected values (Country, City and Hotel in hidden field).

2. When you will get back then check is hidden field contain value.

3. Execute process one by one like
first get the Countries using AJAX call and set selected values according to Hidden field value.
and so on for the hotel...

The above is algorithm and i am not sure it is work or not but you may try something like that.

Thanks,
Imdadhusen

sunaSaRa Imdadhusen
+91 99095 44184

Thanks for the comment.

Actually what I've done was pass URL parameters with pre-define conding mechanism in my application. Your suggestion is worth to try, but I've already done it in that way. I'll give a try later on your suggestion.

Thanks again. Smile | :)

I appreciate your help all the time...
CodingLover Smile | :)

How status bar can be refreshed inside a loop? Is it even possible?

// start constructing..
// insert items
for(i = 0; i &lt; items.length; i++ )
{
    if(items[i]._category == category)
    {
        window.status = (&#39;fillItemContent()&#39; + &quot;: &quot; + i);
    .
    .
    .
    }
}

That doesn't work.

Olli.

status will probably not update as the message pump will not release until the loop stops and functions exit.

This is the same for windows forms etc.

I don't think you can force a refresh as you can with forms apps either.

One option might be to update a shared variable and then set up a timer that update the status based on the shared variable value and then the timer retriggers its next update timer tick. Use a flag to determine if the timer should continue to update or not.

Dave
Find Me On: Web|Facebook|Twitter|LinkedIn

Folding Stats: Team CodeProject

I'm new with JScript, i'm C, C++ coder. Would u be kind enough to show me an little example. So, i make global variable or pass variable to setTimeOut method and update the status bar in there - or...what? The goal i want is to show load progression in status bar...and just practicing for fun...

Olli.

Have a look at my article Windows 7 Sidebar Gadget - CodeProject Reputation Watcher[^], there is a section dedicated to implementing an autorefresh timer. that should help get you going.

Dave
Find Me On: Web|Facebook|Twitter|LinkedIn

Folding Stats: Team CodeProject

Id doesn't update the status bar in the loop...

/////////////
// globals
/////////////
var autoUpdate		= true;
var autoUpdateString	= "";

///////////////////////
// update status bar
///////////////////////
function updateStatusBar()
{
  window.status = autoUpdateString;
  autoUpdateString += ".";
}

////////////////
// show items
////////////////
function fillItemContent(category)
{
  .
  .
  .
  // start constructing..
  // insert items	
  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.

Smile | :)

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.

Here is a working script (Note: Only tested in Chrome).

HTML

<!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) {
                //Do an increment
                x++;
                //update the status value
                theString = "Loop Value: " + x.toString();
            }
            else {
                //Finished updating
                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>

Dave
Find Me On: Web|Facebook|Twitter|LinkedIn

Folding Stats: Team CodeProject

Great example!

Thumbs Up | :thumbsup:

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.

cheers Luc.

Dave
Find Me On: Web|Facebook|Twitter|LinkedIn

Folding Stats: Team CodeProject

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.

Dave
Find Me On: Web|Facebook|Twitter|LinkedIn

Folding Stats: Team CodeProject