onload Issues with Ajax Panels

[douglinley]

I've recently delved into Ajax and I'm currently converting an old web app written in PHP to use some Ajax functionality where applicable.

The problem I'm having is that I've got some javascript in the onload that selects the proper option in a drop down list based on what's returned from the database. Since this form is now being returned in an Ajax call, the onload won't be called when the panel loads.

I've tried imbedding the javascript call in the Ajax panel but it still won't trigger. Has anyone else had this issue, and how did you solve it?

Thanks in advance for the help.

-Doug Linley

[daveVk]

Since this form is now being returned in an Ajax call, the onload won't be called when the panel loads

Please explain what the ajax call returns, and what the panel is. If the returned data from ajax is being used to populate an existing form, all should be well, or are additional form elements "the panel" contained in and/or generated from the ajax reply?

[douglinley]

Thanks for the reply Dave.

It actually returns a new form that is displayed by grabbing the div in the ajax call and using innerHTML.

Here is the code that is grabbed from the Ajax call:

<?php 
session_start(); 
require_once("lib/utils.php"); 
require_once("lib/config.php"); 
require_once("lib/database.php"); 
require_once("lib/user.php"); 
require_once("lib/session.php"); 
if(isset($_POST['submit'])) { 
$submit_value = $_POST['submit']; 
} 
if($submit_value == "Cancel") { 
header("location: userlist.php"); 
} 
$db = new Database($host,$username,$password,$database); 
$db->open(); 
$session = new Session($db); 
if(!$session->isSession()) { 
header("location: login.php"); 
} 
$session->id = session_id(); 
if(isset($_POST['id'])) { 
$id = $_POST['id']; 
} else { 
echo '<h3 class="failed">Error: No ID entered.</h3>'; 
} 
$user = new User($db); 
$user->get($id); 
if($submit_value == "Save"){ 
$user->user_level = $_POST['usertype']; 
$user->save(MODIFY); 
} 
?> 
<form id="user" name="user" method="POST" action="<?php echo $_SERVER['PHP_SELF']?>"> 
<label>User Type</label> 
<select id="usertype" name="usertype"> 
<option value="0">banned</option> 
<option value="1">user</option> 
<option value="2">admin</option> 
</select> 
<input type="hidden" name="id" value="<?php echo $user->id?>"> 
<label>First Name</label><input type="text" id="firstname" name="firstname" value="<?php echo $user->firstname?>"/> 
<label>Last Name</label><input type="text" id="lastname" name="lastname" value="<?php echo $user->lastname?>" /> 
<label>User Name</label><input type="text" id="username" name="username" value="<?php echo $user->username?>" /> 
<label>Email</label><input type="text" id="email" name="email" value="<?php echo $user->email?>" /> 
<input type="submit" id="submit" name="submit" value="Save"> 
<input type="submit" id="cancel" name="submit" value="Cancel"> 
</form> 
<script type="text/javascript"> 
choose(<?php echo $user->user_level?>); 
</script> 

[daveVk]

I believe IE has problems with dynamicly adding form fields, or it has given me trouble in the past, it seems to allocate storage for form data only on initial page load. Take care and consider if alternative of returning data into existing form is an option.

So you load the returned data/html into a div, what is the onload problem with that?

[douglinley]

Sorry, I forgot to list which browsers I was testing with.

I've tested with Safari 3.0.4 and Firefox 2.4 on Max OS 10.4.x.

I do load the info into a div using innerHTML. When the page first loads, the onload would be called to set an element on an element that doesn't exist. So it was moved out of the onload. Then, when the ajax requested page loads, it wouldn't fire the onload because the body had already loaded. Forgive me if I misunderstood your last question.

[douglinley]

I've suddenly had a realization that has me quite embarrassed. I don't even need Javascript to do what I'm doing here. I can do it by using PHP and setting the selected attribute on the option tag.

I would imagine though, that what I was trying to do would be useful in the future. I have to believe that in some instances you would want the page returned by responseText to execute embedded javascript, so I am still interested in figuring out how to do this.

One thought I had was to create an XML document with the html inside the XML, and then parse it into the DOM when the response is returned. For example, the XML would look like this:

<?xml version="1.0" encoding="UTF-8"?> 
<ajaxRequest> 
  <h3>Some Text</h3> 
  <script text="text/javascript"> 
    myFunction(); 
  </script> 
</ajaxRequest> 

Once the responseXML is returned, I would just parse and create nodes and text nodes. I am guessing this method would cause the embeded JS to be invoked. I plan on testing this weekend.

Anyone handle responses this way?

[douglinley]

Besides the method I mentioned above, the eval() method could be used to execute Javascript in an innerHTML.

[daveVk]

Did not realize you had js embedded within html of ajax response. I take it original question refers to firing this code?

Extract the js and eval() it should work.

I dont think the DOM allows you to create script nodes, and not sure if innerHTML will contain them either.

Loading content into hidden iframe using frame.src , should also work.

Lets know how you get on

[douglinley]

Hi Dave,

Yeah, the original response was about firing this code. Can you tell me what you mean about "extracting" the js and then evaling?

Thanks,
Doug

[daveVk]

You need to eval() only the javascript and not the html content, so you will need some way to separate the two. So either separate it on server side with reply of the form

<js code><separator><html code>

Or reply with embedded js, search for and eval() stuff between open/close script tags.

[XtendScott]

Here is a script I use to eval <script> from HTML that is AJAX'd in.

evalJavaScript(oXML.responseText); // Retreives and Evaluates Javascript code in Ajax Call

/* --------------------------------------------------------------------
 *EvalJavaScript - Grabs <script> contents from AJAX'd data            
 * --------------------------------------------------------------------*/
function evalJavaScript(content)
{
// var content_bak = "THIS is text <script type=text/javascript>myAlert(); function myAlert(){alert('this is a string'); }</script>";
var beginScript = content.search(/<script/i);
var endScript = content.search(/<\/script\s*>/i);
AjaxScript = content.substring(beginScript,endScript+9);
AjaxScript = AjaxScript.replace(/<script[^><]*\>¦<\/script[^><]*>/ig,'');  // strips out script tags
if(AjaxScript.length > 0) eval(AjaxScript);
// var myScript = content.match(/<script[^>]*?>.*?<\/script\s*>/);
//alert(myScript);  
//var regExScript = new RegExp('<script[^>]*?>.*?</script\s*>'); // Selects <script> tags and content
 
}

Hope it helps. I know it could be more efficient.

[douglinley]

Dave, Scott, thanks much for your feedback! I'll try implementing your suggestions this week.

I'm almost wondering if I'm not going at this wrong from a design standpoint. At this point, I'm building and returning a form from the PHP and plopping it in a div in the calling form. Perhaps I should have a hidden form in the calling page, return XML, and fill the form and display it.

[XtendScott]

I am not someone that thinks every page manipulation has to be done through the DOM.

Here are my general code practices:
1. Javascript specific to page on that page or specific linked file for page.

2. Javascript for Global purposes in functions.js file.

3. If NEW form Data just replaces OLD form Data my PHP/ASP/Coldfusion server side processing outputs Javascript (ex. form.field.name1 = 'text'; form.field.name2 = 'text2';...) and then evaluate it on the calling page.

4. If things aren't that consistant I don't have a problem with returning HTML. The script above works well for adding a response mechanism like an ALERT when you passed only an ID and your response is "User: Bob Brown was added to your team."

I don't pass a lot of XML as you then need to parse it which seems to me to be an extra step.