Load a dropdown from a second dropdown Ajax to PHP not working

Question

I am loading a list of customers and I want to load a second dropdown for locations based on which customer gets selected. For some reason my code isn't working. Here's my code:

<span style="display:inline-block;">
    <select name="sCustomer" id="sCustomer" onChange="findLocations(this.value)">
        <option value="0">- Select Customer -</option>
    </select>
</span>
<span style="display:inline-block;">
    <select id="sLocation" name="sLocation">
        <option value="0">- Select Location -</option>
    </select>
</span>

<script type="text/javascript">

function findLocations(custID) {
    $('#sLocation').empty();
    $('#sLocation').append("<option value='0'>- Select Location -</option>");
    $.ajax({
    type:"POST",
    url:"getLocations.php",
    contentType:"application/json; charset=utf-8",
    data: { custID : custID },
    dataType:"json",
    success: function(data){ 
        $.each(data,function(i, item){
            $('#iTest').val("bobby");
            $('#sLocation').empty();
            $('#sLocation').append("<option value='0'>- Select Location -</option>");
            $('#sLocation').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
        });
    },
    complete: function(){

    }
});
}

</script>

and the page it calls has this code

<?php 
include_once(INCLUDE_DIR.'class.error.php');
include_once(INCLUDE_DIR.'class.role.php');
include_once(INCLUDE_DIR.'class.passwd.php');
include_once(INCLUDE_DIR.'class.user.php');
include_once(INCLUDE_DIR.'class.auth.php');
include_once(INCLUDE_DIR.'class.location.php');

function getLocations() {  
    $custID = 0; 

    if (isset($_POST['custID'])) {
        $custID = $_POST['custID'];
    }

    $sql = 'SELECT l.location_id, l.site_name FROM ' . CUST_LOCATION_TABLE
        . ' AS l JOIN ' . CUST_TABLE . ' AS c ON c.cust_id=l.cust_id'
            . ' WHERE c.cust_id='.$custID;

    $locations = array();

    if (($res=db_query($sql)) && db_num_rows($res)) {
        while(list($id,$name)=db_fetch_row($res)) { 
            $columns = array (
                    'locID' => $id,
                    'locName' => $name,
            );
            $locations[] = $columns;
        }
    }
  return $locations;
}

?>

Why isn't this working and is there anyway to test what part is breaking? I can't echo out anything because the page doesn't postback (since it's ajax) and I can't do javascript alert in the ajax function. Bear in mind I didn't add the code that was filling the customer dropdown because I know it's working right, populating everything and giving me the correct values.

Okay I found this which at least helps me start debugging. It's failing but I found this

error: function (request, error) {
    console.log(arguments);
    alert(" Can't do because: " + error);
},

echo the response and check in you console.log() at javascript — Satender K
– Satender K, Commented Sep 4, 2015 at 12:23
Dont you need to call echo json_encode(getLocations()); for the json to be sent — Joy Biswas
– Joy Biswas, Commented Sep 4, 2015 at 12:25
Where would I call that echo statement? I am new to php and the last time I programmed with ajax it wasn't as fancy. I had to write out all the Http requests so I'm trying to learn the new way. — ManateeInfuser
– ManateeInfuser, Commented Sep 4, 2015 at 12:33
you have included your whole php code in function, where is function call ? — user2338456
– user2338456, Commented Sep 4, 2015 at 12:45

Satender K · Accepted Answer · 2015-09-04 12:24:37Z

0

replace

data: { custID : custID },

with

data: { 'custID' : custID },

in javascript

answered Sep 4, 2015 at 12:24

Satender K

5813 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Satender K Over a year ago

use it data: "custID="+custID ,

Satender K Over a year ago

are you getting value at server side

Satender K Over a year ago

Dude you have not calling getLocations() inside your php file only defination is there

user2338456 · Accepted Answer · 2015-09-04 12:54:23Z

0

Replace your code in php file with this one

