I already implemented create, get (retrieve) using django-rest-framework and AJAX.
But I have some problems in implementing delete (Delete API is ready).
Here is my idea :
HTML :
<div class="comment-meta">
<a id="comment-delete" href="/api/posts/notice/2/comments/4/delete/">
삭제
</a>
</div>
JQuery :
var commentMetaElement = $(".comment-meta");
var commentDeleteElement = $(commentMetaElement).find("#comment-delete");
var commentDeleteURL = $(commentDeleteElement).attr('href');
$(commentDeleteElement).click(function(){
alert($(this).attr('href'));
$.ajax({
url: commentDeleteURL,
type: "DELETE",
success: function(data){
alert("done!");
},
error: function(data){
console.log(textStatus);
}
});
});
And when I click the a tag, alert doesn't occur.
Also, when I insert the code alert(commentDeleteURL); after var commentDeleteURL = $(commentDeleteElement).attr('href');, it show: undefined.
I wonder whether I'm implementing it in right way.
First of all, I wonder it is right to create a tag for deleting...
Thanks :)
change this
$(commentDeleteElement).click(function(){
to
$("#commmet-delete").click(function(){
$("#comment-delete").on('click', function(){
var commentDeleteURL = $(this).attr("href");
$.ajax({
url: commentDeleteURL,
type: "DELETE",
success: function(data){
alert("done!");
},
error: function(data){
console.log(textStatus);
}
});
});
Related
I'm currently working on a project using Laravel platform.
I'm trying to delete data from a model asynchronously using ajax. And when all is done my data should be removed from the table. My code runs perfectly, data are being removed from my database , yet "tr" elements arent really faded or removed. Here is my code :
ajax sucess not really working.
$(document).on('click', '.btn-remove-interview' , function() {
var id = $(this).attr('data-interview-id');
$.ajax({
url: './manage/interviews/destroy/'+id ,
type: 'post',
dataType: 'json',
data: id,
success: function (data) {
$(this).parents("tr").remove();
}
});
});
Use
$(this).closest('tr').remove();
Instead of
$(this).parents("tr").remove();
The problem is that the success function callback within your ajax request no long refers to the button when you use this. You need to get an explicit variable to the button if you want to use it.
$(document).on('click', '.btn-remove-interview' , function() {
// Get this button as a variable so we can use it later
var el = $(this);
var id = $(this).attr('data-interview-id');
$.ajax({
url: './manage/interviews/destroy/'+id ,
type: 'post',
dataType: 'json',
data: id,
success: function (data) {
$(el).parents("tr").remove();
}
});
});
Solution was by removing dataType json . My function doesnt return any data .
I need to pass data from HTML page to PHP page But without data callback ....
i'm used two method but One of them did not succeed
1)
$.ajax({
type: "POST",
url: 'phpexample.php',
data: {voteid: x },
success: function(data)
{
alert("success! X:" + data);
}
});
2)
$.post("getClassStudent.php",
{
},
function(data){
$("#div_id.php").html(data);
}
);
as i can understand, you just want to send info to a php script and don't need the response, is that right?
try this
$.post("phpexample.php", {voteid:x});
or simply remove the "succes" function from the equation if you feel more confortable using $.ajax instead of $.post
$.ajax({
type: "POST",
url: 'phpexample.php',
data: {voteid: x }
});
your fisrt example is correct, the second is not well formed.
more info:
http://api.jquery.com/jquery.post/
EDIT: to help you some more :)
<button type="button" id="element-id">click</button>
<button type="button" class="class-name">Click</button>
$(document).ready(function(){
//if you are marking ans element by class use '.class-name'
$(".class-name").click(function(){
$.post("getClassStudent.php");
});
//if marking by id element use '#id-name'
$("#element-id").click(function(){
$.post("getClassStudent.php");
});
});
be carefful with the markings, for debuggin try to use "console.log()" or "alert()" so you can see where is the problem and where the code crushes.
var formData = {
'voteid' : 'x',
};
$.ajax({
type : 'POST',
url : 'phpexample.php',
data : formData, // our data object
dataType : 'json',
encode : true
}).done(function(data) {
console.log(data);
});
Today I have a problem sending id with ajax and jquery ,I have a foreach in the view of laravel like this ,
<div class="ident" id="auctionIdentifier-{{$i}}" auction="{{$auction->id}}"></div>
this in the elements recieve correctly the id of auctions but when I try to doing a click I only send the first id.
I don't know when I doing a click in the next bid , I don't send the id corresponding.
id}}">
$(".inscription").click(function(){
console.log($(".ident").attr('auction'));
$.ajax({
url:'../bid/inscription',
dataType:'json',
type:'get',
cache:true,
success: function (response) {
console.log("ok");
},
});
});
Maybe this helps:
$(".ident").click(function(){
var id = $(this).attr('auction');
$.ajax({
url:'../bid/inscription',
dataType:'json',
type:'get',
cache:true,
data: {
id: id
},
success: function (response) {
console.log("ok");
},
});
});
Basically you need to get the currently clicked element auction attribute. Also you might want to add data- in front of it like so: data-auction="VALUE". This way you can get it with $(el).data('auction').
Hei.. I have a function to load more news. Since jquery-1.9.1.min.js this function was working alright, but now I have to replace it with .on() method and I still can't get it work.
Here is the code:
// Load more news feed
$(function(){
var page = 1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true",
dataType:'json',
success: function(data){
$("#the_news_feed").html(data.news_feed);
if(page <= data.total_pages){
$("#the_news_feed").after('<button id="load_more_feed" class="btn btn-primary btn-large" style="width: 100%;margin-top:10px">Load More</button>');
}
}
});
$("#load_more_feed").live("click", function(){
var next = page+=1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true&page_num="+next,
dataType: "json",
success: function(data){
$("#the_news_feed").append(data.news_feed);
if(next == data.total_pages){
$("#load_more_feed").remove();
} else {
$("#load_more_feed").html("Load More");
}
},
beforeSend: function(){
$("#load_more_feed").html("Loading...");
}
});
});
});
I tryed to replace:
$("#load_more_feed").live("click", function()
with
$("#the_news_feed").on("click", "load_more_feed", function()
but I still can't get it work. What am I doing wrong? Thank you!
I display this function with id="news_feed" so here was the problem
<div class="tab-pane fade" id="news_feed">
<div id="the_news_feed"></div>
</div>
Final solution is $("#news_feed").on("click", "load_more_feed", function()
Thank you guys!
Actually, you're missing the # in the id selector.
$("#the_news_feed").on("click", "load_more_feed", function()
must be
$("#the_news_feed").on("click", "#load_more_feed", function()
assuming #the_news_feed is the parent of #load_more_feed.
EDIT :
From your code, you're appending this #loadmore button after #the_news_feed, so this obviously will not work. Try changing it to this :
$(document).on("click", "#load_more_feed", function()
This will bind the click to the document, which will always exist. Alternatively, you could bind it to #load_more_feed closest static parent, like an element which exists when you load your page and not dynamically created.
I want to make a Follow a button like Twitter Follow in JQuery, Json And Ajax
I am using this way for Follow :
$(function()
{
$("#follow").click(function(){
var content_id = $('#content_id').val();
var content_type = $('#content_type').val();
$.ajax({
type: "POST",
dataType: 'json',
url: "/memberactions/follow/",
async:false,
data:{content_id:content_id, content_type:content_type},
success: function(){
//$("#loading").ajaxComplete(function(){}).slideUp();
$('#follow').fadeOut(200).hide();
$('#unfollow').fadeIn(200).show();
}
});
return false;
});
});
And this Way to unfollow
$(function()
{
$("#unfollow").click(function(){
var I = $('#content_id').val();
var content_type = $('#content_type').val();
$.ajax({
type: "POST",
dataType: 'json',
url: "/memberactions/follow/",
async:false,
data:{content_id:content_id, content_type:content_type},
success: function(){
//$("#loading").ajaxComplete(function(){}).slideUp();
$('#unfollow').fadeOut(200).hide();
$('#follow').fadeIn(200).show();
}
});
return false;
});
});
Is this the best way to hide the follow button ?
is there better way to do it ?
Or to put an attribute following in the
like
<a id="follow-an" href="#" following = "yes" >
i dont want have the follow button hidden in the page, to avoid having the both button follow and unfollow in the same page, when he is following , only the unfollow is shown , and when he is not follow , the follow button is shown
I hope this is what you want:
HTML:
<button id="button" data-following="false">Follow</button>
JS:
$("#button").click(function(){
if($(this).attr('data-following') == 'false'){
$(this).attr('data-following', 'true');
$(this).text('Unfollow');
}else if($(this).attr('data-following') == 'true'){
$(this).attr('data-following', 'false');
$(this).text('Follow');
}
});