Unable to send data using AJAX post - javascript

Can someone please help me with this code?
It changes the class, but no data is sent to the server. I Do not get any errors too.I think i might have messed up the var (declaration ) or the html
Here is the html
<a class="reg" id="<?php echo $pID?>" href="#">Registrate</a>
Here is the script
<script>
$(document).ready(function(){
$('a').click(
function(){
if ($(this).hasClass('reg')){
$(this).removeClass('reg').addClass('done').text('done');
var datasend = $(this).html();
$.ajax({type:"POST", url:"data/update.php", data: 'id='+datasend, success:function(result){
}});
}
});
});
</script>

Replace this :
var datasend = $(this).html();
with
var datasend = this.id;
Also send your data as an object, which will remove the need for the datasend variable.
$.ajax({
url : '/url',
type : "POST",
data : {
id : this.id
}
});

replace
data: 'id='+datasend
with
data:{ id : datasend }

Replace:
$.ajax({type:"POST", url:"data/update.php", data: 'id='+datasend
With:
$.ajax({type:"POST", url:"data/update.php", data: {'id' : datasend}

Related

Not able to receive ajax post data

I'm trying to print a calendar using php but struggle figuring out how to change the month displayed with ajax
I have two buttons in tag whose value is "+1" and "-1" respectively with a class="selectMonth"
<button class="selectMonth" name="selectMonth" value="-1">previous</button>
<button class="selectMonth" name="selectMonth" value="+1">next</button>
This is my ajax code:
$(".selectMonth").on("click", function(){
$.ajax({
url : "index.php",
type : "POST",
data : {selectMonth : this.value},
success : function(){
alert("success!");
}
});
});
and in my index.php I have
<?php
if(!isset($_POST["selectMonth"]))
$_SESSION["date"] = time();
else
{
$selectMonth = $_POST["selectMonth"];
$_SESSION["date"] = strtotime($selectMonth . 'month');
}
var_dump($_POST["selectMonth"]);
$date = $_SESSION["date"];
print_calendar($date);
?>
After I click one of the buttons, I can get the alert message but not the $_POST variable and what is var_dump is always NULL
Could anybody find out the mistake for me?
I'm still learning ajax.
Thank you very much!
try below line of code :
data : {'selectMonth' : $(this).val()},
OR
data : {'selectMonth' : $(this).attr('value')},
Try
$(".selectMonth").on("click", function(){
var inputVal = $(this).attr('value');
$.ajax({
url : "index.php",
type : "POST",
data : {selectMonth : inputVal},
success : function(){
alert("success!");
}
});
});
Instead of
data : {selectMonth : this.value}
try
data : {selectMonth : this.val()}

How to get id of element which called function

hi i am newbie in jquery...
i have few anchor link in my project...
Remove1
Remove2
Remove3
Remove4
function dele()
{
fid= //here i want id of that element which called it
$.ajax({
url : 'ajax.php',
data : {delet:'delet',fid:fid},
type : 'POST',
success : function(data)
{
$("#showform").html(data);
alert(data);
}
});
}
for example
if i click on Remove1 then i want it's id say 1,
if i click on Remove2 then i want it's id say 2 and so on...
i tried to do this by $(".delete").click() but i can't use it because it's causing problem for my project...
here id i am generating through database...
can you suggest how can i get id???
Thanks in advance..
Try this
Remove1
Script
function dele(id)
{
fid= id //here your id
$.ajax({
url : 'ajax.php',
data : {delet:'delet',fid:fid},
type : 'POST',
success : function(data)
{
$("#showform").html(data);
alert(data);
}
});
}
DEMO
Seen as you're using jQuery for your logic, why not use it to bind events and separate JS from the HTML entirely? Try this:
Remove1
Remove2
Remove3
Remove4
$('.delete').click(function() {
fid = this.id; // this = the element which was clicked on
$.ajax({
url : 'ajax.php',
data : { delet: 'delet', fid: fid },
type : 'POST',
success : function(data) {
$("#showform").html(data);
alert(data);
}
});
});
i can't use $(".delete").click()... bcz it's affecting my functionality when i get back response from php file.. i was using this same but after i seen that my functionality is not working if i am using this way
If you are appending the .delete elements after the DOM has loaded, you need to amend the above to use a delegated selector:
$(document).on('click', '.delete', function() {
// rest of the code...
});
Try like
function dele()
{
var fid= $(this).attr('id');
$.ajax({
url : 'ajax.php',
data : {delet:'delet',fid:fid},
type : 'POST',
success : function(data)
{
$("#showform").html(data);
alert(data);
}
});
}
Or even you can send the id directly form the caller function like
Remove4
Try this
Remove1
Remove2
Remove3
Remove4
function dele(element)
{
fid= element.id;
$.ajax({
url : 'ajax.php',
data : {delet:'delet',fid:fid},
type : 'POST',
success : function(data)
{
$("#showform").html(data);
alert(data);
}
});
}
instead of only id if u pass the element u can get some other properties of the element also.

What is the proper or best way to get data from ajax?

I have this javascript code with ajax.
$('#btnCart').click(function() {
var pName = document.getElementById('prodName').value;
$.ajax({
url: 'index.php',
data: 'prdName='+pName,
success: function(data) {
$('#prod').html(data);
}
});
});
I want to get the value of pName to be returned on my php. Here's my code on my index.php side:
<?php
$prodName = $_GET['prdName'];
echo $prodName;
?>
But it returns Unidentified index: prdName.
How can I get the value from ajax to my php? Please help...
if(isset($_GET['prdName'])){
$prodName = $_GET['prdName'];
echo $prodName;
}
You should send the data as:
data: {prdName: pName},
add this to your PHP code:
if(!empty($_GET['prdName'])){
$prodName = $_GET['prdName'];
echo cartTable($prodName);
}
also some corrections in js:
$('#btnCart').click(function() {
var pName = $('#prodName').val();
$.ajax({
url: 'index.php',
data: {prdName:pName},
success: function(data) {
$('#prod').html(data);
}
});
});
In index.php Get the prdName value from $_POST[] global array.
to send data to index.php file add type type:'POST' in ajax code
$.ajax({
type:'POST',
url: 'index.php',
data: {'prdName': pName},
success: function(data) {
$('#prod').html(data);
}
});
or you can use $.post() method in jQuery
$.post(
'index.php',
{'prdName='+pName},
function(data) {
$('#prod').html(data);
}
});
in index.php
if(isset($_POST['prdName']){
$prodName = $_POST['prdName'];
echo $prodName;
}

AJAX request for many links

I'm new to jQuery AJAX. I want to build bookmarking system something like Twitter do (favorites). I have a lot of links. So it's not useful to write AJAX request for each link. That's why I want use just one request script for all links.
Let's say I have the links something link this:
<i class="icon-star-empty"></i>
<i class="icon-star"></i>
<i class="icon-star-empty"></i>
So I want to write AJAX request that do something like this when user clicks to one of those URLs.
if (class="icon-star-empty"){
ajaxURL = "/insertBoomark"
} else{
//it means class=icon-start
ajaxURL = "/deleteBookmark"
}
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID}, // I don't know how to get linkID too :(
success: if class was icon-star empty then change it to icon-star-empty else change it to icon-star
});
I know that is not correct syntax.
How can I solve this problem? Please help :(
Thanks in advance.
$("i").on("click", function() {
if ( $(this).hasClass("icon-star-empty") ){
ajaxURL = "/insertBoomark"
} else{
//it means class=icon-start
ajaxURL = "/deleteBookmark"
}
var linkID = $(this).parent().prop("id");
var obj = $(this);
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID},
success: function() {
obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star");
}
});
})
You can also use the href attribute and just prevent the default action from the jquery event.
html
javascript
$(function(){
$(document).on('click','a',function(e){
e.preventDefault(); //prevent default click action
var $this = $(this); // keeps "this" accessable
var ajaxURL = $this.attr('href'); // get the url from the "a" tag
$.ajax({
url: ajaxURL,
type: "POST",
data: {id : linkID},
success: function() {
if($this.hasClass("icon-star"))
$this.removeClass("icon-star").addClass("icon-star-empty");
else
$this.removeClass("icon-star-empty").addClass("icon-star");
}
});
});
});
$('a').click(function(){
var _ajaxURL,
_self = $(this);
if($(this).hasClass('icon-star-empty')){
_ajaxUrl = "/insertBookmark";
}else{
_ajaxUrl = "/deleteBookmark";
}
$.ajax({
url: _ajaxUrl,
type: 'POST',
data: {id : $(this).prop('id')},
success: {
//I have no idea what you want to do right here.
}
});
});
Okay, first, class is a reserved name in javascript.
Secondly, if you're doing it with a jQuery.click function, then you can just do $(this).attr('id') to get the id.
Also, for the success part, you seem to be confused about javascript's function syntax. What exactly are you trying to do?

Data variable in jquery ajax function

I'm trying to use the code below, but it's not working:
UPDATED WORKING:
$(document).ready(function() {
$('.infor').click(function () {
var datasend = $(this).html();
$.ajax({
type: 'POST',
url: 'http://domain.com/page.php',
data: 'im_id='+datasend',
success: function(data){
$('#test_holder').html(data);
}
});
});
});
As you can see I used $datasend as the var to send but it doesn't return the value of it, only its name.
I would change
$datasend = $(this).html;
to
var datasend = $(this).html();
Next I would change
data: 'im_id=$datasend',
to
data: 'im_id='+datasend,

Categories