JavaScript - Scripts Don't Run For Ajax Generated Content - Help Please

I have been searching online for hours, but it is possible I'm just not thinking of the correct keywords. I have included a basic illustration of the current setup (which does not work). The issue lies with the page that is the desired output. I have a far deeper issue which I have narrowed down to javascript on the final .asp page not loading at all.


On default.asp, I am calling a function contained in 'ajax_call-contentselection.js'

Code:

<a onclick="func_displaycontents('restaurants'); return false">displayajaxcontent</a>

Honestly, I don't believe the following piece of code (ajax_call-contentselection.js) is relevant, as it is standard ajax code, but just in case:
Code:

function func_displaycontents(var_type){     
	var xmlHttp = GetXmlHttpObject();     
	var url = "../_include/ajax_display-contentselection.asp";    
	url += "?type="+var_type;

	if (!xmlHttp){          
		alert ("Browser does not support HTTP Request")          
		return     
	}    
		
	xmlHttp.onreadystatechange=function(){     
	if(xmlHttp.readyState == 1){
       		document.getElementById("div_ajaxfillattractions").innerHTML = "<div style='padding-top:50px;color:white;width:930px;text-align:center;'><img src='../_images/ajax-loader.gif'/><br/>Loading...</div>";
	};
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
			document.getElementById("div_ajaxfillattractions").innerHTML=xmlHttp.responseText;
        	}     
	};     
	xmlHttp.open("GET", url, true);     
	xmlHttp.send(null);
}

The other contents of "ajax_display-contentselection.asp" are displayed properly in "div_ajaxfillattractions" of "default.asp", but no javascript code on that page loads. If I use "ajax_display-contentselection.asp" as an include file on "default.asp", I get the javascript alert of 'Success', but when I initiate the AJAX it does not work, so I know there isn't a problem with the javascript.

Please let me know if I sucked at explaining something, or more detail is needed.

Thanks in advance,
Matt

Hello:

I have a bit of an interesting delima:

I have a form with select box which is dynamically db populated and based on the first selection, additional data populates two other linked boxes (a input and a textarea). This process happens in a table row.

here is the source code of the selection process:
PHP Code:
<tr><td><select name='select_1' style='width:200px; color:#003399; text-align:center; font-size:1em' onChange="switch_select(); switch_text();"> 
      <option>-- Select an Item --</option><option>5 A Series Blades</option><option>Balls</option><option>TT Tables-Mini</option><option>Bottle Water</option><option>TT Tables -- Reg</option><option>Gatorate</option><option>Blade combo</option><option>Membership Renewal</option><option>1 hr Private Lesson (Adlt)</option><option>1 hr Private Lesson (Chld)</option><option>Group Lesson (Adlt)</option><option>Group Lesson (Chlidren)</option><option>Membership (Couples-2)</option><option>Membership (Family -Up 4)</option><option>Robot Play</option><option>Gift Certificate</option><option>Gift Card Add Value</option><option>Club T-Shirts</option><option>Member Credit</option><option>Other</option><option>Rubber - 1615 PIPS </option><option>Rubber -Volant 3</option><option>6 A Series Blades</option><option>Blades Only -China QI</option><option>Blades Only -CQ 1</option><option>Ross-Action Blade</option><option>Ross-Classic Blade</option></select> </td>     
     <select name='select_2' onChange="switch_text();" style='display:none' disabled='true'>
    <option>You need to select a category</option>
    <option></option>
    <option></option>
  </select><td><textarea name='mytextarea' rows='2' cols='40' class='expand10-1000' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></textarea><td>
              <td valign='top' width='17%'><input  type='text' name='qty'  class="qty" size='3' maxlength='3' value='' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td>
            <td valign='top'  width='17%'><input  type='text' name='cost'  class="cost" size='6' maxlength='6' value='0.00' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td>
              </tr> 


The user has the option of adding an additional row which is similarily structured to give the user the option of selecting a different item (with its description an price) for each row.

Now here is the problem; the adding row mechanism is done with ajax using the following code:

PHP Code:
$('#addrow').click(function(){
        $('.item-row:last').after('[COLOR="Red"]//INSERT THE CONTENT OF THE PHP HERE//[/COLOR]');
        if ($('.delete').length > 0) { $('.delete').show(); }
        bind();
    }); 


I want to insert the content of an external php file containing the dynamic linked field into the ajax above in the section outlined in red.

Sorry for the long post...

here is the external php file:

PHP Code:
<?php
echo"
    <script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
    <script language='JavaScript'> ";?>
var num_of_cats = 17; // This is the number of categories, including the first, blank, category.
var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no.
<?php
include '../datalogin.php';// make sure this is available to make connection to db

$result = mysql_query("SELECT * FROM products");
echo "var option_array = new Array(num_of_cats);";

