I have <button> with ajax on it, and want to remove it after successful request.
<script type="text/javascript">
$(".approve").click(function(){
var el, image_id = $(this).data('image-id');
$.ajax({
type: "PATCH",
dataType: "json",
data: { "approved": "True"},
url: "/ml/api/image/" + image_id + "/?format=json",
success: function(data){
$(this).remove();
}
});
});
</script>
But this doesn't work…
The context in the success callback is different from the context of the click event meaning this no longer refers to the button DOM element. Just select the button again and it would remove it:
$(".approve").click(function(){
var el = $(this), image_id = $(this).data('image-id');
$.ajax({
type: "PATCH",
dataType: "json",
data: { "approved": "True"},
url: "/ml/api/image/" + image_id + "/?format=json",
success: function(data){
el.remove();
}
});
});
Another way is to pass context property to ajax:
$(".approve").click(function(){
var image_id = $(this).data('image-id');
$.ajax({
context: this,
type: "PATCH",
dataType: "json",
data: { "approved": "True"},
url: "/ml/api/image/" + image_id + "/?format=json",
success: function(data){
$(this).remove();
}
});
});
This is my methode. Easy.
var element = $(this);
$.ajax({
success: function(){
element.remove();
}
});
Related
This code can fetch data from a database then return it to a select option:
$(document).on('click', '.renew', function() {
var user_id3 = $(this).attr("id");
$.ajax({
url: "../controller/fetch_single.php",
method: "POST",
data: {
user_id3: user_id3
},
dataType: "json",
success: function(data) {
$('#bus_type').html(data.type);
}
})
});
The AJAX is successful and returning the JSON but the select option is still returning blank instead of the data coming from AJAX. What am I doing wrong?
Example output of data:
{
"id":"575",
"bus_name":"THIS LOVE",
"type":"RERE",
"address":"SDF"
}
$(document).on('click', '.renew', function() {
var user_id3 = $(this).attr("id");
$.ajax({
url: "../controller/fetch_single.php",
method: "POST",
data: {
user_id3: user_id3
},
dataType: "json",
success: function(data) {
// If the option is in the select
$('#bus_type').find('option[value="'+data.id+'"]').prop('selected', true);
// Or if the option is not there yet
var $option = $('<option></option>').html(data.type).attr('value', data.id).prop('selected', true);
$('#bus_type').append($option); // Adds the new option as last option
$('#bus_type').prepend($option); // Adds the new option as first option
}
})
});
Assuming your HTML is:
<select id="bus_type">
<!-- no content yet -->
</select>
and your response is :
{
"id":"575",
"bus_name":"THIS LOVE",
"type":"RERE",
"address":"SDF"
}
Then your success() method would just print the following:
<select id="bus_type">
RERE
</select>
which is not a valid HTML for a <select>.
Your JS should look like this for it to work:
$(document).on('click', '.renew', function() {
var user_id3 = $(this).attr("id");
$.ajax({
url: "../controller/fetch_single.php",
method: "POST",
data: {
user_id3: user_id3
},
dataType: "json",
success: function(data) {
$('#bus_type').html("<option value='"+ data.type +"'>"+ data.type +"</option>");
}
})
});
Or like this if you want to preserve the existing options:
$(document).on('click', '.renew', function() {
var user_id3 = $(this).attr("id");
$.ajax({
url: "../controller/fetch_single.php",
method: "POST",
data: {
user_id3: user_id3
},
dataType: "json",
success: function(data) {
$('#bus_type').append("<option value='"+ data.type +"'>"+ data.type +"</option>");
}
})
});
The success() method would print the following:
<select id="bus_type">
<option value="RERE">RERE</option>
</select>
If you would provide us some HTML I could edit my answer to your specific needs.
I want to refresh the countdown timer of multiple items on my page. Each timer has the class "refresh-item". It works well with just one item, but if I've multiple items (that means different countdown timers also), it seems to only pick the latest id.
This is my JQuery code:
function timeLeft()
{
var data = $(".refresh-item").attr("data-content");
var dataString = 'case=refresh_item&' + data;
$.ajax({
type: "GET",
url: "ajax.php",
dataType: "html",
data: dataString,
success: function(result)
{
$(".refresh-item").html(result);
}
});
}
window.setInterval(function(){
timeLeft();
}, 1000);
Each item also has the attribute "data-content" where the specific id of an item is saved. How is it possible to select the specific id of a specific item (to show the individual countdown timer then)?
Use each() method in jQuery to iterate
function timeLeft() {
$(".refresh-item").each(function() {
$this = $(this);
var data = $this.attr("data-content");
var dataString = 'case=refresh_item&' + data;
$.ajax({
type: "GET",
url: "ajax.php",
dataType: "html",
data: dataString,
success: function(result) {
$this.html(result);
}
});
});
}
window.setInterval(function() {
timeLeft();
}, 1000);
Use $.each function of jquery:
function timeLeft()
{
$.each($(".refresh-item"), function(){
$this = $(this);
var data = $this.attr("data-content");
var dataString = 'case=refresh_item&' + data;
$.ajax({
type: "GET",
url: "ajax.php",
dataType: "html",
data: dataString,
success: function(result)
{
$this.html(result);
},
complete: function(){}
});
)
}
window.setInterval(function(){
timeLeft();
}, 1000);
My script returns the data (ul list) but JQuery doesnt work with new inserted data.
JQuery
$(".tablecategoryname").on('click', function(){
var $a = $(this).closest('li').attr('id');
var $c = $(this).closest('li');
$.ajax({
type: "POST",
url: "functions.php",
data: {subcategory:$a},
cache: false,
success: function(data)
{
$(data).hide().insertAfter($c).slideDown(400);
}
});
});
Why cant JQuery work with the new items with tablecategoryname class ??
You'll need delegated event handlers with dynamic elements:
$(document).on('click', '.tablecategoryname', function(){
var $c = $(this).closest('li'),
$a = $c.attr('id');
$.ajax({
type: "POST",
url: "functions.php",
data: {subcategory : $a},
cache: false,
success: function(data) {
$(data).hide().insertAfter($c).slideDown(400);
}
});
});
replace document with closest non-dynamic parent!
My code looks like this. The problem is, PHP side does it job and returns right value. But ajax doesn't execute things inside success: function. What am I missing?
AnswerDiv.on("click", ".NotSelectedAnswer", function() {
var NotSelectedAnswerBtn = $(".NotSelectedAnswer"),
SelectedAnswerBtn = $(".SelectedAnswer"),
AnswerDiv = $("div.Answer"),
querystring="fromID="+SelectedAnswerBtn.data("id")+"&toID="+$(this).data("id")+"&op=SelectAsAnswer";
$.ajax({
url: 'processor.php',
type: "POST",
dataType: "json",
data: querystring,
success: function(data) {
if(data.status)
{
SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
$(this).removeClass(" NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
$("div.Answer[data-id=" + SelectedAnswerBtn.data("id") + "]").toggleClass("SelectedDiv");
$("div.Answer[data-id=" + $(this).data("id") + "]").toggleClass("SelectedDiv");
}
}
});
return false;
});
Try to cache $(this) before ajax call
AnswerDiv.on("click", ".NotSelectedAnswer", function() {
var NotSelectedAnswerBtn = $(".NotSelectedAnswer"),
SelectedAnswerBtn = $(".SelectedAnswer"),
AnswerDiv = $("div.Answer"),
thisElem=$(this),
querystring="fromID="+SelectedAnswerBtn.data("id")+"&toID="+$(this).data("id")+"&op=SelectAsAnswer";
$.ajax({
url: 'processor.php',
type: "POST",
dataType: "json",
data: querystring,
success: function(data) {
if(data.status)
{
SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
thisElem.removeClass(" NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
$("div.Answer[data-id=" + SelectedAnswerBtn.data("id") + "]").toggleClass("SelectedDiv");
$("div.Answer[data-id=" +thisElem.data("id")+ "]").toggleClass("SelectedDiv");
return false;
}
}
});
});
Hi I've got a simple question. I've this code below, i use ajax three times in very similiar ways the only things that change are the data passed and the id of the target. Is there a way to group these instructions in a simple one?
Thx
D.
$('#fld_email').focusout(function() {
var request_email = $(this).val();
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=firstname&email="+request_email,
beforeSend: function(){$('#fld_firstname').addClass('ac_loading');},
success: function(msg){$('#fld_firstname').val(msg);$('#fld_firstname').removeClass('ac_loading'); }
});
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=lastname&email="+request_email,
beforeSend: function(){$('#fld_lastname').addClass('ac_loading');},
success: function(msg){$('#fld_lastname').val(msg);$('#fld_lastname').removeClass('ac_loading');}
});
$.ajax({type:"GET",
url: "autocomplete.asp",
data: "fld=phone&email="+request_email,
beforeSend: function(){$('#fld_phone').addClass('ac_loading');},
success: function(msg){$('#fld_phone').val(msg);$('#fld_phone').removeClass('ac_loading');}
});
}
);
try:
$('#fld_email').focusout(function() {
var request_email = $(this).val();
processAjax("fld=firstname&email="+request_email, '#fld_firstname');
processAjax("fld=lastname&email="+request_email, '#fld_lastname');
processAjax("fld=phone&email="+request_email, '#fld_phone');
});
function processAjax(data, id){
$.ajax({type:"GET",
url: "autocomplete.asp",
data: data,
beforeSend: function(){$(id).addClass('ac_loading');},
success: function(msg){$(id).val(msg).removeClass('ac_loading');}
});
}
Use an object and the for control structure:
var fields = {firstname:1, lastname:1, phone:1};
for (field in fields) {
$.ajax({
type:"GET",
url: "autocomplete.asp",
data: "fld=" + field + "&email=" + request_email,
beforeSend: function() {
$('#fld_'+field).addClass('ac_loading');
},
success: function(msg) {
$('#fld'+field).val(msg);
$('#fld'+field).removeClass('ac_loading');
}
});
}