AJAX popup variable passing issue 1

[ralphonzo]

I've found a lovely popup script that I'm using in an AJAX/ASP application. It works a treat, but won't seem to let me take it that extra step and use variable data in it. Here're the functions that set it up:

<script type='text/javascript'>
function myPopupRelocate() {
  var scrolledX, scrolledY;
  if( self.pageYOffset ) {
    scrolledX = self.pageXOffset;
    scrolledY = self.pageYOffset;
  } else if( document.documentElement && document.documentElement.scrollTop ) {
    scrolledX = document.documentElement.scrollLeft;
    scrolledY = document.documentElement.scrollTop;
  } else if( document.body ) {
    scrolledX = document.body.scrollLeft;
    scrolledY = document.body.scrollTop;
  }

  var centerX, centerY;
  if( self.innerHeight ) {
    centerX = self.innerWidth;
    centerY = self.innerHeight;
  } else if( document.documentElement && document.documentElement.clientHeight ) {
    centerX = document.documentElement.clientWidth;
    centerY = document.documentElement.clientHeight;
  } else if( document.body ) {
    centerX = document.body.clientWidth;
    centerY = document.body.clientHeight;
  }

  var leftOffset = scrolledX + (centerX - 600) / 2;
  var topOffset = scrolledY + (centerY - 200) / 2;

  document.getElementById("styled_popup").style.top = topOffset + "px";
  document.getElementById("styled_popup").style.left = leftOffset + "px";
  document.getElementById("styled_popup").style.display = "block";
}
//fade functions
function setOpacity( value ) {
 document.getElementById("styled_popup").style.opacity = value / 10;
 document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function fadeInMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ )
   setTimeout( 'setOpacity(' + (i / 10) + ')' , 4 * i );
}

function fadeOutMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ ) {
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 4 * i );
 }

 setTimeout('closeMyPopup()', 400 );
}

function closeMyPopup() {
 document.getElementById("styled_popup").style.display = "none"
}
//end fade

function fireMyPopup(conid) {
  setOpacity( 0 );
  myPopupRelocate();
  document.getElementById("styled_popup").style.display = "block";
  document.body.onscroll = myPopupRelocate;
  window.onscroll = myPopupRelocate;
  fadeInMyPopup();
}
</script>

and here's the popup display:

<div id='styled_popup' name='styled_popup' style='width: 680px; height: 300px; display:none; position: absolute;'>
<table width='680' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='656' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutMyPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' bgcolor="#990033" style='background: url("images/x11_body.gif") top left; width: 680px; height: 277px;'>
POPUP CONTENT GOES HERE :o)
<script language="JavaScript">
document.write("CON ME: "+conid);
</script>
</td></tr>
</table>
</div>

here's the trigger code:

<input type='submit' value=' Fire ! ' onClick='fireMyPopup(<%=conkid(looper)%>)'>

'conkid(looper)' absolutely contains a value, but try as I might, I can't pick up the conid value, even though it's a global and contains the value at every other turn. Indeed, the 'document.write("CON ME: "+conid);' statement doesn't even print out the CON ME: element! I don't pretend to be very adept where JavaScript's concerned, but this is frying my head. Hopefully I'm just missing something fundamental, but any help would be greatly appreciated,

Ralph

 

[feherke]

Hi

OK, I see 'targetzone = "zone";' problem, so I've moved it to the end of the function.

Pointless. The [tt]XMLHttpRequest[/tt] is asynchronous, so it will run in a separate thread and you can not predict the moment when the response will arrive. Int meantime the submitForm() [tt]function[/tt]'s execution may or may not reach that point where you set the targetzone.

That approach of using the global targetzone is not the luckiest thing. "Saving" it for later use would be a good idea, but not sure if it will be enough :

[highlight]req[teal].[/teal]thetarget[teal]=[/teal]targetzone[teal];[/teal] [gray]// after this point you can set anything else to targetzone[/gray][/highlight]
req[teal].[/teal]onreadystatechange [teal]=[/teal] [b]function[/b][teal]()[/teal] [teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][highlight]req[teal].[/teal]thetarget[/highlight][teal]).[/teal]innerHTML [teal]=[/teal] [green][i]"Wait server..."[/i][/green][teal];[/teal]
  [b]if[/b] [teal]([/teal]req[teal].[/teal]readyState [teal]==[/teal] [purple]4[/purple][teal])[/teal] [teal]{[/teal]
    [b]if[/b] [teal]([/teal]req[teal].[/teal]status [teal]==[/teal] [purple]200[/purple][teal])[/teal] [teal]{[/teal]
      document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][highlight]req[teal].[/teal]thetarget[/highlight][teal]).[/teal]innerHTML  [teal]=[/teal] [green][i]""[/i][/green] [teal]+[/teal] req[teal].[/teal]responseText[teal];[/teal]
    [teal]}[/teal] [b]else[/b] [teal]{[/teal]
      document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][highlight]req[teal].[/teal]thetarget[/highlight][teal]).[/teal]innerHTML[teal]=[/teal][green][i]"Error: returned status code "[/i][/green] [teal]+[/teal] req[teal].[/teal]status [teal]+[/teal] [green][i]" "[/i][/green] [teal]+[/teal] req[teal].[/teal]statusText[teal];[/teal]
    [teal]}[/teal]
  [teal]}[/teal]
[teal]}[/teal][teal];[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[ralphonzo]

Well Feherke, if you ever need any ASP or Flash help, give me a nudge. The script works a treat and I've no idea why or how. I'll try to get my head around it now. Thank you for all your help. I certainly wouldn't have been able to figure it out myself. I don't suppose you have any idea where I might find some definitive in-depth AJAX tutorials/examples do you?

I'll leave you alone now,

thanks massively again,

Ralph

 

[feherke]

Hi

Sorry, I not know about such tutorials. I just learned on the fly when needed. And when needed, I had no time for tutorials.

Feherke.

http://free.rootshell.be/~feherke/

 

[ralphonzo]

Same here with ASP, but that environment makes sense!!! )

You're a good sort, thanks.