Php page loaded into div not performing javascript

Hello Users, I am trying to call a javascript method on a page that is loaded into a div with ajax.I cannot get javascript functioncalls to work.And I don`t know why,that is when I run the page in its own browser window it works.
Can I do it different to ensure it loads javascript?

<?php
session_start();
require_once("CartClass.php");
require_once("Globals.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>area 3</title>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
<script type="text/javascript">
 pricesAr = new Array(); 	
function addToPriceArray(value)
{				 	
alert("adding to price array is = " + value);		
pricesAr.push(value); 
alert(pricesAr);
 return;
}			
</script>	
<?php
 $prodCol = array();
 $workingRoutesPrice = array();
  ?>
<h1>TEST</h1>
<?php
$ProductCol = file_get_contents('Routes.txt');  
if(empty($ProductCol))
{
    Globals::loadRoutes();
     $prodCol = ProductCollection::getInstance();
     $SessionPrds = serialize($prodCol);
     $_SESSION['products'] = $SessionPrds;
    file_put_contents('Routes.txt', $SessionPrds);
}
 else
{ 
    $prodCol = unserialize($ProductCol);
}
     $prodCol->setWorkingRoutes('Perth');
?>
<form id="frmArea3" name="frmArea3" method="post" onsubmit="return validateFields()"
action='<?php echo Globals::BaseUrl(); ?>Index.php?frompage=area3&action=add'>  
To City:&nbsp;&nbsp;
<input type="hidden" name="postback" id="postback" value="true"  />
<input type="hidden" name="from_city" id="from_city" value='<?php echo $fromCity ?>' />
  <select name="to_city" id="to_city" class="combo">
   <option value="choose"> Select.. </option>
  <?php
       $i = 0;
      foreach ($prodCol->getWorkingRoutes() as $prd)
{
?>
  <option title="<?php echo $prd->getID(); ?>" 
     value="<?php echo $prd->getToCity(); ?>" 
      id="toCity" >
      <?php echo $prd->getToCity(); ?>
  </option>
<?php
     $workingRoutesPrice[$i] = $prd->getPrice();
     echo " <script type='text/javascript'>";
     echo " addToPriceArray(" . $workingRoutesPrice[$i] . ");";
     echo " </script>";
     $i++;
   }
?>
</select> </br>
&nbsp;&nbsp;
Price : <input id="price" name="price" readonly="true" value=""  />	 
</br> 
&nbsp;&nbsp;
Number of Tickets : <input id="quantity" name="quantity"  />	 
<p>
  <button type="submit">
  BUY
  </button>
</p> 
</form>
</body>
</html>

Can you load it with the rest of the page, or does it have to be called in with AJAX?

Hello ferrari_chris,the page is posted into the div through ajax.Yeah when I paste in the contents of the page without html, title, head, body tags it Runs!.
Do I need to remove the html tags from my posting in page? Should that it matter that those tags are in at all?
Thanks

Well, it seems that you will need to remove those tags then, yes.

And yes, if we think about it, it will matter. What you’re doing is declaring a whole new page in the middle of your page, rather than just some new content.

So, your problem is fixed now?

Hello ferrari_chris, I deleted just the html, head,title,body tags the way I pasted it into the main page.But it still shows no alert on load where pasting in directly into the page does.
There is no messages in the FF error console too.

Try moving your JavaScript to the end of the content (and removing all the BODY, HTML etc. tags from the bottom too).

See if that helps?

Hello ,
this is what the php insert through ajax looks like now.The ajax simply locates the url and includes it in the div inner html.


<?php
session_start();
require_once("CartClass.php");
require_once("Globals.php");
?>

<script type="text/javascript">
 pricesAr = new Array(); 	
function addToPriceArray(value)
{				 	
alert("adding to price array is = " + value);		
pricesAr.push(value); 
alert(pricesAr);
 return;
}			
</script>	
<?php
 $prodCol = array();
 $workingRoutesPrice = array();
  ?>
<h1>TEST</h1>
<?php
$ProductCol = file_get_contents('Routes.txt');  
if(empty($ProductCol))
{
    Globals::loadRoutes();
     $prodCol = ProductCollection::getInstance();
     $SessionPrds = serialize($prodCol);
     $_SESSION['products'] = $SessionPrds;
    file_put_contents('Routes.txt', $SessionPrds);
}
 else
{ 
    $prodCol = unserialize($ProductCol);
}
     $prodCol->setWorkingRoutes('Perth');
?>
<form id="frmArea3" name="frmArea3" method="post" onsubmit="return validateFields()"
action='<?php echo Globals::BaseUrl(); ?>Index.php?frompage=area3&action=add'>  
To City:&nbsp;&nbsp;
<input type="hidden" name="postback" id="postback" value="true"  />
<input type="hidden" name="from_city" id="from_city" value='<?php echo $fromCity ?>' />
  <select name="to_city" id="to_city" class="combo">
   <option value="choose"> Select.. </option>
  <?php
       $i = 0;
      foreach ($prodCol->getWorkingRoutes() as $prd)
{
?>
  <option title="<?php echo $prd->getID(); ?>" 
     value="<?php echo $prd->getToCity(); ?>" 
      id="toCity" >
      <?php echo $prd->getToCity(); ?>
  </option>
<?php
     $workingRoutesPrice[$i] = $prd->getPrice();
     echo " <script type='text/javascript'>";
     echo " addToPriceArray(" . $workingRoutesPrice[$i] . ");";
     echo " </script>";
     $i++;
   }
?>
</select> </br>
&nbsp;&nbsp;
Price : <input id="price" name="price" readonly="true" value=""  />	 
</br> 
&nbsp;&nbsp;
Number of Tickets : <input id="quantity" name="quantity"  />	 
<p>
  <button type="submit">
  BUY
  </button>
</p> 
</form>

Also I have the Ajax code I am using exclusively for this.I works ok posting content into divs.



function contentToDIV(divName, append, content)
{
   if(append == 'true')
   {
    document.getElementById(divName).innerHTML += content;
   }
   else if(append == 'false')
   {
    document.getElementById(divName).innerHTML = content;
   }
}


//global 
var divName = "";
var bolAppend = false;

//http://www.webdeveloper.com/forum/showthread.php?t=73180
function processAjax(url, aDivName, bAppend) {
  
      divName = aDivName;
      bolAppend =  bAppend;
    if (window.XMLHttpRequest) { // Non-IE browsers
      req = new XMLHttpRequest();
			
      req.onreadystatechange = targetDiv;
      try {
        req.open("GET", url, true);
      } catch (e) {
        alert(e);
      }
      req.send(null);
    } else if (window.ActiveXObject) { // IE
      req = new ActiveXObject("Microsoft.XMLHTTP");
      if (req) {
			
        req.onreadystatechange = targetDiv;
        req.open("GET", url, true);
        req.send();

      }
    }
}

function targetDiv(divname) {
    if (req.readyState == 4) { // Complete
          if (req.status == 200) { // OK response
	contentToDIV(divName, bolAppend, req.responseText);
          } else {
            alert("Problem: " + req.statusText);
          }
    }
}

Try this for the page that is called in:


<?php
session_start();
require_once("CartClass.php");
require_once("Globals.php");
?>

<?php
 $prodCol = array();
 $workingRoutesPrice = array();
  ?>
<h1>TEST</h1>
<?php
$ProductCol = file_get_contents('Routes.txt');  
if(empty($ProductCol))
{
    Globals::loadRoutes();
     $prodCol = ProductCollection::getInstance();
     $SessionPrds = serialize($prodCol);
     $_SESSION['products'] = $SessionPrds;
    file_put_contents('Routes.txt', $SessionPrds);
}
 else
{ 
    $prodCol = unserialize($ProductCol);
}
     $prodCol->setWorkingRoutes('Perth');
?>
<form id="frmArea3" name="frmArea3" method="post" onsubmit="return validateFields()"
action='<?php echo Globals::BaseUrl(); ?>Index.php?frompage=area3&action=add'>  
To City:&nbsp;&nbsp;
<input type="hidden" name="postback" id="postback" value="true"  />
<input type="hidden" name="from_city" id="from_city" value='<?php echo $fromCity ?>' />
  <select name="to_city" id="to_city" class="combo">
   <option value="choose"> Select.. </option>
  <?php
       $i = 0;
      foreach ($prodCol->getWorkingRoutes() as $prd)
{
?>
  <option title="<?php echo $prd->getID(); ?>" 
     value="<?php echo $prd->getToCity(); ?>" 
      id="toCity" >
      <?php echo $prd->getToCity(); ?>
  </option>
<?php
     $workingRoutesPrice[$i] = $prd->getPrice();
     echo " <script type='text/javascript'>";
     echo " addToPriceArray(" . $workingRoutesPrice[$i] . ");";
     echo " </script>";
     $i++;
   }
?>
</select> </br>
&nbsp;&nbsp;
Price : <input id="price" name="price" readonly="true" value=""  />	 
</br> 
&nbsp;&nbsp;
Number of Tickets : <input id="quantity" name="quantity"  />	 
<p>
  <button type="submit">
  BUY
  </button>
</p> 
</form>

<script type="text/javascript">
 pricesAr = new Array(); 	
function addToPriceArray(value)
{				 	
alert("adding to price array is = " + value);		
pricesAr.push(value); 
alert(pricesAr);
 return;
}			
</script>	


I put your JavaScript from the top, down the bottom. But I suspect this won’t work.

I don’t see any onload calls in there anyway.

Is the problem that you’re not getting the alerts from the addToPriceArray function?

Hello ferrari_chris,yes the problem is that addToPriceArray is not being called so I dont see the alerts.What I am trying to do is set up a onchange select to change the price.I can do that no problem in a new page,but I just cant get javascript to load in the post in page.
If I can get a javascript event in the post in page to run I am done I suppose.

Hello ,I put the in page javascript function in a external file and referenced it.Yeah it gets called,though the array does not contain anything.Here after the page writes this after each option.You can put javascript in a select controls tags after each option right or Not ?

<script type="text/javascript">
addToPriceArray(340.00); 
</script>

Hello ferrari_chris, I have changed to keep javascript out of the select tags.And those calls are not being made but when perfrom a on change select it makes the call?
My only solution looks to be gather the array after the load from the php array each time?Seems silly.
Yeah no javascript in the page is being run only calls from events(select onchange).
Makes it hard would have to pass in values from php as array then call to change.
Need something like onchange fill up array pass it out.I have only the php array.
Puzzling???:nono

<div id="area3">
<h1>TEST</h1>
<script src="Main.js" type="text/javascript"></script>
<form action="http://localhost/IP1/Index.php?frompage=area3&amp;action=add" onsubmit="return validateFields()" method="post" name="frmArea3" id="frmArea3">  
To City:&nbsp;&nbsp;
<input type="hidden" value="true" id="postback" name="postback">
<input type="hidden" value="" id="from_city" name="from_city">
<select onchange="updatePrice(this)" class="combo" id="to_city" name="to_city">
   <option value="choose"> Select.. </option>  	   
   <option id="0" value="Sydney" title="44">  Sydney   </option>
    <option id="1" value="Melbourne" title="43">  Melbourne   </option>
</select>	
<script type="text/javascript"> 
addToPriceArray(340.00); 
addToPriceArray(250.00); 
</script>		<br>	&nbsp;&nbsp;	
Price : <input value="" name="price" id="price">	 
<br> 	&nbsp;&nbsp;	
Number of Tickets : <input name="quantity" id="quantity">	 		
<p>  		
<button type="submit"> 		
BUY 		
</button>	
</p> 
</form>	
</div>

I don’t really understand what you’ve written there.

But, you’ve got it working now?

I did a test and when I remove the javascript into the external file and make a javascript call on a onchange on event it works.But even though javascript is being written with call to a function and has data no call is being made when page is loaded into div.
You would think there would be no difference in availablility to javascript at any stage.
Looks impossible to build a javascript array on load and call javascript functions.Other option? Load all data into seperate hidden fields ? Really?

If you do know the trick to getting javascript to execute on page loaded from ajax to a div please comment.