I've stuck into a problem and couldn't find the solution.I am using jquery ui spinner in a shopping cart.onchange of spinner it has to update the cart with ajax call.First time it work well with all cart update but on second time it won't call.I reinitialized it but still not working.Here is my sample code
$('.spinner').spinner({
min: 0,
stop: function(event, ui) {
var get_row_id = this.id;
var get_row_value = this.value;
var temp = get_row_id.split('_');
var row_id = temp[1];
var product_id = temp[2];
var checkout_flag = $("#hidden_checkout_flag").val();
var qty = $("#productqty_"+row_id+"_"+product_id).val();
$.ajax
({
type :"POST",
url : "client/cart/update_qty",
data :{'qty':qty,'product_id':product_id,'row_id':row_id}
dataType :'json',
success function(msg)
{
var value = eval(msg);
$(".order_box").html(value.sidebar_content);
$(".landing_cart_content").html(value.cart_content);
$(".out_of_stock_error").html(value.out_of_stock_error);
setTimeout(function() {
$(".out_of_stock_error").slideUp();
}, 4000);
$( ".spinner" ).spinner();//reinitialize
}
});
}
});
I have reinitialized it after ajax call and onChange of spinner it should again call the 'update_cart' function but it's not doing that. I've already wasted a whole day to solve this bit still no luck.
Any help will be highly appreciated,
Thanks
Related
I have this scenario:
I have a simple php file with only few html elemnts: a div called switch, another called lamp and a couple of buttons.
The two buttons are labeled On and Off.
The lamp div is empty.
The switch div is empty too, but is updated using jQuery and Ajax with the content of a txt file, that only contains one word: it could be On or Off.
What i'm traying to achieve is this: whenever the file is updated with the word On or Off i would like the On or Off button to be triggered correspondingly and the lamp div to change the background color. Is it possible?
UPDATE:
Example:
(function($){
$(document).ready(function() {
$.ajax({
url : "testfile.txt",
dataType: "text",
success : function (data) {
$("#switch").html(data);
// this doesn't seems to work...
var word = data.toLowerCase();
$('#' + word).trigger('click');
// this works
$(document).ajaxStop(function(e){
var response = $("#switch").html();
$("#" + response.toLowerCase()).trigger("click");
});
var $container = $("#switch");
var refreshId = setInterval(function()
{
$container.load('testfile.txt').html();
}, 2000);
}
});
});
})(jQuery);
<div id="switch"></div>
<div id="on" class="button">On</div>
<div id="off" class="button">Off</div>
<div id="lamp"></div>
Since the response is only one word. Why not try
var word = data.toLowerCase();
$('#' + word).trigger('click');
in the success callback.
If you have only one ajax request, you can do like this:
$(document).ajaxStop(function(e){
var response = $("#switch").text();
// do what you want with variable response here
$("#" + response.toLowerCase()).trigger("click");
});
Maybe this can help for what you need:
(function($){
$(document).ready(function() {
var $container = $("#switch");
$container.load("testfile.txt", function() {
setInterval(function() {
$container.load("testfile.txt");
}, 2000);
});
});
})(jQuery);
Use clearInterval() to stop the timer when needed.
EDIT
JQUERY-AJAX REQUEST CODE:
<script type="text/javascript">
$(document).ready(function(){
$(".form").submit( function(e) {
e.preventDefault();
var form = $(this);
var div_add_comment = $(form).parent();
var div_comments = $(div_add_comment).parent();
$.ajax({
type: "POST",
data: $(form).serialize(),
url: "includes/comment.php",
success: function(msg){
$(div_comments).html(msg);
}
});
return false;
});
});
</script>
JQUERY SHOW ALL - COLLAPSE COMMENTS CODE
<script type="text/javascript">
$(document).ready(function(){
$('.see_all').click(function(){
var thisItem = $(this);
thisItem.parent().find('#comment2').slideDown('fast');
thisItem.parent().find('.collapse').css('display','inline-block');
thisItem.css('display','none');
return false;
});
$('.collapse').click(function(){
var thisItem = $(this);
thisItem.parent().find('#comment2').slideUp('fast');
thisItem.css('display','none');
thisItem.parent().find('.see_all').css('display','inline-block');
return false;
})
})
</script>
JQUERY REMOVE DEFAULT VALUE TEXT UPON FOCUS - TEXTAREA
<script type="text/javascript">
$(document).ready(function(){
var Input = $('textarea[name=comment]');
var default_value = Input.val();
$(Input).focus(function() {
if($(this).val() == default_value)
{
$(this).val("");
}
}).blur(function(){
if($(this).val().length == 0)
{
$(this).val(default_value);
}
});
})
</script>
Please let me know if you need anything else, I have the damndest of time copying code and formatting it in these posts.
END EDIT
I am having a weird little problem. I have created a jquery-ajax function to transfer data from a comments section of my page. The page has an instance of this form under each user post. So this page will have X amount of posts with X amount of comments for each posts, like a social network. My ajax request sends, recieves and displays the data perfectly BUT I have two other jquery functions called on elements inside that no longer work after the ajax function returns the html. All the other ones not acted upon by the ajax function STILL WORK. I have the checked and rechecked the response html from the ajax function and it is identical to the html of a standard post-comment instance.
Please let me know what you would like to see or if you have questions.
Thanks, your help is always appreciated!
Be sure to bind the jQuery functions in such a way that the element doesn't have to exist.
$('ul').on('click', 'li', function(){ /* do something */ });
This will execute on LIs that have been added after the binding of the function.
In your case you would want to bind to the parent of the comments section and target the elements that have the click behavior.
$('.comments')
.on('click', '.see_all', function(){...})
.on('click', '.collapse', function(){...})
.on('focus', 'textarea[name=comment]', function(){...})
.on('blur', 'textarea[name=comment]', function(){...})
Try removing the $() from form.
You have this:
var form = $(this);
var div_add_comment = $(form).parent();
var div_comments = $(div_add_comment).parent();
It should be this:
var form = $(this),
div_add_comment = form.parent(),
div_comments = $(div_add_comment).parent();
Since you declared var form = $(this); you don't need to wrap form...how you have it now is the equivalent of $((form))
Not sure if this will fix your problem, but jQuery may be getting hung up on this since you are spawning children from $(this).
I got some progressbar Update Issues. What I like to do is, fire a ajax call which takes some time to complete and during the this call I'd like to fire ajax calls, set by an interval, to update my progressbar.
Since I could not find a solution and only found the Browser's restriction, which would match here. It's always max 2 calls active.
Still, my second call stays pending in Google Chrome, untill my first (main) call finished.
EDIT: full jquery script
// update cars cache
$('#cars_cache_update_run').bind('click', function(){
// remove button
$(this).remove();
// hide import widgets
$('#products_import_widget').css('display', 'none');
$('#vehicles_import_widget').css('display', 'none');
$('#orders_import_widget').css('display', 'none');
$('#test_data_widget').css('display', 'none');
// show blind
$('#cars_cache_update_info').css('display', 'none');
$('#cars_cache_update_blind').css('display', 'inline');
var carsUpdateInterval = setInterval(function() {
getImportState('http://localhost/index.php/import/import_state/cache_update', 'cars_import_progressbar');
}, 1000);
// ajax request
$.ajax({
url: "http://localhost/index.php/import/cars_cache",
async : true,
success: function(data){
$('#cars_cache_update_blind').css('display', 'none');
$('#cars_cache_update_success').css('display', 'inline');
clearInterval(carsUpdateInterval);
},
error: function(thrownError){
$('#cars_cache_update_blind').css('display', 'none');
$('#cars_cache_update_error').css('display', 'inline');
$('#cars_cache_update_error_msg').html(thrownError);
}
});
});
function getImportState(url, id)
{
$.ajax({
url: url,
success: function(data){
var json = $.parseJSON(data);
$.each(json, function(i, item) {
var progressbar_value = json[i]['state'];
$( "#"+id ).progressbar({
value: progressbar_value
});
})
}
});
}
Another funny thing, if I call the interval request by $.get I'll get a strange error..
Working with Codeignitor Framework.
GET http://localhost/[object%20Object] 404 (Not Found) jquery.1.7.min.js:4
send jquery.1.7.min.js:4
f.extend.ajax jquery.1.7.min.js:4
f.(anonymous function) jquery.1.7.min.js:4
(anonymous function)
Many Thanks for your help already, been trying for hours now.. Maybe I'm just a noob.. Haha.
rootless
Don't call multiple ajax with intervals. Try something like this:
function updateProgress(){
$.ajax({
url: "http://localhost/index.php/import/import_state/cache_update",
success: function(data){
var json = $.parseJSON(data);
$.each(json, function(i, item) {
var progressbar_value = json[i]['state'];
$( "#cars_import_progressbar" ).progressbar({
value: progressbar_value
});
});
updateProgress(); // after success, call the same function again
}
});
}
updateProgress(); // start updateProgress
Hope it helps :]
I made a moderation script, voting up and down question and answers. Time ago the script worked, but when i came back to start coding in this project one more time, it doesn't work anymore.
The script was doing: when you click in a div called vote, or vote1 a link, it ask if it's up or down. If it's up, it loads url: "mod_up_vote.php" sending by post some info about the question you are voting on. It was ok. But not now. It doesn't load that page, because i was printing and inserting in database the $_POST variable and nothing was there.
What do you think is wrong here? Thanks.
$(document).ready(function()
{
$(document).delegate('.vote, .vote1', '.vote2', 'click', function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='mod_up')
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "mod_up_vote.php",
dataType: "xml",
data: dataString,
cache: false,
success: function(xml)
{
//$("#mod-pregunta").html(html);
//$("#mod-respuesta").html(html);
//parent.html(html);
$(xml).find('pregunta').each(function(){
var id = $(this).attr('id');
var pregunta = $(this).find('preguntadato').text();
var respuesta = $(this).find('respuestadato').text();
var votoup = $(this).find('votoup').text();
var votodown = $(this).find('votodown').text();
var id_pregunta = $(this).find('id_pregunta').text();
var id_respuesta = $(this).find('id_respuesta').text();
$("#mod-pregunta").html(pregunta);
$("#mod-respuesta").html(respuesta);
//$(".vote").attr('id', $(this).find('id_pregunta').text());
$(".vote1").html("Aceptar");
$(".vote2").html("Rechazar");
//$("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
} });
}
return false;
});
This looks like a problem with your JQuery. Why are you using delegate instead of click? Also, your arguments to delegate appear to be incorrect. If you look at the documentation you'll see the function signature is:
$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+
You are binding your function to an event called '.vote2', which I can only assume does not exist.
Try using click instead, there's no reason to use delegate as far as I can tell.
edit:
Try using click like so:
$('.vote, .vote1').click(function(){ /* your code here */ });
I am implementing a twitter-style follow/unfollow functionality with the following jquery.
$(function() {
$(".follow").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#loading").html('<img src="loader.gif" >');
$.ajax({
type: "POST",
url: "follow.php",
data: info,
success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#follow'+I).fadeOut(200).hide();
$('#remove'+I).fadeIn(200).show();
}
});
return false;
});
});
I have a similar unfollow function. However i have the following problem:
When I have N items {1,2..i.N} each with id = followi and I click on the follow button. I find that some of the items respond while others do not. I suspect it is a pure javascript issue...otherwise i figure none of the buttons would respond at all.
Is it a timing issue...all help is appreciated. Also i'd appreciate it if you could point me to a simpler method.
Thanks!
Well you are doing the UI update in your ajax success handler, so the reaction time for the UI updated is based on the speed of the Ajax response. And if the server doesn't return successfully, the UI update won't happen at all.
A simpler method with instant response:
$(function() {
$(document.body).delegate(".follow","click",function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#loading").html('<img src="loader.gif"/>');
$('#follow'+I).fadeOut(200); // act instantly since we assume it will go well
$('#remove'+I).fadeIn(200); // act instantly since we assume it will go well
$.ajax({
type: "POST",
url: "follow.php",
data: info,
complete: function(){ //always remove the loader no matter if it goes well or not
$("#loading").slideUp();
},
error: function() {
//handle error
$('#follow'+I).fadeIn(200); // correct mistake
$('#remove'+I).fadeOut(200); // correct mistake
}
});
return false;
});
});