$count=1;
echo"option_array[0] = new Array(\"Please Select a Merchandise\");";
while($row = mysql_fetch_array($result))
  {
echo"option_array[".$count."] = new Array(\"--select One--\",\"\",\"\");";
$count++;
}
$result2 = mysql_query("SELECT * FROM products");

echo"var text_array = new Array(num_of_cats);";

$count=1;
echo  "text_array[0] = new Array(\"Please Select a Merchandise\");";
while($row_1 = mysql_fetch_array($result2))
  {
echo "text_array[".$count."] = new Array(\"".$row_1['product_desc']."\");";
$count++;

}

$result3 = mysql_query("SELECT * FROM products");

echo "var text_array2 = new Array(num_of_cats);";

$count=1;
echo "text_array2[0] = new Array(\"Please Select a Merchandise\");";
while($row_2 = mysql_fetch_array($result3))
  {
echo "text_array2[".$count."] = new Array(\"".$row_2['unit_cost']."\");";
$count++;

}

?>
<?php
echo"
var options = 0;
function switch_select()

{
  for (loop = window.document.PaymentForm.select_2.options.length-1; loop > 0; loop--)
  {
    window.document.PaymentForm.select_2.options[loop] = null;
  }
  for (loop = 0; loop < option_array[window.document.PaymentForm.select_1.selectedIndex].length; loop++)
  {
    window.document.PaymentForm.select_2.options[loop] = new Option(option_array[window.document.PaymentForm.select_1.selectedIndex][loop]);
  }
    window.document.PaymentForm.select_2.selectedIndex = 0;
}
  
