We Keep Coding

PHP Ajax , Not able to pass a PHP value from one page to another using AJAX

I have a php code that post value using ajax to another php page , but the value provided is not reflecting in UI nor in console .
$(document).ready(function() {
$('#CustomerName').click(function() {
customername = $(this).text();
load_data(customername);
// console.log(customername); // works
});
function load_data(Customername) {
// console.log(Customername); // works
$.ajax({
url: "getvalueafterclick.php",
method: "POST",
data: {
Customername: Customername,
EnvironmentType: "BA"
},
success: function(data) {
$('#result').html(data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("some error occured->" + jqXHR.responseJSON);
}
});
}
});
<?php
// perform actions for each file found
foreach (glob("CustomerConfigFiles/*.json") as $filename) {
echo ' <a href="#" id ="CustomerName" class="mm-active">
<i class="metismenu-icon pe-7s-rocket"></i>'.substr(substr($filename,20), 0, -5).'</a>';
}
?>
So when i give console.log in function and onclick , it returns value but when i try to pass CustomerName , it just returns null .
getvalueafterclick.php
<?php
$pat =$_POST['EnvironmentType'];
$lat =$_POST['Customername'];
echo "<script>console.log('Customer Name: " . $lat . "');</script>";
echo "<script>console.log('ENVIRON: " . $pat . "');</script>";
?>
Here is output i get :

Change id to class for CustomerName , I have added/ changed your code, see if it helps to solve your problem.
$(document).ready(function() {
// changed # to . for class
$('.CustomerName').click(function() {
customername = $(this).text();
load_data(customername);
// console.log(customername); // works
});
function load_data(Customername) {
// console.log(Customername); // works
$.ajax({
url: "getvalueafterclick.php",
method: "POST",
data: {
Customername: Customername,
EnvironmentType: "BA"
},
success: function(data) {
$('#result').html(data);
// console added to check what it is giving
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("some error occured->" + jqXHR.responseJSON);
}
});
}
});
<?php
//your code
// perform actions for each file found
// here in link change id to class for customer name
foreach (glob("CustomerConfigFiles/*.json") as $filename) {
echo ' <a href="#" class="CustomerName" class="mm-active">
<i class="metismenu-icon pe-7s-rocket"></i>'.substr(substr($filename,20), 0, -5).'</a>';
}
// my testing code
$data =["a","b","c","d","e","f","g","h"];
// perform actions for each file found
// here in link change id to class for customer name
foreach ($data as $filename) {
echo ' <a href="#" class="CustomerName" class="mm-active">
<i class="metismenu-icon pe-7s-rocket"></i>'.$filename.'</a>';
}
?>
getvalueafterclick.php
<?php
$pat =$_POST['EnvironmentType'];
$lat =$_POST['Customername'];
echo "Customer Name:" . $lat . "-";
echo "ENVIRON: " . $pat ;
?>

Like Dislike with single checkbox php ajax

I have checked all related questions on SO, but still looking for the best answer.
I am coding a review system where anyone can comment and logged in users can like their review (Like or undo their like only ...not dislike).
For that, I am using a checkbox and onClick call an ajax function that will like the review and if click again it will undo the action.
problem
Initially, When someone like the review, ajax call will like it and on Success it will change attr onClick to unlike(); function but again when i click on it it does not work fine...
MY TRY
<?php if($review['is_liked']){ ?>
<input type="checkbox" name="review_like" id="<?php echo $review['review_id'] . '-' . $review['customer_id'] . '-' . $review['product_id']; ?>" checked="checked" onclick="unlike(<?php echo $review['review_id'] . '-' . $review['customer_id'] . '-' . $review['product_id']; ?>);" />
<?php } else { ?>
<input type="checkbox" name="review_like" id="<?php echo $review['review_id'] . '-' . $review['customer_id'] . '-' . $review['product_id']; ?>" onclick="like(<?php echo $review['review_id'] . '-' . $review['customer_id'] . '-' . $review['product_id']; ?>);" />
<?php } ?>
And JS (id passing to JS func looks like 1105-249532-18117)
<script>
function unlike(id){
console.log('unlike');
var id2 = toString(id).split('-');
console.log('Unlike: '+id);
console.log('split id: '+ id2);
$.ajax({
url: 'index.php?route=product/product/like_review',
type: "get",
data: {
'is_liked': 1,
'review_id': id[0],
'customer_id': id[1],
'product_id': id[2]
},
dataType: 'json',
success: function(json) {
console.log(json);
$('.btn-thumbs-up').find('input[type=checkbox][name=review_like]').attr("onclick","like(id);");
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}
function like(id){
console.log('like');
console.log('Liked: '+id);
var id2 = toString(id).split('-');
console.log('split: '+id2);
$.ajax({
url: 'index.php?route=product/product/like_review',
type: "get",
data: {
'is_liked': 0,
'review_id': id[0],
'customer_id': id[1],
'product_id': id[2]
},
dataType: 'json',
success: function(json) {
console.log(json);
$('.btn-thumbs-up').find('input[type=checkbox][name=review_like]').attr("onclick","unlike(id);");
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}
the id i am passing to like/unlike function is not working fine in console and also split function even use toString func or wdout...
Please fix this or suggest better way to do this task...

You could handle it at client side with simpler conditions. Change the <input> tag to:
<input type="checkbox" name="review_like" data-id="<?php echo $review['review_id']; ?>" data-customer="<?php echo $review['customer_id'] ?>" data-product="<?php echo $review['product_id']; ?>" checked="<?php echo ( $review['is_liked'] ? "checked" : ""); ?>" />
And add this jQuery script to handle the checkbox change:
$('input[name="review_like"]').change ( function ()
{
$.ajax (
{
url: 'index.php?route=product/product/like_review',
type: "get",
data:
{
'is_liked': $(this).prop('checked'),
'review_id': $(this).data ( 'id'),
'customer_id': $(this).data ( 'customer'),
'product_id': $(this).data ( 'product')
},
dataType: 'json',
success: function ( json)
{
console.log ( ( $(this).prop('checked') ? 'Unliked' : 'Liked') + ' review ' + $(this).data ( 'id') + ', customer ' + $(this).data ( 'customer') + ', product ' + $(this).data ( 'product'));
},
error: function ( xhr, ajaxOptions, thrownError)
{
alert ( thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});

Removing cart products from input with product id value

I wanted to work with input type ="hidden" so I can do a check. I have a slider which displays products of a category and through two Ajax requests I add and remove them through clicks on buy and remove buttons, however that does not have as much relevance in this question.
Only one such product on the slide can be purchased by order, but if one of them is added and the page is updated and the buy button is clicked again, another of that product is added, which should not happen. I wanted to make sure that in the update of the page, if there is already one of these products added, it is removed, but I do not know where to follow it to complete it.I think I should use an input type ="hidden", so that through it I can save the value of the id of the added product, but I do not know how to do this verification.
Below I will add the code of the buttons and the input that I have already made and are correct, besides the code of the Ajax requisitions. If necessary, I add the code of the controllers I use.
Button and input code:
<button style="margin-left: 11%;" type="button" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<button style="display: none; margin-left: 11%;" type="button" id="cartaoMensagemRemover<?php echo $_product->getId(); ?>" title="Remover" class="button btn-cart" onclick="removeCartaotoCart('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Remove</span></span></button>
<input type="hidden" name="cartao_adicionado" id="cartao_adicionado" value="" />
Ajax requisition code:
var productSelected = "";
function addCartao(product){
if( productSelected != "" ){
removeCartaotoCart(productSelected); // Remove the item in cart, if there is one.
}
$j('#cartaoMensagem'+product).hide();
$j('#cartaoMensagemRemover'+product).show();
$j('#cartaoMensagemRemover'+product).css({'background-color': '#000000'});
$j.ajax({
type: "POST",
url: "<?php echo Mage::getUrl('fol_carousel/ajax/addCartao') ?>",
data: {
product: product
},
dataType: 'json',
cache : false,
beforeSend: function () {
},
success: function (retorno) {
var button = $j('#cartaoMensagemRemover'+product);
productSelected = product;
$j('#cartaoMensagemAdicionado').val(productSelected);
$j('.item-custom').append('<tr id="trAppend'+product+'"><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>');
getSubTotal();
getGrandTotal();
},
complete: function () {
},
error: function (x,y,z) {
alert("error");
alert(x);
alert(y);
alert(z);
}
});
}
function removeCartaotoCart(itemId){
productSelected = "";
$j('#cartaoMensagemRemover'+itemId).hide();
$j('#cartaoMensagem'+itemId).show();
$j.ajax({
type:"POST",
url:"<?php echo Mage::getUrl('fol_carousel/ajax/removeCartao') ?>",
data:{
itemId: itemId
},
cache: false,
beforeSend: function(){
},
success: function(retorno){
var button = $j('#cartaoMensagemRemover'+itemId);
$j('#cartaoMensagemAdicionado').val(productSelected);
$j('.item-custom #trAppend'+itemId+'').remove();
getSubTotal();
getGrandTotal();
},
complete: function () {
},
error: function (x,y,z) {
alert("error");
alert(x);
alert(y);
alert(z);
}
});
}

What you should do is make a small php code to do the verification, where it contains the SKUs of these products and if they are in the cart, assign a value to a boolean variable and insert it into an input to work this value in jQuery.
Php code for verification:
<?php
$array_de_skus_de_cartoes = array(45,60,80,90,102,103,104,105); //SKUs of products
$isCartaoAdicionado = 0;
$cart = Mage::getModel('checkout/cart')->getQuote();
foreach ($cart->getAllItems() as $item) {
foreach ($array_de_skus_de_cartoes as $sku) {
if($sku == $item->getProduct()->getSku()) {
$isCartaoAdicionado = 1;
$cartao_id = Mage::getModel("catalog/product")->getIdBySku($sku);
}
}
}
if($isCartaoAdicionado == 1) {
?>
<input type="hidden" name="cartao_adicionado" id="cartao_adicionado" value="1" />
<input type="hidden" name="cartao_adicionado_product_id" id="cartao_adicionado_product_id"" value="<?php echo $cartao_id ?>" />
<?php
}
else {
?>
<input type="hidden" name="cartao_adicionado" id="cartao_adicionado" value="0" />
<input type="hidden" name="cartao_adicionado_product_id" id="cartao_adicionado_product_id"" value="" />
<?php
}
?>
Ajax request code updated:
var isCartaoAdicionado = $j('#cartao_adicionado').val();
var isCartaoAdicionadoProductId = $j('#cartao_adicionado_product_id').val();
var productSelected = "";
function addCartao(product){
if(isCartaoAdicionado == 1){
removeCartaotoCart(isCartaoAdicionadoProductId);
}
if( productSelected != "" ){
removeCartaotoCart(productSelected); // Remove the item in cart, if there is one.
}
$j('#cartaoMensagem'+product).hide();
$j('#cartaoMensagemRemover'+product).show();
$j('#cartaoMensagemRemover'+product).css({'background-color': '#000000'});
$j.ajax({
type: "POST",
url: "<?php echo Mage::getUrl('fol_carousel/ajax/addCartao') ?>",
data: {
product: product
},
dataType: 'json',
cache : false,
beforeSend: function () {
},
success: function (retorno) {
var button = $j('#cartaoMensagemRemover'+product);
productSelected = product;
$j('#cartaoMensagemAdicionado'+product).val(productSelected);
$j('.item-custom').append('<tr id="trAppend'+product+'"><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>');
getSubTotal();
getGrandTotal();
},
complete: function () {
},
error: function (x,y,z) {
alert("error");
alert(x);
alert(y);
alert(z);
}
});
}
function removeCartaotoCart(itemId){
productSelected = "";
$j('#cartaoMensagemRemover'+itemId).hide();
$j('#cartaoMensagem'+itemId).show();
$j.ajax({
type:"POST",
url:"<?php echo Mage::getUrl('fol_carousel/ajax/removeCartao') ?>",
data:{
itemId: itemId
},
cache: false,
beforeSend: function(){
},
success: function(retorno){
var button = $j('#cartaoMensagemRemover'+itemId); $j('#cartaoMensagemAdicionado'+itemId).val(productSelected);
$j('.item-custom #trAppend'+itemId+'').remove();
getSubTotal();
getGrandTotal();
},
complete: function () {
},
error: function (x,y,z) {
alert("error");
alert(x);
alert(y);
alert(z);
}
});
}

Javascript Ajax are not getting data in the dropdown Select tag in php (PDO)

i am having a problem with one of my scripts , i wanted to show data on dropdown select tag but their is a problem with my javascript it's not working even the alert() is not responding maybe it's because of the functions i wrote. by the way php data is good and getting it's output from the pages in array format
home.php
<div class="form-group">
<span class="label label-default">Country</span>
<select class="form-control" id="country1">
<div class="form-group">
<span class="label label-default" >Province</span>
<select class="form-control"id="province1">
</select>
</div>
Now the Javascript Code which is creating problem
<script type="text/javascript">
function country() {
$('#country1').empty();
$('#country1').append("<option> Loading --- </option>");
$('#province1').append("<option value='0'>--Select Province-- </option>");
$.ajax({
type:"POST",
url:"country_dropdown.php",
contentType:"application/json; charset=utf-8",
datatype:"json",
success: fuction(data) {
$('#country1').empty();
$('#country1').append("<option value='0'>-- Select Country---</option>");
$.each(data,function(i,item){
$('#country1').append('<option value="'+data[i].CountryID + '">'+ data[i].CountryName +'</option>');
});
},
complete : function() {
}
});
}
$(document).ready(function(){
country();
});
function province(id) {
$('#province1').empty();
$('#province1').append("<option> Loading --- </option>");
$.ajax ({
type:"POST",
url:"province_dropdown.php?id"+id,
contentType:"application/json"
charset:"utf-8",
dataType:"json",
success: function(data){
$('#province1').empty();
$('#province1').append("<option value='0'> --Select Province-- </option>");
$.each(data,function(i.item)
$('#province1').append('<option value="'+data[i].ProvinceID+'">'+data[i].ProvinceName+'</option>');
});
complete: function() {
}
});
}
</script>
My database Connection seems to be fine as both the files are getting the results
country_dropdown.php
<?php
include('config.php');
include('class.user.php');
try {
$obj = new USER();
$stmt = $obj->getCountry();
echo "{";
while($result=$stmt->fetch(PDO::FETCH_ASSOC)){
echo '"'.$result['CountryID'].'":"'.$result['CountryName'].'",';
}
echo '"0":"Select Country"}';
}
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
header('Content-type: application/json');
?>
province_dropdown.php
<?php
include('config.php');
include('class.user.php');
try {
$obj = new USER();
$stmt = $obj->getProvince();
echo "{";
while($result=$stmt->fetch(PDO::FETCH_ASSOC)){
echo '"'.$result['ProvinceID'].'":"'.$result['ProvinceName'].'",';
}
echo '"0":"Select Province"}';
}
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
header('Content-type: application/json');
?>
class.user.php file which has the functions to query the data ,they are also working fine but i think it should also be consider as any possible problem can came from the start
class.user.php
public function getCountry() {
$stmt =$this->conn->prepare("SELECT * FROM country");
$stmt->execute();
return $stmt;
}
public function getProvince(){
$stmt =$this->conn->prepare("SELECT * FROM province WHERE Country_CountryID='".$_GET["id"]."'");
$stmt->execute();
return $stmt;
}
The problem is in here as both these select tags can't get values as country value index correspond to the province , so province is dependent upon the country

First, where is your event handler for when you change the country?
Second, you have bunch of typo-like errors in your code.
Here's some fixes:
$(document).ready(function() {
// cache the elements that you will be re-using
var $country = $('#country1'), $province = $('#province1');
// renamed
function getCountries() {
$country.html("<option> Loading --- </option>");
$province.html("<option value='0'>--Select Province-- </option>");
$.ajax({
type: "POST",
url: "country_dropdown.php",
// typo: datatype:"json"
dataType: "json",
// error: success: fuction (data) {
success: function (data) {
$country.html("<option value='0'>-- Select Country---</option>"); // simplified
$.each(data, function (i, item) {
$country.append('<option value="' + item.CountryID + '">' + item.CountryName + '</option>');
});
// attach event listener to the country dropdown, so that when the country changes, we load the related provinces
$country.on('change', getProvinces);
// trigger event listener ^ to get related country's provinces
$country.trigger('change');
}
});
}
// renamed
function getProvinces() {
$province.html("<option> Loading --- </option>"); // simplified
$.ajax ({
type: "POST",
url: "province_dropdown.php?id" + $(this).val(),
dataType: "json",
success: function (data) {
$province.html("<option value='0'> --Select Province-- </option>"); // simplified
// error: $.each(data, function(i.item)
$.each(data, function (i, item) {
// error: ('#province1').append(...)
$province.append('<option value="' + item.ProvinceID + '">' + item.ProvinceName + '</option>');
});
}
});
}
// load the countries
getCountries();
});
Another thing, the whole point of using prepare() is to avoid SQL injection. The way that you are using it is wrong in the second function.
class.user.php
public function getCountry() {
$stmt = $this->conn->query("SELECT * FROM country"); // no need to use prepare() as you are not using any untrusted data
return $stmt;
}
// renamed
public function getProvinceByCountry($id) {
$stmt = $this->conn->prepare("SELECT * FROM province WHERE Country_CountryID = ?"); // notice the '?' ?
$stmt->execute(array($id));
return $stmt;
}
You shouldn't need to build your JSON object. Use json_encode().
country_dropdown.php
<?php
include('config.php');
include('class.user.php');
try {
$obj = new USER();
$stmt = $obj->getCountry();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null; //unnecessary
header('Content-type: application/json');
echo json_encode($results);
?>
province_dropdown.php
<?php
include('config.php');
include('class.user.php');
try {
$obj = new USER();
$stmt = $obj->getProvinceByCountry($_GET["id"]);
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null; //unnecessary
header('Content-type: application/json');
echo json_encode($results);
?>

The getProvince() function in your class.user.php code contains a syntax error here: ='".$_GET["id"]."'" - It should be ="'".$_GET["id"]."'". Also, when writing a database and column name I think it should be a period and not an underscore, but I'm not 100% sure about that.

there are some errors in the script, i can't test the ajax respons by with the chrome console I found something wrong. i've tried to replace your script, it doesn't give the error in the console, I hope it is helpfull.
function country() {
$('#country1').empty();
$('#country1').append("<option> Loading --- </option>");
$('#province1').append("<option value='0'>--Select Province-- </option>");
$.ajax({
type: "POST",
url: "country_dropdown.php",
contentType: "application/json; charset=utf-8",
datatype: "json",
success: function(data) {
$('#country1').empty();
$('#country1').append("<option value='0'>-- Select Country---</option>");
$.each(data, function(i, item) {
$('#country1').append('<option value="' + data[i].CountryID + '">' + data[i].CountryName + '</option>');
});
},
complete: function() {
}
});
};
$(document).ready(function() {
country();
});
function province(id) {
$('#province1').empty();
$('#province1').append("<option> Loading --- </option>");
$.ajax({
type: "POST",
url: "province_dropdown.php?id=" + id,
contentType: "application/json"
charset: "utf-8",
dataType: "json",
success: function(data) {
$('#province1').empty();
$('#province1').append("<option value='0'> --Select Province-- </option>");
$.each(data, function(i,item) {
$('#province1').append('<option value="' + data[i].ProvinceID + '">' + data[i].ProvinceName + '</option>');
}),
complete: function() {
}
}
} );
};

newajax onclick not working for dynamically created items

I have a table where users can add rows using jquery. This is all working fine to a point. the problem I have is the dynamically created row has a button with an onclick event that connect to new Ajax code to browse from computer. The problem is button work in first generated row but when i generated another the button not work .
This is the button with onclick event:
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="simple-image<?php echo $image_row; ?>" class="upimage"><?php echo $text_browse; ?></a>
New Ajax code for event :
function image_upload(field, thumb ){
new AjaxUpload('#simple-image' + <?php echo $image_row; ?>, {
action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')),
name: 'image',
autoSubmit: true,
responseType: 'json',
onChange: function(file, extension) {
this.setData({'directory': ''});
this.submit();
},
onSubmit: function(file, extension) {
$('#simple-image' + <?php echo $image_row; ?>).append('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
},
onComplete: function(file, json) {
if (json.success) {
$('#' + field).attr('value','data/user/'+file);
$.ajax({
url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')),
dataType: 'text',
success: function(text) {
$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
}
});
}
if (json.error) {
alert(json.error);
}
$('.loading').remove();
}
});
};
Any help will be much appreciated.

<?php $iid = 0; ?>
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>','simple-image<?php echo $image_row.$iid; ?>');" id="simple-image<?php echo $image_row.$iid++; ?>" class="upimage"><?php echo $text_browse; ?></a>
function image_upload(field, thumb , idd ){
new AjaxUpload('#'+idd , {
action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')),
name: 'image',
autoSubmit: true,
responseType: 'json',
onChange: function(file, extension) {
this.setData({'directory': ''});
this.submit();
},
onSubmit: function(file, extension) {
$('#simple-image' + <?php echo $image_row; ?>).append('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
},
onComplete: function(file, json) {
if (json.success) {
$('#' + field).attr('value','data/user/'+file);
$.ajax({
url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')),
dataType: 'text',
success: function(text) {
$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
}
});
}
if (json.error) {
alert(json.error);
}
$('.loading').remove();
}
});
};