Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX Scripting Help Needed - Multiple functions

    Hi,

    I am pulling my hair out. I am attempting to populate 3 drop down lists using multiple ajax functions and a PHP/MYSQL connection.

    Here is what I have accomplished so far:

    I have an index.php page that displays 3 dropdown (html select forms).

    When the user selects an item from the first list, the 2nd select form is populated from a mySql table and the response is placed in the div Id for the second form.

    When the user selects an item from the 2nd list, another function is called passing both parameters to the function, and the 3rd list is populated and called in the 3rd div Id in the same way.

    However, I am running into a problem when the user selects an item in the 3rd list!

    What I would like to have happen is a similar function call to a third .php file, passing ALL 3 parameters to the third function. The response should then display in a 4th div Id on the index.php page, that displays the stats stored in the mySql database for that individually selected item.

    Here is a list of the code I am using: THE UNDERLINED PORTION IS THE JAVASCRIPT/AJAX FUNCTION THAT KILLS THE WHOLE OPERATION....

    CODE FOR index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>DropDown List Population Example</title>


    <script language="javascript" type="text/javascript">

    function getXMLHTTP() { //function to return the xml http object
    var xmlhttp=false;
    try{
    xmlhttp=new XMLHttpRequest();
    }
    catch(e) {
    try{
    xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e){
    try{
    req = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e1){
    xmlhttp=false;
    }
    }
    }

    return xmlhttp;
    }

    function getScriptLoc(episodeId) {

    if (episodeId == "newEpisodeNumber") {
    document.getElementById('newEpisodeCreation').innerHTML="Create New Episode?";
    }
    else {

    document.getElementById('newEpisodeCreation').innerHTML="&nbsp;";

    var strURL="findLocations.php?episodeNumber="+episodeId;
    var req = getXMLHTTP();

    if (req) {

    req.onreadystatechange = function() {
    if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
    document.getElementById('scriptLocdiv').innerHTML=req.responseText;
    } else {
    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    }
    }
    }
    req.open("GET", strURL, true);
    req.send(null);
    }
    }
    }

    function getAddy(episodeId,scriptLocId) {

    if (scriptLocId == "newScriptLoc") {
    document.getElementById('newLocationCreation').innerHTML="Create New Location?";
    }
    else {

    document.getElementById('newLocationCreation').innerHTML="&nbsp;";


    var strURL="findAddys.php?episodeNumber="+episodeId+"&scriptLoc="+scriptLocId;
    var req = getXMLHTTP();

    if (req) {

    req.onreadystatechange = function() {
    if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
    document.getElementById('addydiv').innerHTML=req.responseText;
    } else {
    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    }
    }
    }
    req.open("GET", strURL, true);
    req.send(null);
    }

    }
    }



    function getPix(episodeId,scriptLocId,addyLocId) {

    if (addyLocId == "newAddyLoc") {
    document.getElementById('newAddyCreation').innerHTML="Create New Physical Address?";
    }
    else {

    document.getElementById('newAddyCreation').innerHTML="&nbsp;";


    var strURL="findPix.php?addyLoc="addyLocId;
    var req = getXMLHTTP();

    if (req) {

    req.onreadystatechange = function() {
    if (req.readyState == 4) {
    only if "OK"
    if (req.status == 200) {
    document.getElementById('content').innerHTML=req.responseText;
    } else {
    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    }
    }
    }
    req.open("GET", strURL, true);
    req.send(null);
    }

    }
    }


    </script>


    </head>
    <body>

    <?php

    $username = "username";
    $password = "password";
    $database = "databaseName";

    mysql_connect(localhost,$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");

    $query="select * from Episodes"; // query string stored in a variable
    $rt=mysql_query($query); // query executed
    echo mysql_error(); // if any error is there that will be printed to the screen

    ?>


    <form method="post" action="" name="AddressSelectionForm1">
    <table width="75&#37;" border="0" cellspacing="0" cellpadding="0">

    <tr>
    <td width="261">Select Episode Number:</td>
    <td width="444"><select name="episode" onChange="getScriptLoc(this.value)">
    <option value="new">--Select Episode Number--</option>

    <?php
    while($nt=mysql_fetch_array($rt)){

    echo "<option value=\"";
    echo $nt[EpiEpisodeNumb] . "\">"; // EpisodeNumber will be printed with one line break at the end
    echo "Episode " . $nt[EpiEpisodeNumb];
    echo "</option>\n";
    }
    ?>

    <option value="newEpisodeNumber">[CREATE EPISODE NUMBER]</option>

    </select></td>
    </tr>

    <tr>
    <td></td>
    <td><div id="newEpisodeCreation">&nbsp;</div></td>
    </tr>



    <tr style="">
    <td>Select Script Location:</td>
    <td ><div id="scriptLocdiv"><select name="scriptLoc" disabled value=1 >
    <option>Select Episode Number First</option>
    </select></div></td>
    </tr>

    <tr>
    <td></td>
    <td><div id="newLocationCreation">&nbsp;</div></td>
    </tr>




    <tr style="">
    <td>Select Physical Address:</td>
    <td ><div id="addydiv"><select name="addyLoc" disabled value=1>
    <option>Select Script Location First</option>
    </select></div></td>
    </tr>

    <tr>
    <td></td>
    <td><div id="newAddyCreation">&nbsp;</div></td>
    </tr>



    <tr>
    <td></td>
    <td><div id="content">&nbsp;</div></td>
    </tr>



    </table>
    </form>






    </body>
    </html>



    HERE IS THE CODE FOR FINDLOCATIONS.PHP:


    <? $episode=intval($_GET['episodeNumber']);
    $link = mysql_connect('localhost', 'USER', 'PASS'); //changet the configuration in required
    if (!$link) {
    die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('DBNAME');
    $query= "select * from ScriptLocations where locEpisodeNumb = '" . $episode . "'";
    $result=mysql_query($query);
    ?>

    <select name="scriptLoc" onchange="getAddy(<?=$episode?>,this.value)">
    <option>-- Select Scene Location --</option>

    <? while($row=mysql_fetch_array($result)) { ?>
    <option value=<?=$row['locTitle']?>><?=$row['locTitle']?></option>
    <? } ?>

    <option value="newScriptLoc">[CREATE NEW SCRIPT LOCATION]</option>
    </select>



    HERE IS THE CODE FOR FINDADDYS.PHP:

    <? $episodeId=intval($_GET['episodeNumber']);
    $scriptLocId= $_GET['scriptLoc'];
    $link = mysql_connect('localhost', 'USER, 'PASS'); //changet the configuration in required
    if (!$link) {
    die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('DBNAME');
    $query= "select * from Addresses where addyEpisodeNumb='" . $episodeId . "' AND addyScriptLoc='" . $scriptLocId . "'";
    $result=mysql_query($query);
    ?>

    <select name="addyLoc" onChange="getPix(<?=$episodeId?>, <?=$scriptLocId?>, this.value)">
    <option>--Select Physical Address--</option>

    <? while($row=mysql_fetch_array($result)) { ?>
    <option value<?=$row['addyTitle']?>><?=$row['addyTitle']?></option>
    <? } ?>

    <option value="newAddyLoc">[CREATE NEW PHYSICAL ADDRESS]</option>
    </select>

    AND HERE IS THE CODE FOR THE FILE THAT IS NOT WORKING PROPERLY, FINDPIX.PHP:


    <? $episodeId=intval($_GET['episodeNumber']);
    $scriptLocId= $_GET['scriptLoc'];
    $addyLocId= $_GET['addyLoc'];
    $link = mysql_connect('localhost', 'tastestv_Scouter', 'Scouter'); //changet the configuration in required
    if (!$link) {
    die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('tastestv_LocationScouter');
    $query= "select * from pix where episodeNumb='" . $episodeId . "' AND scriptLoc='" . $scriptLocId . "' AND physicalLoc='" . $addyLocId . "'";
    $result=mysql_query($query);

    //test
    //echo $episodeId . $scriptLocId . $addyLocId;

    while($row=mysql_fetch_array($result)) {
    echo $row['pixpath'];
    }


    AT THIS POINT, I WOULD SIMPLY LIKE TO DISPLAY THE PATH 'pixpath' FROM THE SELECTED ITEM IN THE 4TH DIV ID ON THE INDEX.PHP PAGE = "CONTENT"

    THE result of the coding above is a static page, that doesn't function from the first selection onward. However, if I delete that third function call (underlined in the above snippet for index.php), the calls work properly, but I can't get to that 4th level of displaying stored information for the individual item from the database.

    Can anyone help me fix this code?

    Thanks in advance,
    n00b
    Last edited by HoofSC; 04-14-2008 at 06:45 AM.

  • #2
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Code Correction

    Here is what I have for that third function:

    function getPix(episodeId,scriptLocId,addyLocId) {

    if (addyLocId == "newAddyLoc") {
    document.getElementById('newAddyCreation').innerHTML="Create New Physical Address?";
    }
    else {

    document.getElementById('newAddyCreation').innerHTML="&nbsp;";


    var strURL="findPix.php?episodeNumber="+episodeId+"&scriptLoc="+scriptLocId+"&addyLoc="addyLocId;
    var req = getXMLHTTP();

    if (req) {

    req.onreadystatechange = function() {
    if (req.readyState == 4) {
    only if "OK"
    if (req.status == 200) {
    document.getElementById('content').innerHTML=req.responseText;
    } else {
    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
    }
    }
    }
    req.open("GET", strURL, true);
    req.send(null);
    }

    }
    }
    Last edited by HoofSC; 04-14-2008 at 06:34 AM.

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    ok.... first, can you stick that lot inside CODE brackets? Debugging stuff gets a lot easier when the code is nicely indented.

    Talking of debugging - go and get Firebug for Firefox. It'll make tracking down annoying JS errors a whole lot easier.

    Anyhow... there might be more stuff, but looking at those underlined bits, you've got:
    1. An extra curly brace at the bottom.
    2. The words only if "OK" without a comment or anything in front of them.

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi,
    i m stuck at a problem of similar kind. i found tht while storing the variable using GET method, they are using intval($_GET['var']). this is storing in the variable. without using the intval() also seems working fine. but while send the arguments to another function the latter is not sending its value.

    cant able to resolve it.
    Any help will be appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •