datatable plugin - show and hide more information about a row issue :
i want to get that more information by ajax in fnFormatDetails function.but i don't know how do it.i try to put $.ajax in fnFormatDetails function but it seems it have delay to pass the outout to fnOpen function to render new added row ,so the new row is created with empty(undefined) value not the real information.
how can i do that?
thank you.
The "A" in AJAX stands for "asynchronous". When you make an $.ajax call, the function returns before the server has responded, hence "asynchronous". The $.ajax() function has a success callback that receives the server's response, that callback has to do all the work of processing the server's response and updating your page:
$.ajax({
url: '/where/ever',
data: data_for_the_url,
success: function(data, textStatus, jqXHR) {
/*
* This is where you use `data` to update the page.
* $.ajax will call this function when the server
* has successfully responded.
*/
}
});
/*
* When you get here, the server still hasn't responded so you can't
* update your page yet.
*/
So, put all your page updating logic inside the success callback function.
Related
I am trying to implement a polling method in my client that uses AJAX. I am building an ASP.NET framework Web application, wit c# on the backend and I use JavaScript with Angular on the front end, but I am unsure of....
1.) If the code I have will actually do real time updates and update the displayed content on my web page like intended.
2.) If the way I am incorporating Angular into my AJAX request will work.
and 3.) If I need to specify 'get' in the body of the ajax request, like type: 'get';
I have a variable attached to $scope called instruments that I would like to update with the data from the url, and update my webpage if there are any changed to the data. Obviously the url will contain the actual URL where I wish to get data from. Here is my code thus far in my module...
var updates = function update() {
$.ajax({
url: '...',
success: function (data) {
$scope.instruments = data;
},
complete: function () {
setTimeout(update, 5000);
}
});
};
its easy with v_comet packge
import { V_ } from 'v_comet';
/**
title is the variable that need to change.
*/
V_('this.state.title', object); /** in react */
V_('this.title', object); /** in angular */
more details:
https://www.npmjs.com/package/v_comet
After using table.destroy() method my table rows are still displayed, only the search box and other borders of datatable are not displayed.
I want to delete all the rows in the datatable, basically i want to delete the whole datatable so that i can reinitialize it.
Thank you
When you use the destroy() method you are effectively returning the table back to its original state. The HTML for the table is still present on the page hence why you can still see the table rows, without the added DataTables functionality.
If you want to remove the data rows from your DataTable, you may want to look at the clear() method, for example:
table.clear();
I have set up a jsfiddle which demonstrates these options.
If you can provide your code I should be able to give you a more accurate answer.
In case someone else finds this thread, I had the same issue when trying to replace a datatable with an ajax call. Calling destroy and then reinitializing the datatable after the ajax response worked for me with no errors. documentation
$('#myTrigger').click(function(e){
e.preventDefault();
table.destroy();
$.ajax({
type: 'post',
url: 'processor.php',
data: $('#myform').serialize(),
success: function (response) {
var table = $('#myTable').DataTable({
"pageLength": 25
});
}
});
});
I'm adding some custom JS to an application built in Wordpress to set appointments so that if an appointment request is made, both the client and worker are sent request emails. The appointment is made by pressing a button, and the request is made by binding the button to the .click() event.
To send the emails, I put the ajax function inside the success function of the first ajax function to approve the appointment, so that if the appointment was approved, the emails are sent. I was trying to set this up, but found that no matter what I did, the second ajax function inside the success function wouldn't fire, and it wouldn't even correctly report what the error was.
To test to see if this was the ajax function itself that was at fault, I took it out of the success function and put it within $(document).ready(function() { }), binding it to a different event to see if it would fire - and it did. So the function itself is not the problem, but rather that it is inside the success function of another ajax request.
What should I do to get this to fire? Other suggestions on Stack Overflow are very confusing at best, so please pardon me for asking again, but there doesn't seem to be a clear satisfactory answer to this.
This is the code that I put within the first ajax request's callback function, which worked perfectly well when I took it outside the callback function and bound it to a different eventy.
$.ajax({
type: "POST",
dataType: "JSON",
url: "[home url]/wp-admin/admin-ajax.php",
data: "action=finchJsonTest",
success: process_lesson_request,
error: function(MLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
alert("Something\'s not right!");
}
});
function process_lesson_request(data) {
alert("Hooray!");
console.log(data);
}
And this is the php function that Wordpress calls to handle this ajax request (determined by the "action" variable in the data string) - there's nothing too important going on, I was just testing to see if it would successfully return a JSON object
function finchJsonTest() {
$json_array[] = 'This is something!';
$finaljson_array = json_encode($json_array);
echo $finaljson_array;
die();
}
add_action( 'wp_ajax_nopriv_finchJsonTest', 'finchJsonTest' );
add_action( 'wp_ajax_finchJsonTest', 'finchJsonTest' );
Again, if I use this ajax call on its own bound to some event, it works perfectly and returns the desired JSON object (just text saying 'this is something'), but if I put this in the success callback function of another ajax request, it fails, and does not even throw what the error is. I have in fact read other Stack Overflow posts related to this, and wasn't able to make heads or tails of what to do. Any thoughts out there?
I'm using jQuery UI. I'm loading some content in a dialog box over AJAX. After inserting the content from the server, I need to make modifications to the document. I am using the .live() function on my link; I thought this would enable me to use Js after loading the content over ajax, but it's like the content I just loaded isn't a part of the document. Any help very much appreciated.
Are you adding the bindings (lives) in the success function of the ajax call?
If so I had the same issue, I'll try to explain what I figured out:
$.post('callURL', function(data){
// Let's say data returned from server is an ID of a div I have to hide
// by clicking on some_link
$('#some_link').live('click',function(){
$('#'+data).hide();
});
});
This won't work because the code inside the 'live' function is executed on click and at that time the 'data' value is gone.
To make it work I made a global variable 'ID' which I set in the success function and then called in the 'live' function again like this:
var ID;
$.post('callURL', function(data){
// Let's say data returned from server is an ID of a div I have to hide
// by clicking on some_link
ID = data
$('#some_link').live('click',function(){
$('#'+ID).hide();
});
});
I am sending data to the server in small bursts using the jQuery ajax function. Each chunk of data is a simple key-value map (the data property passed to the ajax function).
If a request fails, how can my error event handler identify which specific set of data failed to be uploaded?
The function signature of the jQuery error handler is:
error(XMLHttpRequest, textStatus, errorThrown)
Neither textStatus or errorThrown seem useful to identify the failed set of data, and the XHR doesn't seem to offer that capability either.
Simply put, if a request fails, I want to be able to get the id property of the data that I passed to the ajax function. How can I do this?
Check this... From the docs - pay attention to the highlighted section:
The beforeSend, error, dataFilter, success and complete options all take callback functions that are invoked at the appropriate times. The this object for all of them will be the object in the context property passed to $.ajax in the settings; if that was not specified it will be a reference to the Ajax settings themselves.
So, in the error() callback (also success and complete, etc), this will be the object passed to $.ajax() - unless you are using the context parameter to change it.
As a note, the data param passed into $.ajax() will be converted to a serialized string for a GET or POST request
The other option, is to just make sure your error() callback has access to the variable in the same scope:
(function() {
// create a scope for us to store the data:
var data = {id: 1};
$.ajax({
url: '/something-to-genereate-error',
data: data,
error: function() {
console.log(this, data);
}
});
})(); // call the function immediatey
See this fiddle for an example - Note that the data inside of this is "id=1" wereas the data we held a copy of is still {id:1}
Also - Note that the closure here ((function() { .... })()) Is pretty much unnecessary, it is just showing a way to store the data variable before passing it into $.ajax() and the using it in the callback. Most likely this ajax call already lies within a function where you could do this.
Ok, I think I found it (based on my previous answer and the one from gnarf,
$.ajax({
type: "POST",
url: "not-found",
context: {id: 123, name: "hello world"},
error: function(){
console.debug($(this)); //only works in chrome
}
});