Waiting for a div to exist before populating

[emozley]

Hi

I have a link which runs an AJAX request which opens a DIV that contains an HTML form that contains other divs. I then run call a second javascript function which populates the form.

What I have discovered is that unless I have some kind of pause the function that populates the form comes up with an error as the div contained with form doesn't yet exist.

To fix this I have added the following code:

function waitForDetailsPreviewDiv()
{
while (document.getElementById('detailsPreviewDiv')==null)
  {
  alert('Edit signature and click Save Changes');  
  }
}

This works fine in IE - you just get one alert box and by the time you click it you are good to go so the function ends and the form is filled in.

However in Chrome the alert box keeps opening up - i.e. document.getElementById('detailsPreviewDiv') remains NULL which it clearly isn't!

Any ideas?

Thanks very much

Ed

 

[feherke]

Hi

How is waitForDetailsPreviewDiv() called ?


Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[emozley]

Hi

The link is as follows.

<span class="text1" style="cursor:pointer;" onclick="closeDetailsActivePopup(); editSignatureForm(<% = DetailsActive(0, i) %>); waitForDetailsPreviewDiv(); refreshDetailsSet(<% = DetailsActive(4, i) %>, <% = DetailsActive(2, i) %>); "><% = DetailsActive(5, i) & "<br>" & DetailsActive(6, i) %></span>

The page is written in ASP classic so when the page executes the link would look something like:

<span class="text1" style="cursor:pointer;" onclick="closeDetailsActivePopup(); editSignatureForm(5); waitForDetailsPreviewDiv(); refreshDetailsSet(124, 2); ">Ed Mozley<br>IT Department</span>

Thanks very much!

Ed

 

[feherke]

Hi

I suppose the AJAX request is preformed by closeDetailsActivePopup().

What you could do one of these ( in descending order of preference ) :
[ul]
[li]Move the waitForDetailsPreviewDiv() call in the AJAX request's onload ( or similar, depending on the used framework ) event handler.[/li]
[li]Make the AJAX request synchronous.[/li]
[li]Change waitForDetailsPreviewDiv() to do nothing until the given element is found :

[b]function[/b] [COLOR=darkgoldenrod]waitForDetailsPreviewDiv[/color][teal]()[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'detailsPreviewDiv'[/i][/green][teal])==[/teal][b]null[/b][teal])[/teal]
    [COLOR=darkgoldenrod]setTimeout[/color][teal]([/teal]waitForDetailsPreviewDiv[teal],[/teal][purple]100[/purple][teal]);[/teal]
  [b]else[/b]
    [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]'Edit signature and click Save Changes'[/i][/green][teal]);[/teal]  
[teal]}[/teal]

[/li]
[li]Change waitForDetailsPreviewDiv() to do nothing until the given element is found :

[b]function[/b] [COLOR=darkgoldenrod]waitForDetailsPreviewDiv[/color][teal]()[/teal]
[teal]{[/teal]
  [b]while[/b] [teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'detailsPreviewDiv'[/i][/green][teal])==[/teal][b]null[/b][teal])[/teal] [teal];[/teal]

  [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]'Edit signature and click Save Changes'[/i][/green][teal]);[/teal]  
[teal]}[/teal]

[/li]
[/ul]


Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]