When use datatables in Ajax call, paging is not working - ajax

When I use the code below, paging is not working. Where am I wrong?
var data = '';
$.ajax({ type: "GET",
url: "include/tables/data.php",
async: false,
success: function(data) {
$("#result").html(data);
$('#mytable').DataTable({});
}
});

Related

function is callign but Ajax is not calling

Here I am using codeigniter with highchart. Highchart will change after dropdown select by calling ajax.
Here, function is called but ajax is not calling. So, where I go wrong with this.
This is my ajax:
$('.edit').click(function(e)
{
e.preventDefault();
$.ajax({
url: '<?php echo site_url("Chart/branchwiseactivity");?>',
type: 'POST',
data: {
series: []
},
dataType: 'json',
success: function(json)
{
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
chart = new Highcharts.Chart(options);
}
});
e.preventDefault();
});

Bootsrap Typeahead 3 ajax not working

I'm trying to make typeahead input with ajax but it's not working. I tried everything what I find on web but I just stuck.
This is initialization of typeahead:
$('input[name=type_input]').typeahead({
source: function (query, process) {
$.ajax({
url: 'ajax/data.php',
type: 'GET',
dataType: 'JSON',
success: function(data) {
return (data);
}
});
}
});
// this is ajax return {["Data 1","Data 2","Data 3r"]}

Change .load() to $.ajax jQuery

I want to disable/prevent loading of the page until a JS call has been completed. I understand that the only way to do that is with $.ajax like so:
$.ajax({
url: "/acme/confirm_authentication.html",
async: false,
cache: false,
success: function(data) {
// loaded
}
Currently, I’m loading a partial page with .load() function like so:
var linkUrl = $('.js-dialog--on-load').attr('dialog-href') + ' #lga';
showDialogWindow(linkUrl);
function showDialogWindow(linkUrl) {
$('.container').append($("<div>").load(linkUrl, function(){
}).addClass('js-dialog'));
}
See demo: http://jsfiddle.net/SQDDD/1/
How can I translate this into an $.ajax call?
Remember, the reason I’m using .load() is so that I can load only part of the website (#lga).

asyc: false is (most of the time) evil ;-)
You may try something like :
function showDialogWindow(linkUrl) {
$.ajax({
url: linkUrl,
async: true,
cache: false,
success: function(data) {
$('.container').append($("<div>"+data+"</div>").addClass('js-dialog'));
}
});
}
Be aware that you lose the selector feature available in the load

Take a look at this example :
I have this html :
...
<body>
aaa
<p>bbb</p>
</body>
...
now getting the p element from ajax :
$.ajax(
{
url: 'http://jsbin.com/oFUMOtO/3/quiet',
type: "GET",
dataType: 'html',
success: function (data)
{
alert($("<div>").html(data).find( "p" ).text()); //alerts bbb
}
});

Send FormData and String Data Together Through JQuery AJAX

I have the below that uploads an image using JQuery's AJAX function
var id = <?php echo $id; ?>;
var img_data = new FormData($("form")[0]);
$.ajax({
url: 'add.php',
data: img_data,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
I'd like to include a string with the FormData sent. I tried the following, but no luck
data: img_data {id: id},
What's the correct syntax here?

Use append
var img_data = new FormData($("form")[0]);
img_data.append('id', id);

You could create a JSON data object and pass that as application/json and process the data within add.php:
var data = {
id : <?php echo !empty($id) ? $id : "''",
img_data : new FormData($("form")[0])
};
$.ajax({
url: 'add.php',
data: data,
contentType: "application/json",
type: 'POST',
success: function(data){
alert(data);
}
});
Although unconventional, you could also append the data as a query string to the URL with the POST. You'd also need to edit add.php to get this parameter.
$.ajax({
url: 'add.php?id=' + id,
data: img_data,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});

Ajax Success Function not working

I am using Ajax to add contents on my database. And here's the code:
function addToFavorites(){
var recipe_id = $("#recipe_id").val();
var url = connect_url+'addFavorite.php?user_id='+user_id+'&recipe_id='+recipe_id;
$.ajax({
type: 'POST',
data: [{
user_id: user_id,
recipe_id: recipe_id
}],
url: url,
async: true,
jsonpCallback: 'userCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function (data) {
alert("HELLO!!!");
},
error: function (e) {
alert("ERROR!");
}
});
}
The Ajax call was successful and I was able to add records on the database but I'm just wondering why is it not displaying the alert message if the calling was successful? Is there something wrong with my code? Or is there something wrong with my understanding? Thanks!

you must give a response with some info to the ajax or it won't know the response succeeded

Resources