jQuery: Ajax get request does not work with PHP - javascript

I created a simple script in order to pass a value in a PHP file.
This is the .js script:
$("#test").click(function () {
var id = 34;
$.ajax({
method: "POST",
url: "ajax.php",
data: {
id: id
},
success: function (data) {
alert("data sent");
},
error: function (data) {
alert("Data sending failed");
}
});
});
And this is the code included in the PHP file:
if (isset($_POST['id'])) {
$id = $_POST['id'];
echo $id;
}
The Ajax request works, but in the PHP file I receive an empty variable.

Check your $_GET global, if it's set there, you'll need to change method: "POST" to type: "POST"

Related

Why AJAX on retry sending different url request

I have very stange problem: I have product list and when you click on product to edit the product you go to product form. On this product form I have AJAX that is sending request to getFiltersGroup. I want to resend this AJAX on error, but for some reason on error AJAX is start sending url request for product form not for getFiltersGroup.
Any ideas what is wrong, why is not sending request to getFiltersGroup?
This is what happen on retry:
This is the code:
var retry;
$('#filters-ajax').on('click', function(){
var product_id = "<?php echo isset($set_id) ? $set_id : NULL; ?>";
var ajaxConfig = $.ajax({
url: "index.php?route=catalog/product/getFiltersGroup&token=<?php echo $token ?>",
type: "POST",
data: '&product_id='+product_id,
dataType: 'json',
beforeSend: function(){
$('#btn-product-filter-groups').prop('disabled', true);
},
success: function(data){
clearInterval(retry);
$('#btn-product-filter-groups').prop('disabled', false);
},
error: function(xmlhttprequest, textstatus, message) {
retry = setInterval(function(){
$.ajax(ajaxConfig);
}, 6000)
}
});
})
UPDATE
I fix the url request but now I can't reset the setInverval(). Also I'm never getting alert message. Any ideas what wrong?
var retry;
$('#filters-ajax').on('click', function(){
var product_id = "<?php echo isset($set_id) ? $set_id : NULL; ?>";
$.ajaxSetup({
url: "index.php?route=catalog/product/getFiltersGroup&token=<?php echo $token ?>",
type: "POST",
data: '&product_id='+product_id,
dataType: 'json'
});
var ajaxConfig = $.ajax({
beforeSend: function(){
$('#btn-product-filter-groups').prop('disabled', true);
},
success: function(data){
alert('WTF')
clearInterval(retry);
$('#btn-product-filter-groups').prop('disabled', false);
},
error: function(xmlhttprequest, textstatus, message) {
retry = setInterval(function(){
$.ajax(ajaxConfig);
}, 6000)
}
});
})
$.ajax() returns a jqXHR object, which you are later passing to $.ajax() as a configuration object for a new call:
var ajaxConfig = $.ajax({ ... });
// ...
$.ajax(ajaxConfig);
But that jqXHR object is not an $.ajax() config object, and it will not have a url: ... key/value pair (nor any of your other settings). Checking the docs for the $.ajax() config object it says (emphasis mine):
jQuery.ajax( [settings ] )
settings
Type: PlainObject
A set of key/value pairs that configure the Ajax request. All settings are optional.
And regarding the url setting:
url (default: The current page)
So since there is no URL specified in the config object, it will default to the current page. Your new $.ajax() request will request the current page, your edit page.
If you want to make your AJAX call a callable function, just put it in a function and call it:
function ajaxCall() {
$.ajax({
url: "index.php?route=catalog/product/getFiltersGroup&token=<?php echo $token ?>",
type: "POST",
// ... your code
error: function(xmlhttprequest, textstatus, message) {
retry = setInterval(ajaxCall, 6000)
}
});
}
$('#filters-ajax').on('click', function(){
// ...
ajaxCall();
});
This approach sends off all kinds of recursive alarm bells for me though, I would consider trying another approach.
I dont know why but this one is working if anyone can explain why this code is working and previous code is not working i will accept his answer
$('#filters-ajax').on('click', function(){
var product_id = "<?php echo isset($set_id) ? $set_id : NULL; ?>";
$('#btn-product-filter-groups').prop('disabled', true);
$(function callAjax(){
$.ajax(`index.php?route=catalog/product/getFiltersGroup&token=<?php echo $token ?>&product_id=${product_id}`)
.success( function(data) {
$('#btn-product-filter-groups').prop('disabled', true);
})
.error(function() {
setTimeout ( function(){ callAjax() }, 6000);
});
})
}
})

How to get return text from php file with ajax?

I am making a call with ajax to a php file. All I want to do is get a value back from the php file to test it with javascript. I have tried many many things, but can only get undefined (from the below code).
How can I get "hello" returned from the php file to my javascript?
jQuery.ajax({
type: "POST",
url: "the_file_to_call.php",
data: {userid: group_id_tb},
success: function(data) {
var the_returned_string = jQuery(data).html();
alert(the_returned_string)
}
});
The PHP file:
<?php
echo '<div id="id-query-result>"';
echo "hello";
echo "</div>";
You can change the code inside PHP like this
<?php
$queryResult = '<div id="id-query-result">hello</div>';
echo json_encode(['html' => $queryResult]);
Then, change your ajax call
jQuery.ajax({
type: "GET",
url: "the_file_to_call.php",
data: {userid: group_id_tb},
dataType: 'json',
success: function(data) {
var the_returned_string = data.html;
alert(the_returned_string);
}
});
$.ajax({
type: "POST",
url: "the_file_to_call.php",
data: {userid: group_id_tb},
success: function(data) {
$('body').append(data);
var text = $('#id-query-result').text();
alert(text);
$('#id-query-result').remove()
}
});
Why not just append the HTML response of your php file then get the text accordingly. You can then remove it after.
There are two changes to be done:
Change the type to "GET" since you directly call the PHP File.
remove the wrapped jQuery method inside the success function and add .html as an attribute
jQuery.ajax({
type: "GET",
url: "the_file_to_call.php",
data: {userid: group_id_tb},
success: function(data) {
var the_returned_string = data.html
alert(the_returned_string)
}
});

