Question

I have seen a few snippets attempting to explain how this is done however I am struggling to integrate the code. As you will see from my code and previous questions I am new to AJAX but finding it thoroughly rewarding.

Basically, I am in the process of creating a small ticketing system for internal job management and problem tracking.

So far I have a drop down form where you select the user and using AJAX the users assets are returned from MySQL. There is then a tick box on the subject heading. (This will be moving to the asset as realised that some users may have multiple assets.)

What I need to understand is how to pass back to the original form what assets are selected within the AJAX result so that the asset is recording when the ticket is submitted.

All the code below is not currently sanitised and needs a good clean!

This is the AJAX code and form from the original page:

<h3>Assign User</h3> 

<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","./includes/submit-ticket-ajax-1.php?q="+str,true);
xmlhttp.send();
}
</script>


<select style="width:217px; height:20px !important;" name="company_staff_select" onchange="showUser(this.value)">

            <option value=""></option>';

      $o = "SELECT * FROM company_staff WHERE company_id = " . $company_id . " ORDER BY id DESC";
    $rs = mysql_query($o);
    $nr = mysql_num_rows($rs);
    for ($i=0; $i<$nr; $i++) {
    $r = mysql_fetch_array($rs);
$staff_id = $r['id'];

            echo '<option id="person" name="person" value="' . $staff_id . '">' . $r['firstname'] . ' ' . $r['lastname'] . '</option>';
}

echo '

</select>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

This is the code of the page called by AJAX:

$q=$_GET["q"];



$sql="SELECT * FROM company_staff WHERE id = '$q'";

$result = mysql_query($sql);

$row = mysql_fetch_array($result);


$users_computer = $row['computer_id'];
$users_sim = $row['sim_id'];
$users_mobile = $row['mobile_id'];




$sql2="SELECT * FROM company_computers WHERE `id` = '$users_computer'";

$result2 = mysql_query($sql2);

$row2 = mysql_fetch_array($result2);




$sql3="SELECT * FROM company_sims WHERE id = '$users_sim'";

$result3 = mysql_query($sql3);

$row3 = mysql_fetch_array($result3);




$sql4="SELECT * FROM company_mobiles WHERE id = '$users_mobile'";

$result4 = mysql_query($sql4);

$row4 = mysql_fetch_array($result4);




echo '<br /><table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email<input type="checkbox" name="email" value="' . $row['email'] . '"  /></th>
<th>Computer Name<input type="checkbox" name="comp" value="' . $row2['id'] . '"  /></th>
<th>Company Phone Number<input type="checkbox" name="sim" value="' . $row3['id'] . '"  /></th>
<th>Company Mobile<input type="checkbox" name="mobile" value="' . $row['id'] . '"  /></th>
</tr>';

  echo '<tr>
        <td>' . $row['firstname'] . '</td>
        <td>' . $row['lastname'] . '</td>
        <td>' . $row['email'] . '</td>
        <td>' . $row2['computer_name'] . '</td>
        <td>' . $row3['phone_number'] . '</td>
        <td>' . $row4['make'] . ' ' . $row4['model'] . '</td>

    </tr>


<tr>
<b>Please select the device this ticket is related to if any.</b>
</tr>


        ';




echo '</table>';

?>

Any advice would be greatly appreciated and the more broken down the greater the appreciation!

Kind Regards,

n00bstacker

Answer 1

You can do this easier using jQuery.
Just include the jQuery library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
    $('#idOfYourSelectBox').change(function(){
       var val = $(this).val();

       //post submits data via post
       $.post("./includes/submit-ticket-ajax-1.php", {"id" : val}, function(data){
          $('#txtHint').html(data); //the same as innerHTML in javascript
       });
       //you can also pass more data by adding items in the map:
       //{"id" : val, "name" : val2}
       //or simply serialize the form if you're submitting a form via ajax, this way you won't need to get the individual values for each field
    });
</script>

Data is submitted to submit-ticket-ajax-1.php via POST. Which is the same as that of when submitting forms:

<form method="post">

The only difference is that its doing it without full page refresh.

And since you submitted the data via POST you will also have to access it using $_POST in PHP just like how you get the data from normal html forms.

$id = $_POST['id']; 

Then you can just use $id in your query. Of course you will have to verify if its valid, and make sure that it’s sanitized to prevent things like sql injection.

I also noticed that you’re still using the original mysql api for php. If you have read in the official php documentation http://www.php.net/manual/en/intro.mysql.php
it isn’t recommended anymore. You can use PDO or MySQLi to take advantage of prepared statements which prevents sql injection.

Some advice (I’m not really an expert so its always wise to verify what you’re learning by doing a quick google search):

PHP is a templating language so instead of echoing html out, only echo out values inside html:

<td><?php echo  $row['firstname']; ?></td>

And not:

echo '<tr>
        <td>' . $row['firstname'] . '</td>

Updates:

In your original code you have this:

xmlhttp.open("GET","./includes/submit-ticket-ajax-1.php?q="+str,true);
xmlhttp.send();

When you convert it to jquery code it will look like this:

$.get("./includes/submit-ticket-ajax-1.php", {'q' : str});

Then in your submit-ticket-ajax-1.php file you are accessing the value that was passed via ajax and using it on your query:

$q=$_GET["q"];
$sql="SELECT * FROM company_staff WHERE id = '$q'";

And I somehow got lost because there were also a bunch of queries after that. But I assume that you’re making use of the results of that query to generate html which is this one:

echo '<br /><table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email<input type="checkbox" name="email" value="' . $row['email'] . '"  /></th>
<th>Computer Name<input type="checkbox" name="comp" value="' . $row2['id'] . '"  /></th>
<th>Company Phone Number<input type="checkbox" name="sim" value="' . $row3['id'] . '"  /></th>
<th>Company Mobile<input type="checkbox" name="mobile" value="' . $row['id'] . '"  /></th>
</tr>';

You’re saying that you want to pass in data from submit-ticket-ajax-1.php file to the page where you are originally calling ajax right?
That’s why you don’t need the html with the table and forms inside of it.
What you need is to encode the results of the query into json so that it can be parsed by javascript later on the client side.
And since you have multiple results sets you might want to store them all in an array like this and then use json_encode to convert it to json format.

$data = array("row" => $row, "row2" => $row2);
echo json_encode($data);

Going back to the client side code. You now have to call JSON.parse to convert the json string to a javascript object so that it can be manipulated using javascript:

   $.post("./includes/submit-ticket-ajax-1.php", {"id" : val}, function(data){
      var json_data = JSON.parse(data); //convert to object
      //accessing the data that was passed
      var email = json_data['row']['email'];
      var row2_id = json_data['row2']['id'];


   });

Now that you have the data, you can just suppply the values to the forms using javascript. I assume that you have a hidden container somewhere and the form that you want to supply values is inside that container:

<div style="display:none;">

In which case all you have to do is assign the data fetched via ajax into those forms like:

$('#email').val(email);

But of course you can also do what you were originally doing by just generating the html on the page called by ajax and just use $('#container').html(data).

This has gotten really long I really hope I’ve explained it clearly. But if you have further questions feel free to ask.