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>
Related
I am trying to clear form fields after submitting via ajax but it does not work. Someone please help check my codes and give me some good suggestions. Below is my code:
jQuery(document).on('click', '.um-message-send:not(.disabled)',function(e){
e.preventDefault();
jQuery('.um-message-send:visible').addClass('disabled');
var message_to = jQuery('.um-message-body:visible').attr('data-message_to');
var content = jQuery('.um-message-textarea textarea:visible').val();
jQuery.ajax({
url: um_scripts.ajaxurl,
type: 'post',
dataType: 'json',
data: { action: 'um_messaging_send', message_to: message_to, content: content },
success: function(data){
jQuery('.um-message-textarea textarea:visible').val('');
jQuery('.um-message-body:visible').find('.um-message-ajax:visible').html( data.messages );
if ( data.limit_hit ) {
jQuery('.um-message-footer:visible').html( jQuery('.um-message-footer:visible').attr('data-limit_hit') );
}
jQuery('.um-popup-autogrow:visible').mCustomScrollbar('update').mCustomScrollbar("scrollTo", "bottom",{ scrollInertia:0});
}
});
return false;
});
Html
<div class="um-message-textarea">
<?php echo $this->emoji(); ?>
<textarea name="um_message_text" id="um_message_text" data-maxchar="<?php echo $limit; ?>" placeholder="<?php _e('Type your message...','um-messaging'); ?>"></textarea>
</div>
<div class="um-message-buttons">
<span class="um-message-limit"><?php echo $limit; ?></span>
<i class="um-faicon-envelope-o"></i><?php _e('Send message','um-messaging'); ?>
</div>
The answer was simply to replace success with complete as such...
success: function(data) {
// [...]
=>
complete: function(data) {
// [...]
<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 am trying to get data from one php page and pass it to another page using Ajax.
JS :
$.ajax({
url: "action.php",
success: function(data){
$.ajax({
url: "data.php?id=data"
}
});
action.php :
<?php
$test= 1;
?>
data.php :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="" src="action.js"></script>
<?php
$id = $_GET['id'];
echo $id;
?>
First of all, you need to echo your data in action.php, and second, use data parameter of AJAX request to send data to data.php.
Here's the reference:
jQuery.ajax()
So the organization of pages should be like this:
JS :
$.ajax({
url: "action.php",
success: function(data){
$.ajax({
url: "data.php",
data: {id: data},
success: function(data){
// your code
// alert(data);
}
});
}
});
action.php :
<?php
$test = 1;
echo $test;
?>
data.php :
<?php
$id = $_GET['id'];
echo $id;
?>
Try to use $.get() method to get/send data :
$.get("action.php",{}, function(data){
//data here contain 1
$.get("data.php", {id: data}, function(id){
alert(id);
}
});
Just echo $test since just the data printed in page will return as responce to the query request.
action.php :
<?php
$test=1;
echo $test;
?>
Hope this helps.
For example,
Test
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="" src="action.js"></script>
action.js
$('.dataClass').click(function(){
var value=$(this).attr('data-value');
$.ajax({url:"Ajax_SomePage.php?value="+value,cache:false,success:function(result){
alert("success");
}});
});
Ajax_SomePage.php
<?php
$value = $_GET['value'];
echo $value;
?>
To get data as response in ajax call, you need to echo the result from your php page; action.php page.
echo $test = 1;
In your provided code
$.ajax({
url: "data.php?id=data"
} // closing bracket is missing
you are sending the string data as id to data.php page. Instead you have to append the result with the url using + symbol like shown in the below code.
$.ajax({
url: "action.php",
success: function(data){
$.ajax({
url: "data.php?id="+data
})
}
});
This is my html code
<html>
<body>
<form name="form1" action="php1.php" method="post">
<input type="text" name="text1">
<input type="submit" name="submit1">
</form>
<div id="div1">
</div>
</body>
</html>
This is my php1.php code
<?php
if(isset($_POST['submit1']) && ($_POST['text1'])=="text"){
echo "hello";
}
?>
If I want to call the output of php1.php i.e., hello, in html div1 what to do ?
#Uzumaki, I've edited my html code like this, but its not working, here is my code.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
$("form#postit").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: "hello.php",
type: 'POST',
data: formData,
async: false,
success: function (data)
{
// $("#div1").append(data); // or
$("#div1").html(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
</script>
</head>
<body>
<form name="form1" method="post" id="postit">
<input type="text" name="text1">
<input type="submit" name="submit1">
</form>
<div id="div1">
</div>
</body>
</html>
Since you didn't mention via jquery or ajax I am assuming you are going with a simpler old fashioned way So here is the code
SEND YOUR MESSAGE BACK TO HTML PAGE LIKE THIS
$msg = "hello"
header("Location: your_html_page.html?msg=".$msg);
IN HTML DO THIS
<div id="div1">
<?php
error_reporting(0);
echo $_GET['msg'];
?>
</div>
USING JQUERY :
Post the data to php
$.post("your_php_page.php",{data:data},function(returned_data_from_php){
$("#div1").append(returned_data_from_php); // or
$("#div1").html(returned_data_from_php);
});
Using Ajax
$("form#postit").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: "your_php_page.php",
type: 'POST',
data: formData,
async: false,
success: function (returned_data_from_php)
{
$("#div1").append(returned_data_from_php); // or
$("#div1").html(returned_data_from_php);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
PHP
what ever you want to return from php it should be echo and there are many ways to do that
(Single string) echo "Success";
(Multiple Strings) echo $msg1.$msg2;
(Array data)
for example ...
$data = array();
$i = 0;
while($numbs = mysql_fetch_array($result))
{
$row_numb = $numbs['id'];
$data[$i] = $row_numb;
$i++;
}
echo json_encode($data);
// this will pass a json type object to the java script
When you get to javascript you want to access all the elements of the array one by one well that's easy too
JAVASCRIPT
parsed_it = JSON.parse(data); // data is the json type you got from your php
so parsed_it[0],parsed_it[1],parsed_it[2] and so on you can access all the data
hope it helps !!
Put the PHP into your HTML file where you want the result. Be sure your file is named something.php and that you have a PHP processor on the server.
<html>
<body>
<form name="form1" action="php1.php" method="post">
<input type="text" name="text1">
<input type="submit" name="submit1">
<div id="div1">
<?php
if(isset($_POST['submit1']) && ($_POST['text1'])=="text"){
echo "hello";
}
?>
</div>
</body>
</html>
You may use AJAX to dynamically load script output:
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get
You may also consider using jQuery to simplify your code:
http://api.jquery.com/jquery.get/
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)
}
});
}