Unable to receive ajax request in codeIgniter PHP

I have just started codeigniter and I am stuck at sending employee ID to my controller.
Actually, I have a datatable which shows all the registered employees, and there is a button which get the ID of the employee of row clicked and send it to controller through ajax call but i am unable to receive it in my ajax call.
JS code
$('#viewAllEmployeeTable tbody').on('click', '.viewEmployeeDetail', function() {
var data = viewAllEmployeeTable.row($(this).parents('tr')).data();
console.log(data);
employeeID = data.employeeID;
alert(employeeID);
$.ajax({
url: "/ackamarackus/employee/viewEmployeeProfile",
type: "GET",
data: {
"employeeID": employeeID
},
dataType: "json",
success: function(data) {
console.log(data);
},
error: function(error) {
console.log(error);
}
});
});
Controller
public function viewEmployeeProfile() {
$name = $this->input->post('employeeID');
echo "INPUT";
echo $name;
die();
}
This is what ajax is sending : employeeID:1000
Can anyone tell me what I am doing here? I have already tried google and stack overflow link, but nothing solved my problem. Thanks
You cannot send field data with type: 'GET'
Change this to type:'POST' and this will solve your issue :)
You are sending employeeID as GET method and accessing it as POST in Your controller, change your type in ajax request to POST as follows
$('#viewAllEmployeeTable tbody').on('click', '.viewEmployeeDetail', function() {
var data = viewAllEmployeeTable.row($(this).parents('tr')).data();
console.log(data);
employeeID = data.employeeID;
alert(employeeID);
$.ajax({
url: "/ackamarackus/employee/viewEmployeeProfile",
type: "POST", //Your problem here
data: {
"employeeID": employeeID
},
dataType: "json",
success: function(data) {
console.log(data);
},
error: function(error) {
console.log(error);
}
});
});

AJAX success function not working when the page is load

here is my code in ajax
function loadcountries()
{
var p = document.getElementById("selectCntry");
while(p.firstChild)
{
p.removeChild(p.firstChild);
}
var data = {
action: "loadccc"
};
jQuery.ajax
(
{
type: "POST",
url: "ajax-ows2.php",
dataType: 'json',
async:false,
data:data,
success: function(msg)
{
alert(msg.test);
}
}
);
}
here is my ajax-ows2.php
<?php
$action = $_POST["action"];
include "dbconnect.php";
if($action == "loadccc")
{
$var = $action;
$response_array['test'] = $var;
header('Content-type: application/json');
echo json_encode($response_array);
}
?>
and here is my function call:
<script>
window.onload = loadcountries;
</script>
my ajax way is different. I really have no idea why it is not alerting when the page is load. Im really sure that my ajax-ows2.php is good and im sure that my function call is correct. Can somebody help me with this. This is not a duplicate one. I tried to used asynch:false but still not working.
try this format:
$.ajax({
method: "POST",
contentType: "application/json; charset=utf-8",
data: data,
url: 'ajax-ows2.php',
success: function (data) {
console.log(data);
},
error: function (error){
console.log(error);
}
});
since you are doing POST method, your data parameter must be a stringify, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

How do I send an ajax post request to a specific module in Drupal6?

I want to send an ajax post request to a module named sampleTest in Drupal6.
I have tried some bits of codes but I do not know how to put the module url in the jquery ajax function.
<script type="text/javascript">
$(function(){
$("#one").click(function(){
$.ajax({
type: 'POST',
url: 'http://localhost/drupal/www/admin/build/modules/module/get/contact',
dataType: 'json',
data: "test",
success:function(data) {
alert("123");
},
complete: function(data){
alert("complete");
}
});
});
});
</script>
You can't send an AJAX request to a module as such, rather you implement a path in your module (using hook_menu()), provide a page callback for that path that outputs the AJAX response, and then call that path in your AJAX call. This is a very basic example:
function mymodule_menu() {
$items['ajax-test'] = array(
'access callback' => TRUE,
'page callback' => 'mymodule_ajax_callback',
'type' => MENU_CALLBACK
);
}
function mymodule_ajax_callback() {
$post_data = $_POST;
// Do something with the post data
$output = array('status' => 'OK');
// For Drupal 6
drupal_json($output);
exit();
// Or for Drupal 7, just in case you want to know
drupal_json_output($output);
drupal_exit();
}
Then your JS would look like this:
$(function(){
$("#one").click(function(){
$.ajax({
type: 'POST',
url: '/drupal/ajax-test',
dataType: 'json',
data: "test",
success:function(data) {
alert(data.status);
},
complete: function(data){
alert("complete")
}
});
});
});

Categories