Failing ajax function and some advice on how to debug jquery/ajax calls

Question

I am working on a project for a crm(just to learn) and i have trouble with an ajax function.

<div class="dropdown">
    <label>Name</label>
    <select class="named" name ="named" id="named" onchange="userData('<?php echo $client['client_name']; ?>')">
        <?php
        $clients=mysqli_query($db->db,"SELECT client_name FROM clients");
        foreach($clients as $client): ?>
        <option value="<?= $client['client_name'];?>"><?= $client['client_name']; ?></option>
    <?php endforeach; ?>
    </select>

</div>
<div class="form-group">
    <label>Location</label>
    <input type="text" class="form-control" name="locationd" id="locationd"/>

and the ajax function

function userData(name){
    alert('debug');
    $.ajax({
        type: 'POST',
        dataType:'JSON',
        url: 'adminAction.php',
        data: 'action_type=clientdata&name='+name,
        success:function(data){
            alert('debug');
            $('#locationd').val(data.client_location);
        }
    });
}

its a mysql generated dropdown and on change it should fill the location input with this clients location but it doesnt work.Apache returns no errors but i am kinda noob especially when it comes to debugging ajax calls(how the ** can i see what data it sends and receives ? :D).Thanks for your help in advance !! I post the adminaction.php code too

if($_POST['action_type'] == 'clientdata'){
            $tblName = 'clients';
            $conditions['where'] = array('client_name' =>$_POST['named']);
            $conditions['return_type'] = 'single';
            $client = $db->getRows($tblName,$conditions);
            echo json_encode($client);
            $tblName  = 'clients_contact';

for anyone interested i fixed it like that

function userData(){
            userData = $("#named").serialize()+'&action_type=clientdata';
            $.ajax({
                type: 'POST',
                dataType:'JSON',
                url: 'adminAction.php',
                data: userData,
                success:function(data){
                    $('#locationd').val(data.client_location);
                }
            });
        }

Open Developer console (F12) in Chrome or (Ctrl+Shift+I) in Firefox, and then go to Network tab to see the request and response — shakib, Aug 23 '16 at 08:23
[This solution](http://stackoverflow.com/a/12052515/6693643) and [this post](http://stackoverflow.com/questions/22813346/jquery-ajax-log-the-http-request) might help — Dhananjay, Aug 23 '16 at 08:25
You should add an error handler in your ajax function and you should post the contents of `adminAction.php`. — jeroen, Aug 23 '16 at 08:28
@RiggsFolly nah man that didnt work.it seems it doesnt send any data in the name variable..probably mesed something — liakos lakamas, Aug 23 '16 at 08:32
Also note that you are not actually using the value of the selected option in your ajax call, you will always send the same data in your ajax request. — jeroen, Aug 23 '16 at 08:34
You are attempting to use `onchange="userData('')"` this variable before you actually execute the query to fetch it. — RiggsFolly, Aug 23 '16 at 08:36
You are not fetching the data from the query you execute anyway `mysql_fetch_assoc()` for example — RiggsFolly, Aug 23 '16 at 08:36
Can I suggest you write a simple
with a submit button and see how that works before attempting to move on to AJAX — RiggsFolly, Aug 23 '16 at 08:43
you was right i fixed my data fetching but i dont understand why onchange on empty variable is problematic since the event is called after the dropdown is being populated.VTC as TYPO?. — liakos lakamas, Aug 23 '16 at 08:56

score 1 · Answer 1 · answered Aug 23 '16 at 08:48

Usually the main mistake with ajax calls is, that they don't send the expected requests or don't receive the expected results. Both of those can at least be seen with almost every decent browser by:

pressing F12,
going to the network tab and then
check the requests that are made from this point on (sometimes a reload of the page is necessary).

Also: almost every decent browser has a javascript debugger somewhere, where you can set breakpoints and step through your code, while watching all the variables of interest.

score 0 · Answer 2 · edited Aug 23 '16 at 08:56

0

If your AJAX output is in JSON format you can use $.parseJSON(result) to decode your JSON data to Array.

edited Aug 23 '16 at 08:56

Marin Atanasov

3,266
3
35
39

answered Aug 23 '16 at 08:28

Manish Arora

259
1
4
11

2

As the `dataType` is set to `json`, it will be parsed automatically. – jeroen Aug 23 '16 at 08:29

Failing ajax function and some advice on how to debug jquery/ajax calls

2 Answers2