I have done ajax add to cart product from product page, I am able to update the top cart contents successfully on Prototype ajax request success, but when I try to initialize the jquery progressbar(which is already included in top cart) from the success event of the prototype ajax request, then it doesn't work at all.
Progress bar works fine if I do a page reload (document ready).
Below is my code.
function updatetopcart() {
var ajxformurl = $('ajaxTLUrl').getValue();
new Ajax.Request(ajxformurl, {
onSuccess: function(response) {
var transport = response.responseText.evalJSON(true);
var toplinkcontent = transport.content;
//alert(toplinkcontent);
$$('#minicart').invoke('replace', toplinkcontent);
//Reset top cart hover flap
resetFlaps();
//Reset free delivery progress bar
resetFDBar();
return true;
},
onException: function(request,e){
//console.log(e.message);
alert(e.message);
}
});
}
function resetFlaps() {
$('minicart').observe('mouseover', function(e) {
$('minicart-panel').setStyle({backgroundColor: '#FFFFFF'});
$('minicart-panel').show();
});
$('minicart').observe('mouseout', function(e) {
$('minicart-panel').hide();
});
$('minicart_mobile').observe('mouseover', function(e) {
$('minicart-panel_mobile').setStyle({backgroundColor: '#FFFFFF'});
$('minicart-panel_mobile').show();
});
$('minicart_mobile').observe('mouseout', function(e) {
$('minicart-panel_mobile').hide();
});
return true;
}
function resetFDBar() {
(function($) {
jQuery("#free_delivery").progressbar({
max: Number(jQuery('#maxPriceVal').val()),
value: Number(jQuery('#currPriceVal').val())
});
})(jQuery);
return true;
}