Display the result after it submit through Ajax - php

When submitted the results from my form and insert the values in sql after that i want message to display without refresh the page. Or probably refresh automated without user hit refresh.

on succes part you can display result.
$.ajax({
url: "file.php",
data: "a=" + id,
type: "POST",
success: function(data) {
$("#anyid").html(data);
}
});

$(document).ready(function(){
$('#button').click(function(){
$.ajax({
type: "POST",
url: 'form.php',
// your data - this gets id="title" and put it on $_POST['val1']
data: {val1:$('#title').val()},
// .done sends returned data to div id="bs"; you can use .append instead of .html for overwriting the data.
}).done(function(data){
$('#bs').html(data);
})
});
}
);

you can use different function of jquery to show message if your require is success
$.ajax({
url: "test.php",
data: "user_id=" + user_id,
type: "POST",
success: function(data) {
$('#message_div_id').text("Your message").show();
}
});

Related

How can I send post data with ajax in jquery when loading page?

When loading a page, I need to send with the post method information to show just the same time the information received
I have this as an example in jQuery:
$(document).ready(function(){
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
});
The ready() event occurs when the DOM (document object model) has been loaded.
Since you want AJAX call to happen when document is loading move below code outside ready();
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
$(document).ready(function(){
var data = { "Boner": "Jams"};
$.ajax({
type: "POST",
url: "http://www.copypasta.org/postdatahere",
data: JSON.stringify(data),
success: function(){
alert("WOW A BONER!");
},
dataType: "json"
});
});
You are already using the right example just set the url,data and dataType variables
$(document).ready(function(){
var url="http://example.com/post.php";
var data={field1:"value1",field2:"value2"};
var dataType="text";
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
});
as Jaydeep Mentioned you can also use the same example without .ready if you want ajax request to happen even if the page is still loading
var url="http://example.com/post.php";
var data={field1:"value1",field2:"value2"};
var dataType="text";
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
Also another note
dataType is decided by the data you are expecting to receive not the data you are sending for plain text use "text" for JSON encoded date use "json"

How to Send Jquery Ajax data on Same php Page?

hi i want to send javascript data via ajax to the same page in wordpress. Cannot fetch the data in testajax.php page. its shows Undefined index: name. And how to send the data on same php page rather than testajax.php ?
<script>
jQuery.ajax({
type: "POST",
url: 'http://localhost/projects/xxx/wordpress/wp-content/themes/xxx/testajax.php',
data: {name:'foo'},
success: function(data)
{
alert('success');
}
});
var foo = 'somename';
jQuery.ajax({
url:'yourUrl',
type: "POST",
data: {'name':foo},
success: function(data)
{
alert('success');
}
});
php
<?php
if(isset($_POST['name'])){
//Do whatever you want
}else{
//Do whatever you want
}
?>
jQuery.ajax({
url: "./_FILE_" // ./index.php for example
type: "POST",
data: {name:'foo'},
success: function(data)
{
alert('success');
}
});

Using AJAX to pass variable to PHP and retrieve those using AJAX again

I want to pass values to a PHP script so i am using AJAX to pass those, and in the same function I am using another AJAX to retrieve those values.
The problem is that the second AJAX is not retrieving any value from the PHP file. Why is this? How can I store the variable passed on to the PHP script so that the second AJAX can retrieve it?
My code is as follows:
AJAX CODE:
$(document).ready(function() {
$("#raaagh").click(function(){
$.ajax({
url: 'ajax.php', //This is the current doc
type: "POST",
data: ({name: 145}),
success: function(data){
console.log(data);
}
});
$.ajax({
url:'ajax.php',
data:"",
dataType:'json',
success:function(data1){
var y1=data1;
console.log(data1);
}
});
});
});
PHP CODE:
<?php
$userAnswer = $_POST['name'];
echo json_encode($userAnswer);
?>
Use dataType:"json" for json data
$.ajax({
url: 'ajax.php', //This is the current doc
type: "POST",
dataType:'json', // add json datatype to get json
data: ({name: 145}),
success: function(data){
console.log(data);
}
});
Read Docs http://api.jquery.com/jQuery.ajax/
Also in PHP
<?php
$userAnswer = $_POST['name'];
$sql="SELECT * FROM <tablename> where color='".$userAnswer."'" ;
$result=mysql_query($sql);
$row=mysql_fetch_array($result);
// for first row only and suppose table having data
echo json_encode($row); // pass array in json_encode
?>
No need to use second ajax function, you can get it back on success inside a function, another issue here is you don't know when the first ajax call finished, then, even if you use SESSION you may not get it within second AJAX call.
SO, I recommend using one AJAX call and get the value with success.
example: in first ajax call
$.ajax({
url: 'ajax.php', //This is the current doc
type: "POST",
data: ({name: 145}),
success: function(data){
console.log(data);
alert(data);
//or if the data is JSON
var jdata = jQuery.parseJSON(data);
}
});
$(document).ready(function() {
$("#raaagh").click(function() {
$.ajax({
url: 'ajax.php', //This is the current doc
type: "POST",
data: ({name: 145}),
success: function(data) {
console.log(data);
$.ajax({
url:'ajax.php',
data: data,
dataType:'json',
success:function(data1) {
var y1=data1;
console.log(data1);
}
});
}
});
});
});
Use like this, first make a ajax call to get data, then your php function will return u the result which u wil get in data and pass that data to the new ajax call
In your PhP file there's going to be a variable called $_REQUEST and it contains an array with all the data send from Javascript to PhP using AJAX.
Try this: var_dump($_REQUEST); and check if you're receiving the values.
you have to pass values with the single quotes
$(document).ready(function() {
$("#raaagh").click(function(){
$.ajax({
url: 'ajax.php', //This is the current doc
type: "POST",
data: ({name: '145'}), //variables should be pass like this
success: function(data){
console.log(data);
}
});
$.ajax({
url:'ajax.php',
data:"",
dataType:'json',
success:function(data1){
var y1=data1;
console.log(data1);
}
});
});
});
try it it may work.......

