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)
}
});
}
Related
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>
i'm trying coding some ajax coding that when user enter their name then click submit, all the data that related with them will be display without refreshing page. But my problem is my code doesn't work(don't show output). can i know what the problem is and maybe give me some solution/example thanks.
below is my code:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#display").click(function() {
$.ajax({ //create an ajax request to load_page.php
type: "POST",
url: "tesz2.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
</script>
<body>
<form method = Post onclick="display">
<input type ="text" id='name'><br>
<input type='submit'>
</form>
<h3 align="center">Manage Student Details</h3>
<div id="responsecontainer" align="center"></div>
</body>
Php File:
<?php
include("co.php");
mysql_select_db("testing",$con);
$result=mysql_query("select * from Login where user_name='".$_POST['name']."'",$con);
echo "<table border='1' >
<tr>
<td align=center> <b>user Id No</b></td>
<td align=center><b>Name</b></td>
<td align=center><b>Password</b></td>
<td align=center><b>responsibility</b></td></td>";
while($data = mysql_fetch_row($result))
{
echo "<tr>";
echo "<td align=center>$data[0]</td>";
echo "<td align=center>$data[1]</td>";
echo "<td align=center>$data[2]</td>";
echo "<td align=center>$data[3]</td>";
echo "</tr>";
}
echo "</table>";
?>
co.php is my config.file
in you form you are use onclick method and when call ajax you can use #display as id but it is method so remove your form code and put this code
<form method = Post id="display">
<input type ="text" id='name'><br>
<input type='submit'>
</form>
You need to send the name variable to the php page. Your ajax request should look like this:
$.ajax({ //create an ajax request to load_page.php
type: "POST",
url: "tesz2.php",
data: { name: $('#name').val() }, // set the naem variable
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
// alert(response);
}
});
});
});
Edit: You also need to use Dhaval Gohel's answer. There was more than one problem.
Edit: You also should change you .clcik to .submit. That's probably the behavior you're looking for.
Your javascript would look like this:
<script type="text/javascript">
$(document).ready(function() {
$("#display").submit(function(e) {
e.preventDefault();
$.ajax({ //create an ajax request to load_page.php
type: "POST",
url: "tesz2.php",
data: { name: $('#name').val() }, // set the naem variable
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
</script>
<html>
tables, textbox, buttons
</html>
<?php
//some php, sql stuff
echo "<td><input type='button' name='disable' value='Disable' onClick='disable($id);'/></td>";
if(isset($_POST['action']) && $_POST['action']=="delete")
{
if(isset($_POST['ID']) && !empty($_POST['ID']))
{
$id = $_POST['ID'];
echo "Id:".$id;
//Call to another function
die();
}
?>
<script>
function disable(id) {
jQuery.ajax({ type: 'Post',
url: '',
data: {action: 'delete', ID: id}
})
.done(function(data) {
alert("Data Saved: " + data);
location.reload();
});
}
</script>
Alert box is showing html code which is in HTML block and successful messages from php block. I don't need to show HTML code, only need to show successful messages. How to do that??? many thanks
The issue is that you need to respond to the ajax request before any html is sent to the browser and call exit; to stop the remaining page content from being sent as well. Something like this would work:
<?php
if(isset($_POST['action']) && $_POST['action']=='delete'){
// process request......
$id = $_POST['ID'];
echo "Id:".$id;
//Call to another function
exit; // stop the script here so it doesnt also return the html content of the page
}
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
tables, textbox, buttons
<?php
//some php, sql stuff
// note that $id is not defined where you try to use it here in your code, not sure what that's about....
echo "<td><input type='button' name='disable' value='Disable' onClick='disable($id);'/></td>";
?>
<script>
function disable(id) {
jQuery.ajax({ type: 'Post',
url: '',
data: {action: 'delete', ID: id}
})
.done(function(data) {
alert("Data Saved: " + data);
location.reload();
});
}
</script>
</body>
</html>
I'm having big trouble with the ajax function inside the jquery library. I am a complete beginner to jQuery, ajax and php, but I am working on this school project, which is supposed to be a game (kind of), where the page creates a 10x10 table, fills it with numbers and automatically picks one of the cells, and then the user gets to guess which cell it is.
Under the table, there is a textarea, in which I am supposed to output the progress of the game; for instance, "Wrong guess! Number of guesses: 1; Distance to the correct cell: 3", etc...
The problem is in implementation; I have two .php files, one being the main site on which the game is played, and the other one being the statistic part (just mathemathics and stuff).
Without further ado, here are my codes:
The code of the main .php file in which the game is played:
<script>
$(document).ready(function()
{
$("#tablezz td").click(function()
{
var column_num = parseInt( $(this).index() );
var row_num = parseInt( $(this).parent().index() );
var dat = { column: column_num, row: row_num };
$.ajax({
type: "GET",
data: dat,
url: "preveri.php",//this is the name of the mathemathical .php file
success: function(data){
$("#imamonkey").prepend(data);
}
})
});
});
</script>
</head>
<body>
<?php
echo "<table id='tablezz' border='1'>";
$counter=1;
for($i=0; $i<10; $i++){
echo"<tr>";
for($j=0; $j<10; $j++){
echo "<td> $counter </td>" ;
$counter=$counter+1;
}
}
echo"</tr>";
echo "</table>";
session_start();
$_SESSION["rightx"] = rand(1,10);
$_SESSION["righty"] = rand(1,10);
echo"<br>
<br>
<textarea id='imamonkey' rows='30' cols='46'></textarea>";
?>
</body>
And the code of the other, mathemathical .php file;
<?php
$distance=sqrt((($_GET["column"] - $_SESSION["rightx"]) * ($_GET["column"] - $_SESSION["rightx"])) + (($_GET["row"] - $_SESSION["righty"]) * ($_GET["row"] - $_SESSION["righty"])));
if(isset($_SESSION["tries"])) {
$_SESSION["tries"]=$_SESSION["tries"]+1;
}
else {
$_SESSION["tries"]=1;
}
if($_SESSION["rightx"]==$_GET["column"] && $_SESSION["righty"]==$_GET["row"]) {
echo "Gooes guess. This took you $_SESSION['tries'] tries."
}
else {
echo "Bad call! The distance to the right cell is: $distance . So far you've tried $_SESSION['tries'] times.";
}
?>
The only trouble in this is, that my ajax function is apparently not working properly. When I click on a <td> cell to test it, it inserts blank stuff into the textarea. I must've done something wrong with the data and dat, but I am completely clueless what it would be. How do I make it insert the echos from the other .php file for example?
Any help is MUCH appreciated as I am completely clueless what I am doing wrong. Thanks in advance, BG
In your AJAX call you're trying to prepend data to a textarea:
$("#imamonkey").prepend(data);
This means that the data is placed before the textarea in the DOM (you may actually be able to see the data if you look at the updated information in your browser's console). What you want to do is place the data in the textarea:
$("#imamonkey").val(data);
In your PHP file you need to add session_start(); to the beginning of the file and any file in which you expect to use session data such as your HTML file.
You have below errors in your code :
Session must start in the beginning.
Fixed for syntax error.
Also session must start in second page.
Try below script:
<?php
session_start();
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#tablezz td").click(function()
{
var column_num = parseInt( $(this).index() );
var row_num = parseInt( $(this).parent().index() );
var dat = { column: column_num, row: row_num };
$.ajax({
type: "GET",
data: dat,
url: "preveri.php",//this is the name of the mathemathical .php file
success: function(data){
$("#imamonkey").prepend(data);
}
})
});
});
</script>
</head>
<body>
<?php
echo "<table id='tablezz' border='1'>";
$counter=1;
for($i=0; $i<10; $i++){
echo"<tr>";
for($j=0; $j<10; $j++){
echo "<td> $counter </td>" ;
$counter=$counter+1;
}
}
echo"</tr>";
echo "</table>";
$_SESSION["rightx"] = rand(1,10);
$_SESSION["righty"] = rand(1,10);
echo"<br>
<br>
<textarea id='imamonkey' rows='30' cols='46'></textarea>";
?>
</body>
</html>
And second page :
<?php
session_start();
$distance=sqrt((($_GET["column"] - $_SESSION["rightx"]) * ($_GET["column"] - $_SESSION["rightx"])) + (($_GET["row"] - $_SESSION["righty"]) * ($_GET["row"] - $_SESSION["righty"])));
if(isset($_SESSION["tries"])) {
$_SESSION["tries"]=$_SESSION["tries"]+1;
}
else {
$_SESSION["tries"]=1;
}
if($_SESSION["rightx"]==$_GET["column"] && $_SESSION["righty"]==$_GET["row"]) {
echo "Gooes guess. This took you ".$_SESSION['tries']." tries." ;
}
else {
echo "Bad call! The distance to the right cell is: ".$distance." . So far you've tried ".$_SESSION['tries']." times.";
}
?>
I have a PHP page with a form. Once the form is submitted, it calls another PHP page via AJAX to make calls to MySQL, then process the results, and return them to the first PHP page. The MySQL processing takes place inside a while loop. I wanted to update a progress bar that indicates the progress of the loop. But I get:
parsererror
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
and nothing happens. Any ideas if what I am doing below is wrong? How Can I update a progress bar from an AJAX called while loop?
The following is a rough code:
Main PHP page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type='text/javascript' src='jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.10.4.min.js'></script>
<script type='text/javascript' src='my.js'></script>
</head>
<body onLoad="onLoad()">
<form action="" method="POST" id="myForm" name="myForm">
<div id="progressBar"></div>
<input class="txt"
id="btnSubmit"
style="margin-top: 12pt; font-family: arial; color: grey; font-weight: bold; font-size: 15pt;"
type="submit"
name="action"
value="SEARCH" />
</form>
</body>
</html>
The my.js has:
function onLoad() {
$('#progressBar').progressbar({ disabled: true });
$('#progressBar').hide();
}
$(document).ready(function() {
$("#myForm").submit(function(event) {
$(function () {
.ajax({
url: 'myCall.php', // the script to call to get data
type: "POST",
data: { data: 'something'}
},
dataType: 'json',
success: function(data) {
// do something
},
error: function (jqXHR, textStatus, errorThrown){
console.log(textStatus, errorThrown);
},
});
});
});
and myCall.php has some calls to MySQL database, then post processing:
$result = mysqli_query($mysqli, $sql);
$j = 1;
// enable and show the bar
echo '<script language="javascript"></script>';
echo '$("#progressBar").show();';
echo '$("#progressBar").progressbar({';
echo 'disabled: false,';
echo 'value: '.$j.',';
echo 'max: '.$result->num_rows.',';
echo '});';
echo '</script>';
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
// doing stuff and then update the bar
// update
echo '<script language="javascript"></script>';
echo '$("#progressBar").progressbar({';
echo 'value: '.$j.',';
echo '});';
echo '</script>';
}
// disable and hide the bar
echo '<script language="javascript"></script>';
echo '$("#progressBar").progressbar({';
echo 'disabled: true,';
echo '});';
echo '$("#progressBar").hide();';
echo '</script>';
It looks like the JSON you are parsing is not valid JSON. I would print out the JSON you are trying to run through the parser and run it through a JSON validator such as http://jsonformatter.curiousconcept.com/.
Also, the following code looks unclean to me, which might cause the problem. I'm not sure if you are using a more standardized JSON parser. If so, it would probably not expect a data object inside a data object. This is a complete guess, but you should probably change
.ajax({
url: 'myCall.php', // the script to call to get data
type: "POST",
data: { data: 'something'}
},
to
.ajax({
url: 'myCall.php', // the script to call to get data
type: "POST",
data: { "key1" : "value1"}
},
I don't think you are actually showing where the JSON is being parsed in your question. Are you able to show exactly how you parse it and what you are parsing?
Thanks!