Add CSS element after kendogrid refresh - javascript

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;
}
}
});

Related

how to wait load() complete and get variable in selector

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.

How to access a selector on AJAX Complete?

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.

Rebind function when change DOM after ajax

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("")

Span addClass not working ajax

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");
}
});
});

Ajax post in function in external js

I've made a function with an ajax post. This function is in an external js file on my server. (functions.js).
From another page I call the function like this:
$('table.table_sort td').click(function(e)
{
var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";
sortTable(url, e);
});
The function in the functions.js looks like this:
function sortTable(url, e)
{
if( !$(e.target).is(".last, .last input")){
$('input[name="sort"]').parent('td').removeClass('sort_active');
$('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');
if($(this).children('input[type="radio"]:first').is(':checked'))
{
$(this).children('input[type="radio"]:last').prop('checked', true);
$(this).children('div').removeClass().addClass('sort_asc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
else
{
$(this).children('input[type="radio"]:first').prop('checked', true);
$(this).children('div').removeClass().addClass('sort_desc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
$.ajax({
type: "POST",
url: url,
async: false,
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
}
});
}
}
Unfortunately nothing happened. When I do this it work:
$('table.table_sort td').click(function(e)
{
var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";
if( !$(e.target).is(".last, .last input")){
$('input[name="sort"]').parent('td').removeClass('sort_active');
$('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');
if($(this).children('input[type="radio"]:first').is(':checked'))
{
$(this).children('input[type="radio"]:last').prop('checked', true);
$(this).children('div').removeClass().addClass('sort_asc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
else
{
$(this).children('input[type="radio"]:first').prop('checked', true);
$(this).children('div').removeClass().addClass('sort_desc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
$.ajax({
type: "POST",
url: url,
async: false,
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
}
});
}
});
Any ideas?
Your problem is the use of this inside the function. You need to pass that into the function as this inside the function does not return the clicked element...
$('table.table_sort td').click(function(e) {
var url = "https://<?=$_conf['siteurl']?>/files/process.ajax.php";
sortTable(this, url, e);
});
function sortTable(el, url, e)
{
var $el = $(el);
if( !$(e.target).is(".last, .last input")){
$('input[name="sort"]').parent('td').removeClass('sort_active');
$('input[name="sort"]').parents('td').children('div').removeClass().addClass('sort_none');
if($el.children('input[type="radio"]:first').is(':checked'))
{
$el.children('input[type="radio"]:last').prop('checked', true);
$el.children('div').removeClass().addClass('sort_asc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
else
{
$el.children('input[type="radio"]:first').prop('checked', true);
$el.children('div').removeClass().addClass('sort_desc');
$('input[name="sort"]:checked').parent('td').addClass('sort_active');
}
$.ajax({
type: "POST",
url: url,
async: false,
data: $('#myform').serialize(),
complete: function(data)
{
$('#results').html(data.responseText);
}
});
}
}
You should now be able to put the function back in an external file, as you originally wanted :)

Categories