Page 1 of 1

Ajax and populating second select field

Posted: Wed Feb 18, 2009 2:07 pm
by CoolAsCarlito
I know this deals with ajax but I don't know how to do it. What this is supposed to do is when a country is chosen from the first dropdown box it's supposed to go back to the database and place all the arenas that have chosen country and grab all of the arenas for that country and fill those in the second dropdown.

Code: Select all

function booklineup() 
{
    print '<script language="JavaScript" src="ts_picker.js"></script>';
    print '<h1 class=backstage>Show Booking Management</h1><br />';
    print '<table width="100%" class="table2">';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Show Name:</td>';
    print '<td class="row3"><select name="show class="dropdown">';
    print '<option value="0">- Select -</option>';
    $query = 'SELECT * FROM shownames';
           $result = mysql_query ( $query );
           while ( $row = mysql_fetch_assoc ( $result ) ) 
          {
           print "<option value=\"".$row['showname']."\">".$row['showname']."</option>\r";
        }
    print '</select></td>';
    print '<td class="row3" width="180"><span class="reduced">Set up in show Name Manager</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Label:</td>';
    print '<td class="row3"><input type="text" name="label" class="fieldtext40"></td>';
    print '<td class="row3" width="180"><span class="reduced">e.g. Consecutive Number, Date</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Air Date</td>';
    print '<td class="row3"><input type="text" name="bookingdate" class="fieldtext80" value=""><a href="javascript&#058;show_calendar("document.showbooker.bookingdate", document.showbooker.bookingdate.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick the date"></a></td>';
    print '<td class="row3"><span class="reduced">dd-mm-yyyy</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading" width="150" valign="center" class="rowheading">No. of Matches:</td>';
    print '<td class="row3"><input type="text" name="numberofmatches" class="fieldtext40"></td>';
    print '<td class="row3"><span class="reduced">More can be added later</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading">Country</td>';
    print '<td class="row3" colspan="2"><select name="countryid" class="dropdown" onchange="ajaxpage("backstageajax.php?random=625094862&routine=arenas&countryid="+showbooker.countryid.value,"arenaajax");"><option value=0>- Select -</option>';
    $query = 'SELECT * FROM arenas';
    $result = mysql_query ( $query );
    while ( $row = mysql_fetch_assoc ( $result ) ) 
          {
           print "<option value=\"".$row['country']."\">".$row['country']."</option>\r";
        }
    print '</select></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading">Arena</td>';
    print '<td class="row3" colspan="2"><div id="arenaajax"><select name="arenaid" class="dropdown"><option value="0">- Select Arena -</select><input type="hidden" name="location" value="0"></div></td>';
    print '</tr>';
    print '</table><br />';
    print '<input type="submit" value="Add Booking" class="button"><br /><br />';
    print '<input type="button" value="Return to Booking Manager" class="button200"><br /><br />';
    print '<h2 class="backstage"><input type="button" value="Return to Main Menu" class="button200"></form></h2>';
}  

Re: Ajax and populating second select field

Posted: Fri Feb 20, 2009 5:53 am
by JAB Creations
1.) From what I've heard print will eventually be deprecated from PHP, ask the big guns about that though.

2.) There is no such thing as a "language" attribute for script elements; use the 'type' attribute with a value of 'text/javascript'.

3.) The h1 element should only appear once on any page period as it has the same SEO value as your page's title; therefor you should have no reason to apply a class which undesirably increases syntax to text ratio.

4.) AJAX uses either a GET or POST request right?

Code: Select all

<?php
echo '<div><pre>';
print_r($_GET);
echo '</pre></div>';
 
echo '<div><pre>';
print_r($_POST);
echo '</pre></div>';
?>
Just have AJAX alert the response...

Code: Select all

<script type="text/javascript">//<![CDATA[if (page_request.readyState == 4 && (page_request.status==200)) {alert(page_request.responseText);}//]]></script>

Re: Ajax and populating second select field

Posted: Fri Feb 20, 2009 1:47 pm
by CoolAsCarlito
What am I doing wroing here. It loads the countries but won't go back to the DB and grab arenas that have that country and put them in the second drop down box.


Here's my backstageajax.php file:

Code: Select all

<?php
 
$country = $_REQUEST['country'];
 
$country = mysql_real_escape_string($country, $link);
$query = mysql_query("SELECT `arena` FROM `arenas` WHERE `country` = '".$country."' ORDER BY arena") or die("ERROR 1");
 
$arenas = array();
while($row = mysql_fetch_assoc($query)) {
    $arenas[] = $row['arena'];
}
 
header('Content-type: application/json');
echo json_encode($arenas);
exit;

backstagefunctions.php

Code: Select all

