How to debug my Ajax/jQuery app? - javascript

I am trying some things regarding Ajax, Jquery and PHP.
My JavaScript code (the pop.php is located correctly)
<script type="text/javascript">
$('.nameclick').click(function()) {
ev.preventDefault();
$.ajax({
typ: "POST"
url: "/pop.php"
data: {id=$(this).data("formid")}
success: function(result){
alert(result);
} else {
alert("test");
}
});
});
</script>
Part of my html/php code in the same page (this code works fine to print out the table I am looking for):
<table class="data-table">
<thead>
<tr>
<th>Servicenummer</th>
<th>Kund</th>
<th>Uppgift</th>
<th>Status</th>
<th>Inlämnad</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
$total = 0;
while ($row = mysqli_fetch_array($query))
{
echo '<tr>
<td><div id="clickMe">'.$row['service'].'</div></td>
<td>'.$row['name'].'</td>
<td>'.$row['Drakt1'].'<br>'.$row['Drakt2'].'<br>'.$row['Drakt3'].'<br>'.$row['Drakt4'].'<br>'.$row['Drakt5'].'<br>'.$row['Drakt6'].'<br>'.$row['reg1'].'<br>'.$row['flaska1'].'<br>'.$row['dator1'].'</td>
<td>'.$row['Service_Status'].'</td>
<td>'.$row['date'].'</td>
</tr>';
$no++;
}?>
</tbody>
</table>
And my pop.php:
<?php
require 'connection.php';
$conn = Connect();
$name = $conn->real_escape_string($_POST['name']);
$email = $conn->real_escape_string($_POST['email']);
$telephone = $conn->real_escape_string($_POST['telephone']);
$sql = 'SELECT name, email, telephone FROM Service_Form WHERE id = "10"';
$query = mysqli_query($conn, $sql);
if (!$query) {
die ('SQL Error: ' . mysqli_error($conn));
}
?>
<?php
while ($row = mysqli_fetch_array($query))
{
echo $row['name'];
echo $row['email'];
echo $row['telephone'];
}
?>
At the moment when I click my link in my normal page I don't get anything, no alerts at all, but my pop.php prints out the values correctly, I hope... I know I have to change my id="10" to something but i am not certain to what, could it be formid?
What am I doing wrong here?
What I want:
a table with the values below from a table in the database
when I click the name in the table it should show an alert (or something similar) that shows the name, email and telephone number (these are stored as well in the database table but not on the website table).

your ajax function is having some errors
so use this
<script type="text/javascript">
$('.nameclick').click(function(ev) {
ev.preventDefault();
var id = $(this).data("formid");
$.ajax({
type: "POST",
url: "pop.php",
data: {
"id":id
},
success: function(result){
alert(result);
},
error:function (error) {
alert(error);
}
});
});
</script>

I am editing your jquery part please try
<script type="text/javascript">
$('.nameclick').click(function(ev)) {
ev.preventDefault();
$.ajax({
typ: "POST"
url: "/pop.php"
data: {id:$(this).attr("data-formid")}
success: function(result){
if(result){
alert(result);
} else {
alert("test");
}
}
});
});
</script>

Related

Making a html alert using ajax, sql and php

I am trying to make some code where a click of a SQL html button can display a different SQL table as a popup. I have already gotten the variable from the table to pass through using this:
echo "<td><a class='btn-floating btn-large waves-effect waves-light black' onclick='partSearch(".$product.")' value='display'><i class='material-icons'>search</i></a></td>";
The 'part search' code is as follows:
<script type="text/javascript">
function partSearch() {
$.ajax({
url: 'serv.php?id=<?php echo $product ?>',
type: 'GET',
success: function(result){
var obj = jQuery.parseJSON(result)
alert(obj)
}
})
}
</script>
Even though the variable is passed through to 'serv.php', I can't manage to get the sql data to be returned as a popup using alert. All I get is either nothing or [object, Object]. This is the SQL/php code:
<?php
include 'includes/dbh.inc.php';
$id = $_GET['id'];
$result = mysqli_query($conn,"SELECT * FROM pr WHERE product_ID='".$id."'");// test this
$rows = array();
while($r = mysqli_fetch_assoc($result)){
$rows[] = $r;
}
echo json_encode($rows);
?>
Any help is appriciated
<script type="text/javascript">
function partSearch() {
var product_id = "<?php echo $product; ?>";
$.ajax({
url: 'serv.php?id=product_id',
type: 'GET',
success: function(result){
alert(result);
}
})
}
</script>

