get results from database based on a selectfield

Question

I have been trying to make to make a page where i could select a customer and would get the corresponding customer details from a database. It should look something like this:

<select id="select_customer">   
  <option value='1'>customer 1</option>
  <option value='1'>customer 2</option> 
</select>

public function getCustomerDetails($customerId) {
    if(isset($customerId)) {
        $customer = DB::getInstance()->query("select * from customers");
        foreach($customer->results() as $customer) {
            $str = "<li>{$customer->name}</li>";
            $str .= "<li>{$customer->name_contactperson}</li>";
            $str .= "<li>{$customer->email}</li>";
            $str .= "<li>{$customer->address} {$customer->house_number}</li>";
            $str .= "<li>{$customer->postalcode}</li>";
            $str .= "<li>{$customer->city}</li>";
            $str .= "<li>{$customer->country}</li>";
        }

        return $str;
    } 
    return false;
}

What i now would like to do is to get the value from the select_customer post this with ajax to the getCustomerDetails method and get the corresponding details without a page reload. I tried to make it work with ajax and with xAjax but i coulden't get it to work.

I tried this:

<?php include 'xajaxAIO.inc.php'; 
$xajax = new xajax(); 
$xajax->register(XAJAX_FUNCTION, 'getCustomers'); 
$xajax->processRequest(); ?> 
<input type="button" onclick="xajax_getCustomerDetails(1);" value="Click Me" />

The other thing i tried was this:

<script>
document.getElementById('select_customer').addEventListener('change', function() {
    var $userId = this.value;
    $.ajax({
        type: "POST",
        url: "classes/invoice.php",
        data: "getCustomerDetails("+$userId+")"
    })
});
</script>

I dont get any error messages in my console but it seems like the requested function doesnt execute.

Anybody who could tell me how it could get this to work?

Thanks in advance!

Welcome to SO. Please read [What topics can I ask about](http://stackoverflow.com/help/on-topic) and [How to ask a good question](http://stackoverflow.com/help/how-to-ask) And [the perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) SO is **not a free coding service** You have to show that you have made some effort to solve your own problem. — RiggsFolly, Jan 08 '16 at 14:13
sorry for that, didn't post it because i didnt know if it made any sense. I'll change it. — Frank W., Jan 08 '16 at 14:23

bdevinedev · Accepted Answer · 2016-01-08T17:55:15.137

1

I would recommend just sending $userId alone then call getCustomerDetails($userId) in the invoice.php page.

$.ajax({
    type: "GET",
    url: "classes/invoice.php",
    data: $userId
  })
});

OR

$.ajax({
    type: "GET",
    url: "classes/invoice.php&function=getCustomerDetails&userId="+$userId
    dataType: "json", //Dont need this if youre returning a string
    success: function(result) {
        alert(result);
    }
  })
});

Then in the invoice page you could call the function using the $_GET variable like so:

 $response = 'error;
 if($_GET['function'] == 'getCustomerDetails'){
      if(!empty($_GET['userId'])){
           $_GET['userId'] = 0;
       }
       $userID = $_GET['userId'];
       $response = getCustomerDetails($userID);
 }
die(json_encode($response)); //for array
die($response); //for a string

edited Jan 08 '16 at 17:55

answered Jan 08 '16 at 15:55

bdevinedev

58
6

Thanks for your response, I was just trying something else. I pasted the values in the loop in an array instead of a string. And im trying to pick the array up with the following code: document.getElementById('select').addEventListener('change', function() { var $userId = this.value; $.ajax({ type: "POST", url: "classes/invoice.php", data: "getCustomerDetails("+$userId+")", dataType: "json", success: function(msg,string,jqXHR) { alert('success'); }, error: function(){ alert('failure'); } })}); But im still getting a failure... – Frank W. Jan 08 '16 at 16:11
data: "getCustomerDetails("+$userId+")" Could this line be the problem that it does not correctly call the method? – Frank W. Jan 08 '16 at 16:23
I believe so. Ive never called a function in that manner, not sure if it would work or not. Are you still having problems or have you figured it out? – bdevinedev Jan 08 '16 at 17:31
Unfortunately i still haven't figured it out.. Took me almost all day now. The problem is still on calling the right method. – Frank W. Jan 08 '16 at 17:40
I deal with this exact waterfall dropdown problem quite a lot. I will edit my original answer to show how i usually accomplish this task. – bdevinedev Jan 08 '16 at 17:43
it appears you're just returning a long string with your function so encoding it as json is not necessary. You can just return it as a string. – bdevinedev Jan 08 '16 at 17:58
Allright, thanks i just did that because i inserted all the lines in an array. Im now gonna try the example you gave me in your answer. Thanks for your help, it's really appreciated – Frank W. Jan 08 '16 at 18:34
Allright, look like im getting close and getCustomerDetails() get called but now i get an error saying "db::getInstance()->query()", DB class is not found. And i think that is the only reason now i am not getting any results. How can i fix this? – Frank W. Jan 08 '16 at 20:17
It took a bit more work but i finally did it! Thanks for your help! – Frank W. Jan 09 '16 at 01:29

score 0 · Answer 2 · answered Apr 15 '16 at 15:09

If you use xajax framework... you need register the new function...

<?php include 'xajaxAIO.inc.php'; 
$xajax = new xajax(); 
$xajax->register(XAJAX_FUNCTION, 'getCustomers');
$xajax->register(XAJAX_FUNCTION, 'getCustomerDetails'); 
$xajax->processRequest(); ?> 
<input type="button" onclick="xajax_getCustomerDetails(1);" value="Click Me" />

<?php function getCustomerDetails($id){
    ///////////////////////////////////////////////
    ///// And use framework xajax to response /////
    ///////////////////////////////////////////////
}?>

get results from database based on a selectfield

2 Answers2