if (($res=db_query($sql)) && db_num_rows($res)) {
        $str = "";
        $str .= "<option value='0'>Select Location</option>";

        while(list($id,$name)=db_fetch_row($res)) { 

              $str .= "<option value=".$id.">".$name."</option>";
        }
    }
echo $str;

Now Modify your javascript function

function findLocations(custID) {
$('#sLocation').empty();

$.ajax({
type:"POST",
url:"getLocations.php",
contentType:"application/json; charset=utf-8",
data: { custID : custID },
dataType:"json",
success: function(data){ 
   document.getElementById("sLocation").innerHTML = data; 
},
complete: function(){

}
});
}

edited Sep 4, 2015 at 12:54

answered Sep 4, 2015 at 12:37

user2338456

5302 gold badges6 silver badges24 bronze badges

8 Comments

ManateeInfuser Over a year ago

Where and how do I set the response in the javascript function? I haven't coded in about 5 years so I'm extremely rusty with coding. Would I set it in the ajax request on success or just right inside the findLocations function?

user2338456 Over a year ago

@ManateeInfuser : answer updated replace ur javascript function with this one

user2338456 Over a year ago

you need to update ur PHP code too, remove getLocations() around the code

ManateeInfuser Over a year ago

Now I am actually getting to the code thank you! Though I still don't get any results. The dropdown is blank after running this code. Is there a way to debug the php page? I have eclipse but I've never been able to get the debugger to stop at breakpoints.

user2338456 Over a year ago

have you removed that php function ?

|

ManateeInfuser · Accepted Answer · 2015-09-04 13:35:02Z

0

function findLocations(custID) {
$('#sLocation').empty();

$.ajax({
    type:"POST",
    url:"getLocations.php",
    contentType:"application/json; charset=utf-8",
    data: { custID : custID },
    dataType:"json",
    success: function(data){ 
       document.getElementById("sLocation").innerHTML = "<option value='0'>- Select Locationss -</option>"; // + data;
        },
        complete: function(){

        }
    });
}

and the php page is

 <?php 
include_once(INCLUDE_DIR.'class.error.php');
include_once(INCLUDE_DIR.'class.role.php');
include_once(INCLUDE_DIR.'class.passwd.php');
include_once(INCLUDE_DIR.'class.user.php');
include_once(INCLUDE_DIR.'class.auth.php');
include_once(INCLUDE_DIR.'class.location.php');


$custID = 0; 

if (isset($_POST['custID'])) {
    $custID = $_POST['custID'];
}

$sql = 'SELECT l.location_id, l.site_name FROM ' . CUST_LOCATION_TABLE
    . ' AS l JOIN ' . CUST_TABLE . ' AS c ON c.cust_id=l.cust_id'
    . ' WHERE c.cust_id='.$custID;

$locations = array();

if (($res=db_query($sql)) && db_num_rows($res)) {
    $str = "";
    $str .= "<option value='0'>Select Location</option>";

    while(list($id,$name)=db_fetch_row($res)) { 
          $str .= "<option value=".$id.">".$name."</option>";
    }
}
echo $str;

?>

edited Sep 4, 2015 at 13:35

answered Sep 4, 2015 at 13:32

ManateeInfuser

411 silver badge4 bronze badges

6 Comments

user2338456 Over a year ago

it should be like document.getElementById("sLocation").innerHTML = data

ManateeInfuser Over a year ago

I did that and I was getting an empty dropdown so I set the innerHTML to at least have the Select Location option and it still didn't add it which means, at least if I'm right, that it's not getting to the success.

user2338456 Over a year ago

above document.getElementById("sLocation").innerHTML = data line add "alert(data);" without quote it will show you response

ManateeInfuser Over a year ago

Didn't alert anything, so I don't think it's getting to the success of the ajax call. Is there an on error that I could try alerting the error?

user2338456 Over a year ago

it must alert, check console there must be some error, also remove <option value="0">- Select Location -</option> from ur html just keep it <select id="sLocation" name="sLocation"> </select>

|

Collectives™ on Stack Overflow

Load a dropdown from a second dropdown Ajax to PHP not working

3 Answers 3

3 Comments

8 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

8 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related