Ajax is refreshed php but not updated

The information is not updated, or rather it refreshes, but it does not take out the new information. if I enter data.php, then if it takes out the new information, it's like it keeps the cache memory and doesn't get the new information added. After entering data.php, everything also appears in ajax.
data.php:
<?php
$conn = new mysqli('localhost', 'xxx', 'x', 'xx');
if ($conn->connect_error) {
die("Connection error: " . $conn->connect_error);
}
$result = $conn->query("SELECT * FROM `users`");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo
" <tr>
<td>".$row['username']."</td>
<td>Jackson</td>
<td>94</td>
</tr>";
}
}
?>
ajax:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ajax_call = function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "data.php",
dataType: "html", //expect html to be returned
success: function (response) {
$("#responsecontainer").html(response);
}
});
};
var interval = 1000;
setInterval(ajax_call, interval);
});
</script>
Edit: you change the data in ajax only if you manually enter data.php and then change it automatically in ajax page.
Only change GEt from POST and is work fine.

jquery ajax return values into html form

I need help with returning values from jQuery/AJAX to html form inside index.php
index.php :
<script type="text/javascript">
$(document).ready(function () {
$('#display').ready(function () {
var pageid = '<?php echo $_GET[\'ID\'] ;?>';
var powiat = '<?php echo $row[\'powiat\'] ;?>'
$.ajax({ //create an ajax request to display.php
type: 'GET',
url: 'display.php?ID=' + pageid + '&powiat=' + powiat,
dataType: 'html', //expect html to be returned
success: function (response) {
$('#responsecontainer').html(response);
//alert(response);
}
});
});
});
(...)
echo "<form action=\"save.php\" method=\"GET\">";
echo "<tr><td>IP</td><td><div id=\"responsecontainer\"></td></tr>";
echo "<input type=\"submit\" value=\"Save\">" ;
echo "</table></form>
display.php file contains:
$disp_result_2 = mysql_query("SELECT ip FROM swittche_ip WHERE powiat LIKE '%$disp_powiat%' AND ip NOT IN ( SELECT ip FROM switche )" )or die(mysql_error());
while($disp_row_1 = mysql_fetch_assoc($disp_result_2)){
echo "<option value=\"".$disp_row_1['ip']."\">".$disp_row_1['ip']</option>";
}
In return I have filed html as expected but when I try submit form filed by jquery/ajax I have error
Notice: Undefined index: ip.
How can I handle with that?
Thanks.
Syntax error in your code when you are printing the option.
Updated code is as below.
$disp_result_2 = mysql_query("SELECT ip FROM swittche_ip WHERE powiat LIKE '%$disp_powiat%' AND ip NOT IN ( SELECT ip FROM switche )" )or die(mysql_error());
while($disp_row_1 = mysql_fetch_assoc($disp_result_2)){
?>
<option value="<?php echo $disp_row_1['ip'];?>" ><?php echo $disp_row_1['ip'];?></option>
<?php }

Getting the value