function booklineup()
{
<script type="text/javascript">
 
   // this function waits for the page to load before
// it executes any javascript.  Otherwise the javascript
// will start executing before all the elements are loaded
$(function(){
 
  // This hooks the "onchange" event of countries select box.
  // Whenever the select box changes, this function will run.
  $("select#country").change(function(){
 
    // This is jQuery's AJAX method that retrieves
    // a JSON string from a remote URL and parses
    // it into a Javascript object. (in this case, an array)
    $.getJSON(
        // this is the path to the script that will handle the AJAX request
        "/backstageajax.php",
        // These are the request parameters we are sending as part
        // of the AJAX request.  Think of them as URL parameters, ie
        // ?this=that&foo=bar.  $(this).val() is a quick way to get
        // the value of the countries select box.
        {country: $(this).val()},
        // this function will execute when the AJAX request returns
        function(arenas){
            // build an HTML string of select options
            var options = '';
            for (arena in arenas) {
                options += '<option value="' + arena + '">' + arena + '</option>';
            }
            // update the arena select box with the new options
            $("select#arena").html(options);
        }
    })
  })
})
   </script>
   $type = $_GET['type'];
   print'<form method=POST name=eventbooker>';
   print'<input type=hidden name=action value=eventbooker>';
   print'<input type=hidden name=routine value=savebooking>';
   print'<input type=hidden name=eventtype value=recurring>';
   print '<h1 class=backstage>Show Booking Management</h1><br />';
   print '<form name="booklineup" method="post" action="backstage.php" id="booklineup">';   
   print '<table width="100%" class="table2">';
   print '<tr>';
   print '<td width="150" valign="center" class="rowheading">Show Name:</td>';
   print '<td class="row3"><select name="showname class="dropdown">';
   print '<option value="0">- Select -</option>';
   $query = "SELECT * FROM shownames WHERE `type` = '$type'";
         $result = mysql_query ( $query );
         while ( $row = mysql_fetch_assoc ( $result ) )
        {
         print "<option value=\"".$row['showname']."\">".$row['showname']."</option>\r";
      }
   print '</select></td>';
   print '<td class="row3" width="180"><span class="reduced">Set up in show Name Manager</span></td>';
   print '</tr>';
   print '<tr>';
   print '<td width="150" valign="center" class="rowheading">Label:</td>';
   print '<td class="row3"><input type="text" name="label" class="fieldtext40"></td>';
   print '<td class="row3" width="180"><span class="reduced">e.g. Consecutive Number, Date</span></td>';
   print '</tr>';
   print '<tr>';
   print '<td width="150" valign="center" class="rowheading">Air Date</td>';
   print '<td class=row3><input type=text name=bookingdate class=fieldtext80>';
   print "<a href=\"javascript&#058;show_calendar('document.eventbooker.bookingdate', document.eventbooker.bookingdate.value);\">";
   print '<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick the date"></a></td>';
   print '<td class="row3"><span class="reduced">dd-mm-yyyy</span></td>';
   print '</tr>';
   print '<tr>';
   print '<td class="rowheading" width="150" valign="center" class="rowheading">No. of Matches:</td>';
   print '<td class="row3"><input type="text" name="numberofmatches" class="fieldtext40"></td>';
   print '<td class="row3"><span class="reduced">More can be added later</span></td>';
   print '</tr>';
   print '<tr>';
   print '<td class="rowheading">Country</td>';
   print '<td class="row3" colspan="2"><select name="countryid" class="dropdown" onChange="ajaxGet();"><option value=0>- Select -</option>';
   $query = 'SELECT * FROM arenas GROUP BY `country` ORDER BY `country`';
   $result = mysql_query ( $query );
   while ( $row = mysql_fetch_assoc ( $result ) )
        {
         print "<option value=\"".$row['country']."\">".$row['country']."</option>\r";
      }
   print '</select></td>';
   print '</tr>';
   print '<tr>';
   print '<td class="rowheading">Arena</td>';
   print '<td class="row3" colspan="2"><div id="arenaajax"><select name="arena" class="dropdown"><option value="0">- Select Arena -</select><input type="hidden" name="location" value="0"></div></td>';
   print '</tr>';
   print '</table><br />';
   print '<input type="hidden" name="type" value="'.$type.'">';
   print '<input type="submit" value="Add Booking" class="button" name="booklineup"><br /><br />';
   print '<input type="button" value="Return to Booking Manager" class="button200"><br /><br />';
   print '<h2 class="backstage"><input type="button" value="Return to Main Menu" class="button200"></form></h2>';
}

Re: Ajax and populating second select field

Posted: Sun Feb 22, 2009 8:37 am
by JAB Creations
So do you want...

1.) AJAX to server to retrieve country list...

2.) AJAX to server to get the country to get the state/providence list?

Re: Ajax and populating second select field

Posted: Sun Feb 22, 2009 9:37 am
by CoolAsCarlito
I changed one thing so that it displays all the countries from the countries table. What I want it to do is when a country is selected then it takes it and goes back to the DB and goes into the arenas table and looks at the country field and matches it up with the prior selection and then shows all the arena names.

