jQuery .ajax won't pass the second data value to PHP - php

here is my code.
$('input[name="add-message-post"]').click(function() {
$.ajax({
type: 'POST',
url: 'addpost.php',
data: { message_name: $('input[name="new-message-name"]').val(), message_content: $('input[name="new-message-content"]').val() }
})
.done(function(data) {
$(data).hide().prependTo('#messages').fadeIn('slow');
});
});
if I do print_r($_POST) on addpost.php it only shows $_POST['message_name']
it should pass message_content over as well

Related

Can't POST data through AJAX/Fancybox to PHP file

Hey I can't pass a JS variable through AJAX to php file. No matter if I try POST or GET it's not working: with POST it gave me [] or Undefined index if I want to print_r($_POST['adminID']
And GET, there I get {"fancybox":"true"}
$('#adminList tr').on('click', function() {
var adminID = $(this).find(".adminID").text();
console.log(adminID);
$.ajax({
type: 'POST',
url: 'modules/management/user_edit.php',
data: {adminID : adminID},
success: function(data)
{
$.fancybox.open({
src : 'modules/management/user_edit.php',
type : 'ajax'
});
}
});
});
and module/management/user_edit.php i just want to post this adminID
You send double request to user_edit.php file, first with POST data, and second without. You should display result of first request in fancybox.
$('#adminList tr').on('click', function() {
var adminID = $(this).find(".adminID").text();
$.ajax({
type: 'POST',
url: 'modules/management/user_edit.php',
data: {adminID : adminID},
success: function(response)
{
$.fancybox.open(response);
}
});
});

Call ajax after success

I made an ajax request to get the name of each button I click...
Then I want to put everything in that url into "#Container".(url define a page that has some codes)
It works for me at the first time...but for the other times I have to reload the page to show me the details of each button and it doesn't show me details of other buttons that clicked after first desired button..
$(function () {
$('button').click(function () {
var data= $(this).val();
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {
data: data
},
success: function (data) {
$('#container').html(data);
}
});
});
});
What should I do?
Is there something preventing of running the ajax for next times ?
Try with $(document).on('click', instead of $('button').click like below
$(function () {
$(document).on('click','button',function () {
var data= $(this).val();
alert(data);
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);}
});
});
});
You will need to re-bind ajax event because of its re-rendering DOM after an ajax request completes. All those elements under #container are not virtual part of DOM and your click event only works for pre-existed elements.
Try this
Wrap ajax event in a separate function
function ajaxEvent(data){
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);
clickEvent(); //note this function attachment I added below
}
});
}
You can wrap your click event into a function
function clickEvent(){
$('button').off('click');
$('button').on('click',function(){
ajaxEvent($(this).val());
});
}
Now js looks like
<script>
$(function(){
clickEvent();
});
function ajaxEvent(data){
$.ajax({
url: '/myurl',
type: 'post',
dataType: 'json',
data: {data: data},
success: function (data) {
$('#container').html(data);
}
});
}
function clickEvent(){
$('button').off('click');
$('button').on('click',function(){
ajaxEvent($(this).val());
});
}
</script>
Also I see you are passing ajax data as $('button').val() which is not correct. Use a input type text if you want to send a data to server.

when I send data with ajax php wont get anything

post and get works fine but json returns wrong value , or something is wrong with my php code.
$(function () {
$('#username').on('keypress',function () {
var input = $('#username').val();
if(input.length>=4){
$.ajax({
url:'registration_php.php',
type: 'POST',
data:{username:input},
success:function () {
$.getJSON('registration_php.php',function (text) {
alert(text.user);
});
}
});
}
});
});
success:function(result) {
var items = JSON.parse(result);
alert(items['user']);
}
pass the result directly to your reponse as an argument like this
you should specify a dataType: "json" in your ajax call
var postData = JSON.stringify({
username: 'value'
});
var request = $.ajax({
url: "registration_php.php",
method: "POST",
dataType: "json",
data: postData,
});
request.success(function( results ) {
console.log(results)
});

refresh div after sending data to db

i have a div that shows the total sum of some products:
<div class="total-price"><?php echo (!empty($cart)) ? $cart['total'] : '0'; ?> $</div>
with ajax, i'm adding products to cart ... se the page is not reloading.
How to refresh the div after I add the product to cart?
The ajax that i'm using:
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
data: $(this).serialize(),
success: function () {
$(".success-message").slideDown().delay(5000).slideUp();
$(".total-price").something...;
}
});
})
</script>
Thank you!
You can do something like this:
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
data: $(this).serialize(),
success: function () {
$(".success-message").slideDown().delay(5000).slideUp();
var oldPrice = $('.total-price').text() * 1;
var itemPrice = "15"; //the price that should be added
$('.total-price').text(oldPrice + itemPrice);
}
});
})
</script>
You should be returning a total basket value from your /tdt/order path.
In the PHP script you should echo some JSON data with all the required information, for example
echo json_encode(array("totalPrice" => "£10.01"));
Then you need to parse this information into your Javascript and update the pages elements;
<script>
$('#order-to-cart').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/tdt/order',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
$(".success-message").slideDown().delay(5000).slideUp();
$('.total-price').val(data.totalPrice);
}
});
})
</script>
The above ajax request will expect the data returned to be JSON, you will then use this to update the total-price element.
You can use something like angularjs or knockoutjs - for angular you would update your model - for knockout you would use the self.object.push(value) i.e.,
function OrderViewModel() {
var self = this;
self.myOrder = ko.observableArray([]);
self.addOrderItem = function () {
$.ajax({
type: "post",
url: "yourURL",
data: $("#YOURFORMFIELDID").serialize(),
dataType: "json",
success: function (value) {
self.myOrder.push(value);
},
headers: {
'RequestVerificationToken': '#TokenHeaderValue()'
}
});
}
}
ko.applyBindings(new orderViewModel());
</script>
</pre>

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');
}
});

Categories