I just need some ideas how i get the value from the dropdown
<select id="ins" name="instructor" required>
<?php
//dropdown instructor name
echo "<option value=\"\">"."Select"."</option>";
$qry = "select * from instructor";
$result = mysqli_query($con,$qry);
while ($row = mysqli_fetch_array($result)){
echo "<option value=".$row['insA_I'].">".$row['insname']."</option>";
}
?>
</select>
and put the value in this .php file in $_POST['instructor']
<?php
session_start();
require 'connection.php'; //connection
$qry = "select course from instructor where insA_I = '".$_POST['instructor']."'";
$result = mysqli_query($con,$qry);
$_SESSION['row'] = mysqli_fetch_array($result);
$data = $_SESSION['row']['course'];
echo $data;
?>
am still new in ajax
$(document).ready(function() {
$('#ins').change(function(){
$.ajax({
type: "POST",
url: "json_php.php",
data: '',
datatype: 'json',
success: function(result){
alert(result);
}
});
});
});
i already searched this in internet but didn`t get my answer after some modifcation
just need idea, techniques .etc.
Try this ajax code
$(document).ready(function() {
$('#ins').change(function(){
$.ajax({
type: "POST",
url: "json_php.php",
data: {instructor:$(this).val()},
success: function(result){
alert(result);
}
});
});
});
php code for query
$qry = "select course from instructor where insA_I = '".$_POST['instructor']."'";
$result = mysqli_query($con,$qry);
$fetch = mysqli_fetch_array($result);
$_SESSION['row']['course']=$fetch['course'];
$data = $_SESSION['row']['course'];
echo $data;
Since you're using jQuery, use jQuery:
data: { instructor: $('#ins').val() }
Also, please note that your SQL query is wide open to SQL injection. This is a good place to start reading about that.

Editing a row using an Ajax request

Here I have shown 4 files I am using to edit rows of table by taking data from the database.
First file is DataAdministration.php. when loading this file #Loading_Page7 should be shown and after clicking on #EditForms I need to show #Loading_Page8 div. At the moment when it is displaying for the first time I need to load DisplayData.php inside to #Loading_Page8 div. To support that I have used Update.js file. After loading DisplayData.php I need to edit a selected row by clicking on the edit link. Then the editable input box needed to be display in the relevant FormName column. Instead of writing them in the same file I need to use separate files like I have used here. But after clicking on edit link ajax request is not sent to the UpdateData.php file.
I'm working with this for many days but couldn't fix it yet. This is quite a long question. But please someone be kind enough to show my mistake.
<html>
<head>
<script type='text/javascript' src='Update.js'></script>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#Loading_Page8").hide();
$("#EditForms").click(function(){
$("#Loading_Page7").hide();
$("#Loading_Page8").show();
ABC();
C();
return false;
});
});
</script>
</head>
<body>
<div id="Loading_Page7" >
<div id="EditForms" class="AddUser">
<li><span>Edit/Delete Forms</span> </li>
</div>
</div>
<div id="Loading_Page8">
<div class="User" style="color:#0B173B">Forms_Available_to_Collect_Pubic_Health_Information </div>
<div id="DisplayFormDetails" style="position:absolute; top:100px; width:1000px;">
</div>
</div>
</body>
</html>
This is the Update.js file
function ABC(){
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "DisplayData.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#DisplayFormDetails").html(response);
//alert(response);
}
});
C();
}
function C() {
$(".FormEdit").click(function(){
var B=$(this).attr('id');//ID comming is FormEdit3. And now B==4
var NumericValue=B.replace("FormEdit","");
$.ajax({
type:"POST",
url:"UpdateData.php",
data:{ NumericValue : NumericValue },
success:function(data){
$("#FormName"+NumericValue).html(data);
},
error: function (err){
alert(err.responseText)
}
});
});
}
This is DisplayData.php
<?php
include 'connectionPHP.php';
$result=mysqli_query($con,"SELECT * FROM Form");
echo "<table border='1' >
<tr style='background-color:#D0A9F5;' height='40px;'>
<th width='100px;'>Form ID</th>
<th width='420px;'>Form Name</th>
<th width='70px;'>Edit</th>
</tr>";
$i=1;
while($row = mysqli_fetch_array($result)) {
$w=$row['Form_ID'];
echo "<tr height='25px;'>";
echo "<td name='FormID' id='FormID ".$i."' align=center>$row[Form_ID] </td>";
echo "<td name='FormName' id='FormName".$i."' align=left>$row[Form_Name]</td>";
echo "<td class='FormEdit' id='FormEdit".$i."' align=center><a href='' align=left>Edit</a></td>";
echo "</tr>";
$i++;
}
echo "</table>";
?>
And Finally UpdateData.php file.
<?php
include 'connectionPHP.php';
if(isset($_POST['NumericValue'])) {
$uid = $_POST['NumericValue'];
echo $uid;
$query ="SELECT * FROM Form WHERE Form_ID='$uid' ";
$FetchResults=mysqli_query($con,$query);
while($row=mysqli_fetch_array($FetchResults)) {
$FormName=$row['Form_Name'];
echo '<input type="text" value="$FormName"></input>';
}
}
?>
The call to UpdateData.php in inside a click handler which sits inside the function C(){..}. Just calling C() on click of #EditForms will not suffice.
Also, I don't think .FormEdit is being used anywhere.
EDIT:
function C() {
var NumericValue = $("#DisplayFormDetails table tr").length;
$.ajax({
type: "POST",
url: "UpdateData.php",
data: {
"NumericValue": NumericValue
},
success: function (data) {
$("#FormName" + NumericValue).html(data);
},
error: function (err) {
alert(err.responseText)
}
});
}

Categories

Resources