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?
Related
I have an ajax block in javascript, which does a few operations, and then changes a text box in my page.
$.ajax({
type: "POST",
url: "/post_to_page/",
data: JSON.stringify({'titleid': parseInt(count_id)}),
cache: false,
success: function(data){
var content_id = "count_" + count_id;
var votes = $(content_id ).val();
$(upvotes_id).html(votes);
//window.location.reload();
}
});
The content value is reflected only after I refresh the page. I tried setting cache parameter as false and alse the same in ajaxSetup when document is ready. Still the changes arent getting reflected. Please help.
It looks like your return variable 'data' isn't being referenced in the success function. As pointed out elsewhere, also missing an id or class reference. Try this (or any other relevant variables):
var content_id = "#count_" + data.count_id;
add hash to get value like
var votes = $('#'+content_id ).val();
i think you forgot add "#" before the id
$.ajax({
type: "POST",
url: "/post_to_page/",
data: JSON.stringify({'titleid': parseInt(count_id)}),
cache: false,
success: function(data){
var content_id = "count_" + count_id;
var votes = $('#'+content_id ).val(); // add hash for id or . for class
$(upvotes_id).html(votes);
//window.location.reload();
}
});
I am assuming upvotes_id is either id or class. Use $("#upvotes_id").html(votes) or $(".upvotes_id").html(votes) instead.same in the case of "content_id" .
I can see few issues with your code like- no '#' for referring an element.
corrections:
$.ajax({
type: "POST",
url: "/post_to_page/",
data: JSON.stringify({'titleid': parseInt(count_id)}),
cache: false,
success: function(data){
**var content_id = "#count_" + count_id;**
var votes = $(content_id ).val();
$(upvotes_id).html(votes);
//window.location.reload();
}
});
Also you have not mentioned how you are getting upvotes_id. Use # there too. You are not using the response returned in success method. Is it intended?
I have a doubt, I use Jquery to load dynamic wall posts of people who follow me. Now since Jquery dosent work on dynamic content in the tradition click method I use on method for the response.If i dont trigger a Jquery method but do other things it works. I want to know how to launch Ajax method.
My Code:
$('body').on('click','.likebutton', $.ajax({
method:"POST",
url:"../assets/backend/likepost/index.php",
data:"postid="+$('.likebutton').attr('id'),
success:function(response) {
$(this).find(".liketext").html("<p class='liketext'><span class='glyphicon glyphicon-ok'></span> You like this</p>");
}
Any improvment to the code would be greatly appreciated. Thnx
Use following format:
$('body').on('click','.likebutton', function(){
var that = this;
/*
place code of other processing
*/
$.ajax({
method:"POST",
url:"../assets/backend/likepost/index.php",
data:"postid="+$(that).attr('id'),
success:function(response) {
$(that).find(".liketext").html("<p class='liketext'><span class='glyphicon glyphicon-ok'></span> You like this</p>");
}
});
}
You need to wrap ajax function call in an anonymous functions.
Use
$('body').on('click', '.likebutton', function() {
//Store the reference in a variable
var _this = $(this);
$.ajax({
method: "POST",
url: "../assets/backend/likepost/index.php",
data: "postid=" + this.id, //fetch id using this
success: function(response) {
//Use the refrence to set html
_this.find(".liketext").html("<p class='liketext'><span class='glyphicon glyphicon-ok'></span> You like this</p>");
}
});
});
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}
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.
i.e.
$("#savenew").live('click', function(e) {
var user=<?php echo $user?>;
$.ajax({
type: "POST",
url: "actions/sub.php",
data:{user: user} ,
success: function(){
$('#savenew').html('<span>Unsubscribe</span>');
$(this).attr('id', 'clean'); // this my problem my problem
}
});
});
the id after the ajax request, is not changing from savenew to clean, but the html is perfectly fine, so i know the ajax request is working. what do u thiunk the problem is?
You just need to save the context (via the context option for $.ajax()) so this still refers to #savenew, like this:
$("#savenew").live('click', function(e) {
var user=<?php echo $user?>;
$.ajax({
context: this, //add this!
type: "POST",
url: "actions/sub.php",
data:{user: user} ,
success: function(){
$(this).attr('id', 'clean').html('<span>Unsubscribe</span>');
}
});
});
Also note that this allows you to chain and clean things up a bit.
$(this) inside success: function(){ does not refer to $('#savenew').
As you do in the line above, you need to reference it by id:
$('#savenew').attr('id', 'clean');