ajaxComplete function "loader" running once - ajax

here is the code I'm using:
$(function() {
$(".fav").click(function() {
var page = $('#page').attr('value');
var user = $('#user').attr('value');
var time = $('#time').attr('value');
var info = "page="+ page +"& user="+ user +"& time="+ time;
$("#loading").html('<im g src="loader.gif" />');
$.ajax({
type: "POST",
url: "favorite.php",
data: info,
success: function() {
$("#loading").ajaxComplete(function(){}).slideUp();
$('#fav').fadeOut(200).hide();
$('#unfav').fadeIn(200).show();
}
});
return false;
});
});
</script>
<script type="text/javascript" >
$(function() {
$(".unfav").click(function(){
var page = $('#page').attr('value');
var user = $('#user').attr('value');
var info = "page="+ page +"& user="+ user;
$("#loading").html('<im g src="loader.gif" />');
$.ajax({
type: "POST",
url: "notfavorite.php",
data: info,
success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#unfav').fadeOut(200).hide();
$('#fav').fadeIn(200).show();
}
});
return false;
});
});
Everything is working fine, it acts as a "like" "follow" button, the only problem is that the ajaxComplete() function only runs once.
Cheers!

$(function(){
$(".fav").click(function(){
var page = $('#page').attr('value');
var user = $('#user').attr('value');
var time = $('#time').attr('value');
var info = "page="+ page +"& user="+ user +"& time="+ time;
$("#loading").html('<im g src="loader.gif" />');
$('#follow').hide();
$.ajax({
type: "POST",
url: "favorite.php",
data: info,
success: function(){
$('#loading').empty();
$('#remove').fadeIn(200).show();
}
});
return false;
});
})();
same for .unfav

Related

ajax error 500 (Internal Server Error)

i used ajax to pass data form to laravel controller
But when i run my code , it alway return error (Internal Server Error)
$(document).ready(function() {
$("#btnSave").click(function(e){
var _token = $("input[name='_token']").val();
// var selPartners = $("input[name='selPartners'] option:selected").val();
var selPartners= $('#selPartners :selected').text();
var txtDescription = $("input[name='txtDescription'] ").val();
var txtPrice = $("input[name='txtPrice']").val();
var txtWarrantyDate = $("input[name='txtWarrantyDate']").val();
var itemImage = $('#itemImage').prop('files')[0];
// var selItems =$("input[name='selItems']").val();
var selItems= $('#selItems :selected').text();
var x ={_token:_token, selPartners:selPartners, selItems:selItems, txtDescription:txtDescription, txtPrice:txtPrice, txtWarrantyDate:txtWarrantyDate, itemImage:itemImage}
// console.log(x);
$.ajax({
url: "/additem",
type:'POST',
dataType: 'json',
cache: false,
contentType: false,
processData: false,
data: {_token:_token, selPartners:selPartners, selItems:selItems, txtDescription:txtDescription, txtPrice:txtPrice, txtWarrantyDate:txtWarrantyDate, itemImage:itemImage},
success: function(data) {
if($.isEmptyObject(data.error)){
console.log('ok');
}else{
console.log('failed');
}
}
});
});
});
At controller just has:
return response()->json(['error'=>'failed']);

Can't post ajax value

Still stack in these code. On any browser desktop working fine, but when try use chrome on my android, can't post value from ajax datastring.
jQuery(document).ready(function()
{
jQuery(".button").click(function()
{
var product = jQuery(".products").val().split('|')[0];
var nomortujuan = jQuery(".nomortujuan").val();
var pn = parseFloat(document.getElementById("val[pin]").value);
var dataString = 'method=sendMessage&message='+product+'.'+ nomortujuan+'.'+pn;
var web = 'ajax.php';
jQuery.ajax ({
type: "POST",
url: web,
data: dataString,
cache: true,
beforeSend: function(html) {
document.getElementById("hasil").innerHTML = '';
jQuery(".flash").show();
jQuery(".flash").html('<div style="float:left;"></div>');
},
success: function(html){
jQuery("#js_process_request input, #js_process_request select").attr('disabled',false);
jQuery(".flash").hide();
jQuery("#hasil").hide();
jQuery ("#hasil").append(html);
return false;
}
});
});
});
Maybe this problem
jQuery ("#hasil").append(html);
remove spacing to fix it
jQuery("#hasil").append(html);

$.ajax within jquery plugin not updating variable