function switch_text()
{
  window.document.PaymentForm.mytextarea.value = text_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
 window.document.PaymentForm.cost.value = text_array2[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
  //window.document.PaymentForm.gift_card.value = text_array3[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
  //window.document.PaymentForm.qty.value = text_array4[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];

  }
function box()
{
  if (window.document.PaymentForm.select_2.selectedIndex == 0)
  {
    alert(\"Sorry, you have to select an item\");
  } else {
    if (open_in_newwindow==1)
    window.open(url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex],\"_blank\");
    else
    window.location=url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]
  }
}
function set_orig()
{
  window.document.PaymentForm.select_1.selectedIndex = 0;
  window.document.PaymentForm.select_2.selectedIndex = 0;
}
window.onload=set_orig
</script> ";
            include '../datalogin.php';
$get_products = "select id as id_num, items as display_name2 from products order by id_num"; 
$get_products_res = mysql_query($get_products) or die (mysql_error()); 

if (mysql_num_rows($get_products_res) < 1) 
  { 
       // no records 
       $display_block .="<p><em>Sorry, no records to select</em></p>"; 
    } 
    
  else 
   { 
    echo" <form name='PaymentForm' onSubmit='return false;'>
    <tr><td><select name='select_1' style='width:200px; color:#003399; text-align:center; font-size:1em' onChange=\"switch_select(); switch_text();\"> 
      <option>-- Select an Item --</option>"; 
 while ($recs2 = mysql_fetch_array($get_products_res)) 
      { 
          $id_num = $recs2['id_num']; 
          $display_name2 = stripslashes($recs2['display_name2']); 
          
 //$display_block .= "<option value=\"$id_num\">$display_name2</option>"; 
 echo "<option>$display_name2</option>"; 

                     } 
      }
  echo "</select> </td>"; 

 echo "     
     <select name='select_2' onChange=\"switch_text();\" style='display:none' disabled='true'>
    <option>You need to select a category</option>
    <option></option>
    <option></option>
  </select>";
              echo"<td><textarea name='mytextarea' rows='2' cols='40' class='expand10-1000' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></textarea><td>
              <td valign='top' width='17%'><input  type='text' name='qty'  class=\"qty\" size='3' maxlength='3' value='' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td>
            <td valign='top'  width='17%'><input  type='text' name='cost'  class=\"cost\" size='6' maxlength='6' value='0.00' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td>
              </tr>
            </form>";

            ?>

I hope this is doable and that I have describe my intention properly. Any thoughts would be appreciated!

Mossa

I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar.

I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Here is what I've got:

Code:

<img src="images/rule.png" id="rule" width="1" height="1" />
  		<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
  		<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
		<img src="images/resume.png" width="195" height="101" alt="resume" />
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
		<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a> 
  <img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>

I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like:

https://skitch.com/jillianadriana/r7...itled-document

I can't get it to load with the custom CSS.

I am new to Java/AJAX and I am trying to create a script that will change content of a div.

My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in.

I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me.

How my list.php script works is as follows:

PHP Code:
// generate and execute query
$query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// if records present
if (mysql_num_rows($result) > 0)
{
// iterate through resultset
// print news titles
while($row = mysql_fetch_object($result))
{
?>
<b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font>
<br>
<font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font>
<p>
<?
}
}
// if no records present
// display message
else
{
?>
<font size="-1">No news is bad news</font>
<?
}

How my story.php script works is as follows:

PHP Code:
// generate and execute query
$query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// get resultset as object
$row = mysql_fetch_object($result);

// Show me the news
if ($row)
{
?>
<p>
<b><? echo $row->title; ?></b>
<p>
<font size="-1"><? echo nl2br($row->content); ?></font>
<p>
<font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font>
<?
}
else
{
?>
<p>
<font size="-1">That news post could is not found.</font>
<?
}

If you need more information for this I will provide whatever you need.

I am using this code... simplified for example

Code:

[
<script type="text/javascript">

function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>



<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"


<div id="content"></div>

Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks

Is possible to call cgi scripts from javascript scripts?

Hi,

I am hoping I just need to be pointed in the right direction with this.

I have Page1.

When Page1 body onloads it uses Ajax to call PartA

Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh.

So the order of events would look like this:
Page1
|
onload call
|
v
PartA
/ \
V V
PartA[1] PartA[2]
(loads once) (constantly refreshes)

What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway).

I do not want the user to have to click a button or do anything to call up PartA[2].

So my question is how would I get PartA[2] to automatically load within PartA?

I hope I have made this clear, but if I haven't let me know and I will try again.

Alright so for a school assignment I need to create a button with the name of the color it is going to turn the background to.
the assignment says nothing about naming the buttons the hex numbers for the color therefo

I was curious if someone could show me how to create a button in java script that would generate a random hex number for a color ie: #+()+()+()+()+()+()
and the text shown on the button would be the same as the hex number generated.

feed back please

Hello again, CodingForums. I have a .php page that generates the following javascript which is intended to hide/show a form somewhere on the page. (It only shows right now because it's not done yet.) However, after the page is rendered and given to the client, the function calls do not work, and the error console reports that "[function name] is not defined."

Code:

    <script type="text/javascript">
      function showEdit(num)
      {
        var elem = document.getElementById("form-wrap"+num);
        var str = "<form action=\"./blog.php\"  method=\"POST\" class=\"blogform\">";
        str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>";
        str = str + "<input type=\"hidden\" name=\"q\" value=\"edit\"/>";
        str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/>
        str = str + "<label for=\"title\">Title</label>";
        str = str + "<input type=\"text\" name=\"title\" value=\""+document.getElementById("title"+num).innerHTML+"\"/>";
        str = str + "<label for=\"picture\">Picture</label>";
        str = str + "<input type=\"file\" name=\"picture\"/>";
        str = str + "<label for=\"caption\">Picture Caption</label>";
        str = str + "<input type=\"text\" name=\"caption\" value=\""+document.getElementById("post-image"+num).getAttribute("title")+"\"/>";
        str = str + "<label for=\"content\">Entry Text</label>";
        str = str + "<textarea name=\"content\" cols=\"100\" rows=\"20\" class=\"blogtextarea\">"+document.getElementById("content"+num).innerHTML+"</textarea>";
        str = str + "<input type=\"submit\" value=\"Edit Post\"/>";
        str = str + "</form>";
        elem.innerHTML = str;
      }


      function showDelete(num)
      {
        var elem = document.getElementById("form-wrap"+num);
        var str = "<form action=\"./blog.php\"  method=\"POST\" class=\"blogform\">";
        str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>";
        str = str + "<input type=\"hidden\" name=\"q\" value=\"delete\"/>";
        str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/>
        str = str + "<label for=\"really\">Delete this post?</label>";
        str = str + "<input type=\"radio\" name=\"really\" value=\"Yes\">Yes</input><br/>";
        str = str + "<input type=\"radio\" name=\"really\" value=\"No\" checked=\"checked\">No</input><br/>";
        str = str + "<input type=\"submit\" value=\"Confirm\"/>";
        str = str + "</form>";
        elem.innerHTML = str;
      }


      function showNew(num)
      {
        var elem = document.getElementById("new-form-wrap");
        var str = "<form action=\"./blog.php\"  method=\"POST\" class=\"blogform\">";
        str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>";
        str = str + "<input type=\"hidden\" name=\"q\" value=\"new\"/>";
        str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/>";
        str = str + "<label for=\"title\">Title</label>";
        str = str + "<input type=\"text\" name=\"title\"/>";
        str = str + "<label for=\"picture\">Picture</label>";
        str = str + "<input type=\"file\" name=\"picture\"/>";
        str = str + "<label for=\"caption\">Picture Caption</label>";
        str = str + "<input type=\"text\" name=\"caption\" />";
        str = str + "<label for=\"content\">Entry Text</label>";
        str = str + "<textarea name=\"content\" cols=\"100\" rows=\"20\" class=\"blogtextarea\"></textarea>";
        str = str + "<input type=\"submit\" value=\"Create Post\"/>";
        str = str + "</form>";
        elem.innerHTML = str;
      }
    </script>

These are all the elements that call the javascript functions.

Code:

<a onclick="showNew('2');" class="edit-delete">Create New Entry</a>
<a onclick="showDelete('1');" class="edit-delete">Delete</a>
<a onclick="showEdit('1');" class="edit-delete">Edit</a>
<a onclick="showDelete('0');" class="edit-delete">Delete</a>
<a onclick="showEdit('0');" class="edit-delete">Edit</a>

I have no idea why my functions aren't being recognized by the interpreter as such, but it's probably something simple. Thanks in advance for the help, and I'll be happy to post more code if it might be relevant.

Hi

I am a complete beginner when it comes to JS so anything and everything will be in very basic terms...

It is probably easier if i show you my problem,


I use milonic s menu for my website, as such i need to generate some sort of site map so that the various crawlers can get full access....

I used to use the phpsite map which came with Milonic Menu, however since i have moved hosts, this has stopped working....

http://www.tugtracker.co.uk/menu/sitemap.php - any offers on why it has stopped working are welcome (windows hosting)

as it still works on my other site (linux hosting)
http://locodocs.co.uk/misc/sitemap.php

anyway, thats not the point of my post....

Also provided by milonic is the option to provide a list based menu using some js...

http://support.milonic.com/demos/site_index/index.htm

I have incorporated this into my site

www.tugtracker.co.uk - click misc on the menu then "Site index"

You will see a pop-up erm pops up.... This looks okay and something like what i want,

However i need it to be placed into a webpage so i can give it a www.tug..... address and then i can point the crawlers at it....

How do i code it into the page to that the JS will run within the body and result within the body of a page?

Hello, I believe this is something simple that I'm missing. I'm still fairly new to both js and php (and this may be a better question for the php forum - hopefully it makes sense though).

What I have is a js function which uses the date/time to generate a 'unique' number onLoad, and places this number in the HTML as text in a <td></td>. This works fine. I'm also doing the same thing with the value attribute of a <input type="hidden"> element, which also works fine. The problem is, when I submit my form, php refuses to echo the value (but reports no errors). Here is all the relevant code:
The HTML:
Code:

<td class='dandt' id='iquotenum' colspan='2'></td>

The Javascript:
Code:

 function loaded()
	{
	var d = new Date();
	var vqtnum = document.getElementById("quotenumber");
	var iqtnum2 = document.getElementById("iquotenum");
	var vqtdat = document.getElementById("quotedate");
	
	vqtnum.innerHTML = "" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds();
	iqtnum2.innerHTML = "<input type='text' name='iqtnum' id='iqtnum' value='" + (d.getMonth()+1) + d.getDate() + d.getFullYear() + "-" + d.getSeconds() + "'></input>";
	vqtdat.innerHTML = "" + (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
	}

The PHP:
Code:

<?php
$iqtnum = $_GET['iqtnum'];
		echo "<tr><td>Quote Number: </td><td>" . $iqtnum . "</td></tr>";
?>

I've verified by using Chrome's inspect element tool that the value attribute is being set correctly by my script, and I've got a few other php echos that get the user's input from other text boxes which use the same method*, and which work fine. Also while debugging I changed the type from hidden to text so I can see it easier.

*Except that the value in this case is typed into the box, rather than generated by js.

Thanks in advance.

edit: I forgot to mention that I also have in the body tag of the HTML onLoad="loaded()".

I'm new here and this is my first post, I hope I can find help here.

How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements and whenever that 'Add More' button is clicked, a new instant of the same form will generated and select drop down list populated.

I have try to google for solution, but without success.

I code in PHP, but i need it to integrate in my code.


Thanks for your help.

hi Peers,

i am having issue capturing the value of the selected DDL using IE.
the code below works just fine in Firefox...


// Create a new drop down list -- for text box use 'input' instead of 'select'
var newDDL = document.createElement('select');

// size lenght of the DDL for both IE or Firefox
newDDL.setAttribute("style","width:300px");
//firefox
newDDL.setAttribute("width","300px");
newDDL.style.width = "300px";
newDDL.id = 'id' + elementid + ColumnElement;
newDDL.setAttribute('name','newDDL'+ elementid+ColumnElement);

// filling the DDL by ITEM array Elements
var i=0;
for (i=0;i<=rec_count;i++)
{
objOption = document.createElement('option')
objOption.text = ITEM[i]
newDDL.options.add(objOption)
}

counter++;
newDDL.onchange = show1;

both cases are giving the value selected in firefox

function 1:
function show1()
{
alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value=' + this.value );

}

function 2:
function show1()
{
alert('id=' + this.getAttribute('id') + 'name = ' + this.getAttribute('name') + 'value='+ this.getAttribute('value'));

}


any suggestion will be appreciated
thanks