JavaScript - Use Javascript Or Ajax To Place Content In Div Tag

Hi all,

I have a javascript+CSS based popup (? by toggling display property), which works well. The popup <div> consist of an <h3>, <img> (serves as close button) and a big <ol> (This markup is in a seperate file and is about 2KB)

I need to bring the content via Ajax rather than statically placing it inside the document. I'm very reluctant to use innerHTML, as it's non standard and I may lose the "close" action from the img(mentioned above), which would be there otherwise.

My other option is to save the content(without any html tag) in a php array and return through Ajax, and then dynamically create all html nodes with all attributes using proper DOM methods.

I expect some advice from you to choose the right one.

PS: My popup script is obtained from http://www.php-development.ru/javasc...pup-window.php

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

Hi All

I'm going to keep this simple. I'm using a hashchange plugin for my page navigation

I can't get scripts to run for the AJAX generated content. They run perfectly without the hashchange

Here is a link to my current project:

http://www.bluecoast.co.uk/test/temptation

Here is the script that handles the hashchange:

Code:

$(function() {

    var newHash      = "",
        $mainContent = $("#right"),
        $pageWrap    = $("#wrap"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $pageWrap.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');
	
});

I'm loading the scripts in the header of the main index.php page like so:

Code:

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>

<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<!--[if IE]>
   <script src="js/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="js/custom.js"></script>

Would somebody be kind enough to help me with this?

Thanks in advance
Craig

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