Passing AJAX variables to a Jquery ui dialog on the same page

Right now I've got a ui dialog on a page, and I need some way to pass a javascript variable to the php within the dialog via AJAX. Here's my code:
$('.user').click(function(){
var user = getID($(this).attr('id'),'User');
$.ajax({
type: "POST",
url: "test.php",
data: 'user=' + user,
success: function(){
$("#dialog").dialog('open');
}
});
});
and the beginning of the PHP:
<?php
if(isset($_POST['user'])){
echo '<center><b>User: '.ucfirst($_POST['user']).'</b></center><br />';
}
The problem is, it's just not getting passed. I'm very new with Ajax so I'm sure I'm messing something up.
This is not working because you don't specify the return variable, see your code with correction:
$('.user').click(function(){
var user = getID($(this).attr('id'),'User');
$.ajax({
type: "POST",
url: "test.php",
data: 'user=' + user,
success: function(data){ // Here you specify the callback variable from the AJAX call
alert(data); // Here will show '<center><b>User: UserExample </b></center><br />';
$("#dialog").dialog('open');
}
});
});
You can make your dialog content my loading some page like Userpage.php and then pass User as a url parameter
$('.user').click(function(){
var user = getID($(this).attr('id'),'User');
$.ajax({
type: "POST",
url: "test.php",
data: 'user=' + user,
success: function(){
$("#dialog").load('/userpage.php?User=' + user).dialog('open');
}
});
});

Try to get the right GET link which shows the good info in shoppingcart

Ok here is my problem after months of searching over the internet. I want to get the right link from jquery to take the right div and show them on the page. For now the files takes the root with GET
I got 2 files.
shopping_cart.php and jquery-oscart.js
jquery-oscart.js
$.ajax({
type: 'POST',
url: encodeURI($(location).attr('href')) + '&action=update_product&ajax=1',
data: $('form[name=cart_quantity]').serialize(),
async:false,
success: function(data) {
$("#content-body").html(data);
//Hide_Load();
//update_cart();
},
dataType: 'html'
});
// Updating cart total
//
$.ajax({
type: 'POST',
url: encodeURI($(location).attr('href')) + '&action=update_product&show_total=1&ajax=1',
data: $('form').serialize(),
success: function(data) {
$('#boxcart-total').html(data);
//Hide_Load();
}
});
return(false);
});
The action: .attr('action')
The div that show up should be #content_body from the shoppingcart file.
In the shoppingcart.php file there is an action that calls:
<script type="text/javascript" src="js/jquery-oscart.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
In normal state there is no problem.
here is my question.
When execute the files Firefox gives me the following rules:
POST domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2&action=update_product&ajax=1
GET domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2
POST domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2&action=update_product&show_total=1&ajax=1
GET domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2
instead of
POST domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2&action=update_product&ajax=1
GET domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2&ajax=1
POST domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2&action=update_product&show_total=1&ajax=1
GET domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2&show_total=1&ajax=1
In the GET. I miss &ajax=1 and &show_total=1&ajax=1
Something had to be changed in the jquery_oscart.js but I don't know where to change...
I tried the .load function with the right link but that's not a solution.
I hope someone can help me with this.
The original code is:
jQuery.ajax({
type: 'POST',
url: encodeURI($('form[name=cart_quantity]').attr('action')) + '&ajax=1',
data: jQuery('form[name=cart_quantity]').serialize(),
success: function(data) {
jQuery("#content-body").html(data);
//Hide_Load();
//update_cart();
}
});
// Updating cart total
jQuery.ajax({
type: 'POST',
url: encodeURI($('form[name=cart_quantity]').attr('action')) + '&show_total=1&ajax=1',
data: jQuery('form').serialize(),
success: function(data) {
jQuery('#boxcart-total').html(data);
//Hide_Load();
}
});
return(false);
});
it gives the link:
domain/index.php&ajax=1
instead of
domain../index.php?option=com_oscommerce&osMod=shopping_cart&Itemid=2&action=update_product&ajax=1
Could it be something with the 'form'? It seems it send me to index.php instead of index.php?option=com_oscommerce&osMod=shopping_cart
Problem solved the ? option... link was hidden. With another file I get is showed. Now the POST links are fine. The problem I only got is the GET link.
It seems url: encodeURI($('form[name=cart_quantity]').attr('action')) + '&ajax=1',
Gets 2 links a POST en ea returning GET. The returning link missed the &ajax=1 at the end.
Maybe try
url: encodeURI($(location).attr('href') + '&action=update_product&ajax=1'),
(I put &action=blahblah inside encodeURI)
Problem could be solved by adding + 'format=ajax' in the url
like:
jQuery.ajax({
type: 'POST',
url: encodeURI($('form[name=cart_quantity]').attr('action')) + '&format=ajax'+ '&ajax=1',
data: jQuery('form[name=cart_quantity]').serialize(),
success: function(data) {
jQuery("#content-body").html(data);
//Hide_Load();
//update_cart();
}
});
// Updating cart total
jQuery.ajax({
type: 'POST',
url: encodeURI($('form[name=cart_quantity]').attr('action')) + '&format=ajax'+ '&show_total=1&ajax=1',
data: jQuery('form').serialize(),
success: function(data) {
jQuery('#boxcart-total').html(data);
//Hide_Load();
}
});

Categories