I have a span like this <span class="join-event to-join">join event</span>.
I use this function to do something with the click via AJAX.
But in the success function I can't seem to add a class to that clicked span.
function accept() {
$(".to-join").click(function() {
var id = $(this).attr("data-event");
$.ajax({
type: "post",
url: "../assets/js/ajax/toggle-events.php",
data: { 'id': id },
success: function() {
alert("good job");
$(this).addClass("joined");
},
error: function () {
alert("fail");
}
});
});
}
Use context option of ajax method:
context: this,
context Type: PlainObject This object will be the context of all Ajax-related callbacks. By default, the context is an object that
represents the Ajax settings used in the call ($.ajaxSettings merged
with the settings passed to $.ajax).
You need to define $(this) as variable outside the ajax call, this inside ajax will refers to jqXHR object
function accept() {
$(".to-join").click(function() {
var id = $(this).attr("data-event"),
$this=$(this);
$.ajax({
type: "post",
url: "../assets/js/ajax/toggle-events.php",
data: { 'id': id },
success: function() {
alert("good job");
$this.addClass("joined");
},
error: function () {
alert("fail");
}
});
});
}
$(".to-join").click(function() {
var span = $(this);
var id = $(this).attr("data-event");
$.ajax({
type: "post",
url: "../assets/js/ajax/toggle-events.php",
data: { 'id': id },
success: function() {
alert("good job");
span.addClass("joined");
},
error: function () {
alert("fail");
}
});
});
Related
my problem to get text in td after .load(url) to variable
load code
$("#tr1").load("include/test.php?page=1");
and code for get variable in .load(include/test.php?page=1)
i can not getid
run before complete load
$(window).bind('load', function () {
var getid = $("td:first").text();
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: {id: getid},//only input
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
//setInterval(updatenewrow(getid), 4000);
});
It's not clear what you are trying to accomplish the way you have posed the question.
Maybe this is what you're looking for:
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: { id: getid },
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
$("#tr1").load("include/test.php?page=1", function(response, status, xhr){
if(xhr.status == 200){
var getid = $("td:first", this).text();
updatenewrow(getid);
}
});
Hope that helps.
I make an Ajax Request that adds content to the page with HTML from the back-end, and then I make another Ajax Request that modifies that dynamically added HTML.
$("#list-customers-button").click(function () {
var selectedAcquirer = $("#acquirer-select").val();
if (selectedAcquirer === "adyen") {
if (listed) {
listed = false;
$("#customer-list-area").hide().html('').fadeIn(fadeTime);
} else {
listed = true;
$.ajax({
type: "GET",
url: "/adyen_list_customers",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$("#list-progress").show();
},
success: function (data) {
console.log(JSON.stringify(data));
$("#customer-list-area").hide().html(data["response_html"]).fadeIn(fadeTime).promise().done(function () {
$(".collapsible").collapsible();
resetDatepicker();
});
},
complete: function () {
$(document).on("change", "#file-download-datepicker", function () {
$("#file-download-progress").hide();
$("#file-download-date").val(selectedDate);
fileDownloadData = $("#file-download-form").serialize();
displayMessage(fileDownloadData);
$.ajax({
type: "POST",
url: "/adyen_update_file_list_by_date",
data: fileDownloadData,
beforeSend: function () {
$("#file-download-progress").show();
},
success: function (response) {
},
complete: function (response) {
$("#file-download-progress").hide();
console.log(response.responseText);
// Doesn't work. Selector should exist, but it doesn't.
$("#merchant-file-list").html(response.responseText);
},
error: function (response) {
displayMessage(response["responseText"]);
}
});
});
},
error: function (data) {
displayMessage(data);
},
});
}
} else if (selectedAcquirer === "stone") {
displayMessage("Adquirente indisponível no momento.");
} else {
displayMessage("É necessário selecionar uma adquirente.");
}
});
I get a perfect HTML response from the server, but selectors that were previously added with HTML also from the server (#file-download-progress, #merchant-file-list) are completely ignored. .html() doesn't work, nor anything, and I don't know how to use .on() to work around this because I just need to access that content. Since the ajax request is being made after the previous one is complete, they should be able to be accessed. They just don't exist nowhere in time.
I have an ajax call that sends to MyAction in MyController.. it returns me with result of success and an Id for an element to which I want to attach some CSS.
the Id is returned, and the css is added but the refreshGridData happens afterwards removing the css I just added to the element.
Is there a way to wait for refreshGridData to finish and then add the css?
I did try the done for ajax.. it did not work.
$.ajax({
url: "#Url.Action("MyAction", "MyController")",
type: "POST",
data: postData,
success: function (result) {
if (result.Success) {
alert("success");
refreshGridData();
}
},
error: function (result) {
alert("Error!");
}
AddMyCSSToThis(result.Id);
// done: AddMyCSSToThis(result.Id);
});
function refreshGridData() {
var ajaxContainer = $(".grid-wrap");
kendo.ui.progress(ajaxContainer, true);
refreshGrid();
kendo.ui.progress(ajaxContainer, false);
}
Why don't you pass in the Id you want to add the change into your refreshGridData() function like:
$.ajax({
url: "#Url.Action("MyAction", "MyController")",
type: "POST",
data: postData,
success: function (result) {
if (result.Success) {
alert("success");
var savedId = result.Id;
refreshGridData(savedId);
}
},
error: function (result) {
alert("Error!");
}
AddMyCSSToThis(result.Id);
// done: AddMyCSSToThis(result.Id);
});
function refreshGridData(savedId) {
var ajaxContainer = $(".grid-wrap");
kendo.ui.progress(ajaxContainer, true);
refreshGrid(savedId); // I'm assuming this function is what adds the css
kendo.ui.progress(ajaxContainer, false);
}
You could create a global variable and use it in the grid dataBound event to add the CSS.
_addCssToResultId = null;
$.ajax({
url: "#Url.Action("MyAction", "MyController")",
type: "POST",
data: postData,
success: function (result) {
if (result.Success) {
alert("success");
_addCssToResultId = result.Id;
refreshGridData();
}
},
error: function (result) {
alert("Error!");
}
});
// add a dataBound handler to your grid
$("#grid").kendoGrid({
dataBound: function(e) {
if(_addCssToResultId) {
AddMyCSSToThis(_addCssToResultId);
_addCssToResultId = null;
}
}
});
I'm trying to get the height of an element before and after an ajax call to change the content of this element (for learning reasons).
Example:
$(document).ready()
calcHeigth('#listar-cursos');
});
funcion calcHeigth(idElement){
console.log($(idElement).outerHeight(true));
}
<div id="listar-cursos">all the content is here</div>
When the document is ready, calcHeigth function returns 200px.
There is a form on that page that is sent by ajax and when the request ends I just empty the contents of the element, and then call calcHeigth again (in ajaxComplete event).
$("#formSeacrh").submit(function () {
if ($(this).valid()) {
var url = $(this).attr("action");
var data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function (data) {
$("#listar-cursos").html("");
},
complete: function () {
Completo();
},
beforeSend: function () {
Carregando();
},
error: function () {
Falha();
},
ajaxComplete: function () {
calcHeigth('#listar-cursos');
}
})
return false;
}
return false;
});
The result from calcHeigth is always 200px, like when the document is ready, even with the empty element. calcHeigth not realized that the element was changed. The result that I expected was 40px. How to fix and get the current height?
$("#formSeacrh").submit(function () {
if ($(this).valid()) {
var url = $(this).attr("action");
var data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function (data) {
$("#listar-cursos").html("");
Completo();
calcHeigth('#listar-cursos');
},
beforeSend: function () {
Carregando();
},
error: function () {
Falha();
}
})
return false;
}
return false;
});
you only need 1 ready function, not 3. i hope this works now how you wish.
if you do your calc after your clear the html from the node, the height should be 0.
by the way. $('listar-cursos').empty() is better than .html("")
I created two methods on a Javascript class:
this.saveData = function(){
var url_send = 'm1=1&m2=2'
$.ajax({
url: '/save.php',
dataType : "text",
data:url_send,
type:'POST',
success: function(data) {
// this is does not correct
this.showAcceptBox('error_msg_0');
}
});
};
this.showAcceptBox = function(msg_id){
$('#error_box').removeClass('alert-negative');
$('#error_box').html($('#'+msg_id).html());
$('#error_box').show();
setTimeout(function(){
$('#error_box').fadeOut('slow',function(){
$('#error_box').addClass('alert-negative');
});
},this.message_box_timeout);
};
How do I correct the call method from my class into jQuery .ajax()?
Try to capture this in a closure:
this.saveData = function() {
var url_send = { m1: 1, m2: 2 };
var _self = this;
$.ajax({
url: '/save.php',
dataType : 'text',
data: url_send,
type: 'POST',
success: function(data) {
_self.showAcceptBox('error_msg_0');
}
});
};
or pass it as parameter using the context switch:
this.saveData = function() {
var url_send = { m1: 1, m2: 2 };
$.ajax({
url: '/save.php',
dataType : 'text',
data: url_send,
context: this,
type: 'POST',
success: function(data) {
this.showAcceptBox('error_msg_0');
}
});
};
Quote from the documentation:
context
This object will be made the context of all Ajax-related callbacks. By
default, the context is an object that represents the ajax settings
used in the call ($.ajaxSettings merged with the settings passed to
$.ajax). For example specifying a DOM element as the context will make
that the context for the complete callback of a request, like so:
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
i don't see how you give your msg_id :
this.showAcceptBox = function(data){
$('#error_box').removeClass('alert-negative');
$('#error_box').html(data);
$('#error_box').show();
setTimeout(function(){
$('#error_box').fadeOut('slow',function(){
$('#error_box').addClass('alert-negative');
});
},this.message_box_timeout);
};
Or you can retrieve whatever you want in your ajax answer like $('#msg_id',data). Everything depends on what your call is returning.