I have a ajax function to got data, when response will get meanwhile show a bootstrap progress loader(circle loader).
How to do this ?
Ajax Function JS:
$('#category_modal').click(function(event) {
var url = $(this).data('url');
var cid = $(this).data('id');
$.ajax({
url: '<?=$this->config->base_url()?>admin_panel/update_popup',
type: 'post',
data: 'id=' + cid
}).done(function(data) {
jQuery('#categoryModal .modal-content').html(data);
$('#categoryModal').modal({
"backdrop" : "static"
});
});
});
https://fortawesome.github.io/Font-Awesome/examples/
animated icon can do the job. Also with css :
http://cssload.net/
add function
beforeSend: function () {
// show loader
}
in your ajax call
You can progress-bar class by jquery.
$('#category_modal').click(function(event) {
/*here append your class to some element
$(element).addClass("progress-bar");
*/
var url = $(this).data('url');
var cid = $(this).data('id');
$.ajax({
url: '<?=$this->config->base_url()?>admin_panel/update_popup',
type: 'post',
data: 'id=' + cid
}).done(function(data) {
/* when u r done remove
$(element).removeClass("progress-bar");
/*
});
});
Related
I've got checkbox inputs on a page and am filtering the results using ajax.
One search option is type and the vendors option updates depending on the type selected. But this means that the change function used to update the actual results no longer works within the document.ready(). To rectify this, I also call the function within .ajaxComplete().
But as an ajax call is being called within the ajaxComplete(), it is causing an infinite loop and crashing the site.
$(document).ready(function(){
$('input[type=radio]').change(function(){
var type = $(this).attr('data-id');
$.ajax({
method: 'POST',
url: 'assets/ajax/update-filters.php',
data: {type : type},
success: function(data)
{
$('#vendor-filter input[type=checkbox]').prop('checked', false);
vendors = [];
$('#vendor-filter').empty();
$('#vendor-filter').html(data);
}
});
$('#vendor-filter input[type=checkbox]').change(function(){
filterResults(this);
});
});
$(document).ajaxComplete(function(){
$('#vendor-filter input[type=checkbox]').click(function(){
filterResults(this);
});
});
function filterResults($this)
{
var type = $('input[type=radio]:checked').attr("data-id");
var vendor = $($this).attr('data-id');
if($($this).prop('checked'))
{
var action = 'add';
vendors.push(vendor);
}
else
{
var action = 'remove';
var index = vendors.indexOf(vendor);
if(index >= 0)
{
vendors.splice(index, 1);
}
}
$.ajax({
method: 'POST',
url: 'assets/ajax/filter-results.php',
data: {'vendor' : vendor, 'action' : action, 'vendors' : vendors, 'filter_type' : type},
success: function(data)
{
$('#results').empty();
if(action == 'add')
{
window.history.pushState("", "Title", window.location.href+"&v[]="+vendor);
}
else if(action == 'remove')
{
var newUrl = window.location.href.replace("&v[]="+vendor, "");
window.history.replaceState("", "Title", newUrl);
}
$('#results').html(data);
}
});
}
How do I get the .change function to still work after the input checkbox has been called via ajax previously and without causing a loop with .ajaxComplete() ?
Any help would be greatly appreciated.
Thanks
Please try by change function as follow :
$(document.body).on("change",'input[type=radio]',function(){
var type = $(this).attr('data-id');
$.ajax({
method: 'POST',
url: 'assets/ajax/update-filters.php',
data: {type : type},
success: function(data)
{
$('#vendor-filter input[type=checkbox]').prop('checked', false);
vendors = [];
$('#vendor-filter').empty();
$('#vendor-filter').html(data);
}
});
I have chat and i am loading these by ajax
$.ajax({
type: "GET",
url: "chat/mini.php",
success: function(chat){
$('.chat-message').html(chat);
},
error: function(err) {
console.log(err);
}
});
And i Have in chat/mini.php link to delete
X
and script
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = 'id=' + del_id;
if (confirm("Sure you want to delete? There is NO undo!")) {
$.ajax({
type: "GET",
url: "chat/delete.php",
data: info,
success: function () {
}
});
}
return false;
});
And these cod working when i not loading chat with ajax but when i loading these with ajax these don't working. I must add something to work?
I have a question that I can't seem to answer about Jquery Ajax Response.
I use a for each to select some data from <p> tags in each info_div. This data I then use to do a ajax call to a service that replies with a XML. I want to place some elements from this XML under each div from where I took the two variables. Each div should have it's own reply.
$(document).ready(function () {
$('#action-button').click(function () {
$(".info_div").each(function () {
var var1 = $(this).find('p:nth-child(4)').text();
var1 = var1.slice(-10);
var var2 = $(this).find('p:nth-child(8)').text();
var2 = var2.slice(-1);
$.ajax({
type: "GET",
url: "http://www.mypage.com/mypage&value1=" + "va1" + "&value2=" + "var2",
cache: false,
dataType: "xml",
success: function (xml) {
$(xml).find('member').each(function () {
var name = $(this).find("title").text()
/* how do I get this variable under each $('.info_div') from where I selected the var1 and var2
Every attempt I made places all replies under all the divs in class .info_div */
});
}
});
});
});
});
I would not recommend you to send ajax requests in a loop. Better collect all your data, then send it to the server and handle the response.
Meanwhile, if you insist to do it in a loop, you should make a reference to the iterated element from $(".indo_div) collection, and use it in ajax callback.
$(".info_div").each(function() {
var _that = $(this);
var var1 = $(this).find('p:nth-child(4)').text();
var1 = var1.slice(-10);
var var2 = $(this).find('p:nth-child(8)').text();
var2 = var2.slice(-1);
$.ajax({
type: "GET",
url: "http://www.mypage.com/mypage&value1=" + "va1" + "&value2=" + "var2",
cache: false,
dataType: "xml",
success: function(xml) {
$(xml).find('member').each(function(){
var name = $(this).find("title").text()
that.append(name);
});
}
});
});
I have a vote function in one of my projects. Please see following code.
$(function () {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
and I'm using jQuery infinite scroll to load rest of the pages/posts. I'm using following code in main page and second page which i load rest of the data
('#left').infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.post-box', //
}, function (newElements, data, url) {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
Issue is after 2nd 3rd or any other page load, vote function is triggering twice. How can I fix this issue. Any help will be appreciated.
Maybe if you unbind the click event and then bind it
function(newElements, data, url){
$(".vote").unbind( "click" );
$(".vote").click(function() {
You need to unbind the click event before binding it again.
[...]
$(".vote").unbind('click').click(function()
[...]
or
[...]
$(".vote").off('click').click(function()
[..]
depending on the version of jQuery you are using.
Below is the sample code of my function. in the for loop one by one product id is pass in the ajax function and get product price from the php file as response and write it and html.
for(var i=0; i < data.products.length; i++){
var doc = data.products[i];
$.ajax({ // ajax call starts
url: 'product.php',
data: { product_id: doc.id },
dataType: 'json',
success: function(data)
{
document.getElementById('price_price'+data.product_id+'').innerHTML = data.products_price;
}
});
}
I have found that sometimes it takes a more time for price to display. i want to check which record is taking time to load. how can check to detect when it takes longer than 5 seconds for the price to load?
Something like this....
var ajaxTime= new Date().getTime();
$.ajax({
type: "POST",
url: "some.php",
}).done(function () {
var totalTime = new Date().getTime()-ajaxTime;
// Here I want to get the how long it took to load some.php and use it further
});
Also, by the way, if you want to prevent sending (i+1) request, before (i) is completed, you'd maybe want to use syncronous ajax request instead of async.
Try to log timestamp beforesend and success or error
$.ajax({ // ajax call starts
url: 'product.php',
data: { product_id: doc.id },
dataType: 'json',
beforeSend: function() {
console.log(new Date().getSeconds());
}
success: function(data)
{
console.log(new Date().getSeconds());
document.getElementById('price_price'+data.product_id+'').innerHTML = data.products_price;
}
});
Use setTimeout, like this:
var timeoutTimer = setTimeout(function() {
// time out!!!.
}, 5000);
$.ajax({ // ajax call starts
url : 'product.php',
data : {
product_id : doc.id
},
dataType : 'json',
success : function(data) {
document.getElementById('price_price' + data.product_id + '').innerHTML = data.products_price;
},
complete : function() {
//it's back
clearTimeout(timeoutTimer);
}
});