JavaScript Ajax to PHP and then back to Javascript

Question

OK So I have a java script that triggers an ajax call when the input field stops having typing action.

//setup before functions
var field = document.getElementById("UPC");
var table=document.getElementById("ScannedItems");
var typingTimer; //timer identifier
var doneTypingInterval = 1000; //time in ms, 1 seconds

//on keyup, start the countdown
$('#UPC').keyup(function(){
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#UPC').keydown(function(){
  clearTimeout(typingTimer);
});


function doneTyping () {
 //user is "finished typing," do something
 var upc=document.getElementById("UPC").value;
 document.getElementById("noScan").className="hidden";
 document.getElementById("checkout").className="";
 document.getElementById("void").className="";

 var dataString = 'upc='+ upc;
 //alert (dataString);return false;  
 $.ajax({  
    type: "POST",  
    url: "assets/PagePHP/pos/scan.php",  
    data: dataString,  
    success: function() {  
        var row=table.insertRow(-1);
        var cell1=row.insertCell(0);
        var cell2=row.insertCell(1);
        var cell3=row.insertCell(2);
        var cell4=row.insertCell(3);
        var cell5=row.insertCell(4);
        var cell6=row.insertCell(5);
        cell1.innerHTML =upc;
        cell2.innerHTML ="Description";
        cell3.innerHTML ="PRICE";
        cell4.innerHTML ="QTY";
        cell5.innerHTML ="TOTAL";
        cell6.innerHTML ="ACTION";
        field.value ='';
    }  
});  
return false;
}

The ajax takes the UPC that was typed into the form and uses it to get the description and price for that specific item. I need to know how to put that information back into the Java Script call to create the rows in the table. The items from the PHP need to go back into the java script in the lines below: (pulled from the script above)

cell1.innerHTML =upc;
cell2.innerHTML ="Description";
cell3.innerHTML ="PRICE";
cell4.innerHTML ="QTY";

My php is short and simple and looks like this:

$result = mysqli_query($con,"SELECT * FROM inventory WHERE item_upc='$_POST[upc]'");

while($row = mysqli_fetch_array($result))
{
echo $row['item_upc'];
echo $row['item_description'];
echo $row['item_price'];
}

This all must be done without refreshing the page. I've googled how to do this but couldn't get a result that matched my situation.

what's returned from your PHP? try updating your success function and log the result to see: success: function(data) { console.log(data); } — Marty Cortez
– Marty Cortez, Commented Oct 1, 2013 at 2:03

GroovyCarrot · Accepted Answer · 2013-10-01 02:08:50Z

I'd do your AJAX query and have your PHP script return a JSON string with your data which you can decode and handle in your success function:

<?php
    header('Content-type: application/json');
    $con = ...; //establish_connection
    $result = mysqli_query($con,"SELECT * FROM inventory WHERE item_upc='$_POST[upc]'");

    $json = array();
    $json['success'] = false;

    while($row = mysqli_fetch_array($result))
    {
        $json['success'] = true;
        $json['item_upc'] = $row['item_upc'];
        $json['item_description'] = $row['item_description'];
        $json['item_price'] = $row['item_price'];
    }

    echo json_encode($json);
?>

And for your AJAX use:

$.ajax({  
    type: "POST",  
    url: "assets/PagePHP/pos/scan.php",  
    data: dataString,
    success:function(data){
        if(data.success==true){
            // handle data array
            var row=table.insertRow(-1);
            var cell1=row.insertCell(0);
            var cell2=row.insertCell(1);
            var cell3=row.insertCell(2);
            var cell4=row.insertCell(3);
            var cell5=row.insertCell(4);
            var cell6=row.insertCell(5);
            cell1.innerHTML =upc;
            cell2.innerHTML = data.item_description;
            cell3.innerHTML = data.item_price;
            cell4.innerHTML ="QTY"; // handle these as you like
            cell5.innerHTML ="TOTAL";
            cell6.innerHTML ="ACTION";
            field.value ='';
        }
        else {
            // nothing returned - error
        }
    }
});

Seems a few of us got to the punch line but you get the jist of what you need to be doing haha.

user967451 · Accepted Answer · 2013-10-01 02:06:53Z

Untested but your code should look something like this:

 $.ajax({  
    type: "POST",  
    url: "assets/PagePHP/pos/scan.php",  
    data: dataString,  
    dataType: 'json',
    success: function(response) {
        // Build out the rows
        var rows = '';
        for(var i=0; i<response.items; i++) {
            rows += '<tr>' +
                        '<td>' + response.item_upc + '</td>' +
                        '<td>' + response.item_description + '</td>' +
                        '<td>' + response.item_price + '</td>' +
                    '</tr>';            
        }

        // Insert rows into table
        $('#my-table').html(rows);
    }  
});

PHP:

$response = array();
while($row = mysqli_fetch_array($result)) {
    $response[] = array(
        'item_upc'          => $row['item_upc']
        'item_description'  => $row['item_description']
        'item_price'        => $row['item_price']        
    );
}

echo json_encode(array(
    'items' => $response
));
die();

2 Suggestions:

you are retrieving info as the user types so you should use GET instead of POST method.
you are already using jQuery for the AJAX so might as well use it for DOM manupulation too which is what it's good at.

jasonslyvia · Accepted Answer · 2013-10-01 02:04:06Z

I suggest you return SQL result as a JSON string in your php code

$result = mysqli_query($con,"SELECT * FROM inventory WHERE item_upc='$_POST[upc]'");
$return_array = array();
while($row = mysqli_fetch_array($result))
{
    $return_array[] = $row;
}

echo json_encode($return_array);

In your js code:

$.ajax({  
    type: "POST",  
    url: "assets/PagePHP/pos/scan.php",  
    data: dataString,  
    success: function(data) {  //add parameter to receive response

        var result = $.parseJSON(data);//parse the return result 
                                       //to a native js an object
        //result should be an array so you can iterate it to get information you need

        var row=table.insertRow(-1);
        var cell1=row.insertCell(0);
        var cell2=row.insertCell(1);
        var cell3=row.insertCell(2);
        var cell4=row.insertCell(3);
        var cell5=row.insertCell(4);
        var cell6=row.insertCell(5);
        cell1.innerHTML =upc;
        cell2.innerHTML ="Description";
        cell3.innerHTML ="PRICE";
        cell4.innerHTML ="QTY";
        cell5.innerHTML ="TOTAL";
        cell6.innerHTML ="ACTION";
        field.value ='';
    }  
});

Collectives™ on Stack Overflow

JavaScript Ajax to PHP and then back to Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related