Fiddle: http://jsfiddle.net/gpTpK/
The issue I am having is that the title variable is not updated/changed when the $.ajax is executed, I know that the ajax call is working as I have tried replacing the line
title = $(xml).find("title").text();
with
console.log($(xml).find("title").text());
and sure enough it does return the title however when using the orginal line the variable title doesn't change
I have tried and it does work putting the ajax call outside (function($){})(jQuery);
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
blogID: "",
postID: "",
done: null
};
var options = $.extend(defaults, options);
var title;
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
success: function(xml) {
title = $(xml).find("title").text();
}
});
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
};
})(jQuery);
I have tried the below and i have also tried wrapping the ajax in a function such as getTitle(){ajax code here with return title;}
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
blogID: "",
postID: "",
done: null
};
var options = $.extend(defaults, options);
var title;
getAjax();
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
function getAjax() {
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
async: false,
success: function(xml) {
title = $(xml).find("title").text();
}
});
}
};
})(jQuery);
sorry, I have spent ages trying to figure it (I didn't ask out of laziness :P), regardless here's the solution for those interested :)
(function($) {
$.fn.getPost = function(options) {
var $this = $(this);
var defaults = {
method: "html",
done: null
};
var options = $.extend(defaults, options);
var title;
var sorf;
$.ajax({
type: "GET",
url: "http://www.blogger.com/feeds/724793682641096478/posts/default/3551136550258768001",
dataType: "xml",
dataType: 'jsonp',
success: function(xml) {
title = $(xml).find("title").text();
sorf = 1;
},
error: function(){
sorf = 0;
},
complete: function() {
returnvals(sorf);
}
});
function returnvals(sorf) {
if(sorf){
//success
return $this.each(function() {
if (options.done) {
options.done.call(undefined, title);
}
});
}else{// failure}
}
};
})(jQuery);

AJAX Crashes Chrome

Umm.. my problem is that i want to use ajax for my chatbox but whenever i try to put ajax for no-reload refresh Chrome/Firefox Crashes down.. HERE's my code:
/chatlog.php/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
//<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$.ajaxSetup({ datatype: "html" });
$('#loaddiv').load('chatlog.php');
}, 10000);
</script>
/submit.php/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".submit").click(function(){
var message = $("#message").val();
var dataString = 'message'+message;
$.ajax({
type: "POST",
url: "submit.php",
data: dataString,
async: false,
});
/*$message=$_POST['message'];
$name = $_SESSION['username'];
$room = $_SESSION['room'];
$user = $_SESSION['user'];*/
});
});
</script>
$.ajax({
type: "POST",
url: "submit.php",
data: { message : message },
async: false
});
Also put your ajaxSetup outside of the setInterval function.
$.ajaxSetup({ datatype: "html" });
Pass your data properly, like:
var dataString = 'message'+message;
//Should Be
var dataString = 'message='+message;
//OR
var dataString = {'message' : message };

how to make ajax call in Jquery's delegate()

I have a delegate function of JQuery to remove a row of a grid which is anchor tagged remove, as below
$('#MyGrid').delegate('a.remove', 'click', function() {
// e.preventDefault();
var tr = $(this).closest('tr');
var htmlstring = tr.find("td").eq(0).html();
alert(htmlstring);
jQuery.ajax( //$.ajax( also not working
{
type: "POST",
url: "UploadDocuments/Removefile",
data: "removefile=" + htmlstring,
success: function(){
tr.remove();
}
});
});
this is where i am making delegate call in success function of JQuery
success: function(result) {
var htmlString = [result];
for (i = 0; i < htmlString.length; i++) {
$('#MyGrid tbody').append('<tr><td>Remove</td></tr>');
}
},
Now i want to make ajax call as shown but it is not hitting once i click remove ,but is loading initially.Also i need to pass the data i.e the name of the deleted row.How can i get that value?
could any of you guys help me out! got stucked !! ;)
thanking you,
michaeld
Try this where IndexOfNameColumn points to the name column index.
$('#MyGrid').delegate('a.remove', 'click', function() {
// e.preventDefault();
var tr = $(this).closest('tr'); //line#3
var htmlstring = tr.find("td").eq(IndexOfNameColumn).html();
jQuery.ajax( //$.ajax( also not working
{
type: "POST",
url: "UploadDocuments/Removefile",
data: "removefile=" + htmlstring //file name from line#3
});
tr.remove();
});
try this code-
$('#MyGrid').delegate('a.remove', 'click', function() {
// e.preventDefault();
var tr = $(this).closest('tr').find("td").eq(0).find('a').text().replace(/"/g,"").trim(); //line#3
var $this = $(this);
jQuery.ajax(
{
type: "POST",
url: "UploadDocuments/Removefile",
data: "removefile=" + tr //file name from line#3
success: function(){
$this.closest('tr').remove();
}
});
});

Resources