Table countries
Fields: id, country

Table arenas
Fields: id, country, name

Code: Select all

function booklineup() 
{
    ?>
    <script type="text/javascript">
 
   // this function waits for the page to load before
// it executes any javascript.  Otherwise the javascript
// will start executing before all the elements are loaded
$(function(){
 
  // This hooks the "onchange" event of countries select box.
  // Whenever the select box changes, this function will run.
  $("select#country").change(function(){
 
    // This is jQuery's AJAX method that retrieves
    // a JSON string from a remote URL and parses
    // it into a Javascript object. (in this case, an array)
    $.getJSON(
        // this is the path to the script that will handle the AJAX request
        "/backstageajax.php",
        // These are the request parameters we are sending as part
        // of the AJAX request.  Think of them as URL parameters, ie
        // ?this=that&foo=bar.  $(this).val() is a quick way to get
        // the value of the countries select box.
        {country: $(this).val()},
        // this function will execute when the AJAX request returns
        function(arenas){
            // build an HTML string of select options
            var options = '';
            for (arena in arenas) {
                options += '<option value="' + arena + '">' + arena + '</option>';
            }
            // update the arena select box with the new options
            $("select#arena").html(options);
        }
    })
  })
})
   </script>
   <?php
    $type = $_GET['type'];
    print'<form method=POST name=eventbooker>';
    print'<input type=hidden name=action value=eventbooker>';
    print'<input type=hidden name=routine value=savebooking>';
    print'<input type=hidden name=eventtype value=recurring>';
    print '<h1 class=backstage>Show Booking Management</h1><br />';
    print '<form name="booklineup" method="post" action="backstage.php" id="booklineup">';  
    print '<table width="100%" class="table2">';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Show Name:</td>';
    print '<td class="row3"><select name="showname class="dropdown">';
    print '<option value="0">- Select -</option>';
    $query = "SELECT * FROM shownames WHERE `type` = '$type'";
        $result = mysql_query ( $query );
        while ( $row = mysql_fetch_assoc ( $result ) ) 
        {
        print "<option value=\"".$row['showname']."\">".$row['showname']."</option>\r";
        }
    print '</select></td>';
    print '<td class="row3" width="180"><span class="reduced">Set up in show Name Manager</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Label:</td>';
    print '<td class="row3"><input type="text" name="label" class="fieldtext40"></td>';
    print '<td class="row3" width="180"><span class="reduced">e.g. Consecutive Number, Date</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td width="150" valign="center" class="rowheading">Air Date</td>';
    print '<td class=row3><input type=text name=bookingdate class=fieldtext80>';
    print "<a href=\"javascript&#058;show_calendar('document.eventbooker.bookingdate', document.eventbooker.bookingdate.value);\">";
    print '<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick the date"></a></td>';
    print '<td class="row3"><span class="reduced">dd-mm-yyyy</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading" width="150" valign="center" class="rowheading">No. of Matches:</td>';
    print '<td class="row3"><input type="text" name="numberofmatches" class="fieldtext40"></td>';
    print '<td class="row3"><span class="reduced">More can be added later</span></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading">Country</td>';
    print '<td class="row3" colspan="2"><select name="country" class="dropdown" onchange=><option value=0>- Select -</option>';
    $query = 'SELECT * FROM countries ORDER BY `country`';
    $result = mysql_query ( $query );
    while ( $row = mysql_fetch_assoc ( $result ) ) 
        {
        print "<option value=\"".$row['country']."\">".$row['country']."</option>\r";
        }
    print '</select></td>';
    print '</tr>';
    print '<tr>';
    print '<td class="rowheading">Arena</td>';
    print '<td class="row3" colspan="2"><div id="arena"><select name="arena" class="dropdown"></select></div></td>';
    print '</tr>';
    print '</table><br />';
    print '<input type="hidden" name="type" value="'.$type.'">'; 
    print '<input type="submit" value="Add Booking" class="button" name="booklineup"><br /><br />';
    print '<input type="button" value="Return to Booking Manager" class="button200"><br /><br />';
    print '<h2 class="backstage"><input type="button" value="Return to Main Menu" class="button200"></form></h2>';
}

Re: Ajax and populating second select field

Posted: Sun Feb 22, 2009 8:16 pm
by JAB Creations
You're still using print in PHP so you didn't read my original post.

Do you know how to use alert in JavaScript? If so then why aren't you alerting the select element's value to determine the country?

You're doing...

Code: Select all

<?php
print "<element  attribute=\"value\" />";
?>
...when I'd highly recommend doing...

Code: Select all

<?php
echo '<element  attribute="value" />';
?>
...and you don't need to echo every line of PHP.

Code: Select all

<select id="example" onclick="alert(document.getElementById('example').value)"><option value="my country">my country</option></select>