hi am having a problem with infinite scroll functionality, when all the contents have been displayed it still continues to scroll (strange behavior). i am looking for a way to stop the infinite scroll when all contents are displayed
here is my code
$(document).ready(function() {
var total_record = 0;
var total_groups = <?php echo $total_data; ?>;
$('#results').load("<?php echo base_url() ?>admin/csr_transactions/get_products",
{'group_no':total_record}, function() {total_record++;});
$(window).scroll(function() {
});
$('#load_more').click(function(){
load_more(total_record, total_groups);
});
function load_more(total_record, total_groups) {
if(total_record <= total_groups)
{
$('.loader_image').show();
$.post('<?php echo site_url() ?>admin/csr_transactions/get_products',{'group_no': total_record},
function(data)
{
if (data != "") {
$("#results").append(data);
$('.loader_image').hide();
total_record++;
}
});
}
}
});
</script>`
Related
I have an infinite scroll pagination script, it’s included within a setInterval () function to append new data every x seconds, both functions work fine, however every time I start scrolling I get the infinite scroll pagination corrupted once setInterval() refreshes the div, is there a way to prevent setInterval() from running as long as I’m scrolling?
Here is my code:
$(document).ready(function(){
$.ajaxSetup({ cache: false });
setInterval(function(){
var track_load = 0;
var loading = false;
var total_groups = <?php echo $total_groups; ?>;
$('#live_activity').load("loading_page.php", {'group_no':track_load}, function() {track_load++;});
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height())
{
if(track_load <= total_groups && loading==false)
{
loading = true;
$('.animation_image').show();
$.post('loading_page.php',{'group_no': track_load}, function(data){
$("#live_activity").append(data);
//hide loading image
$('.animation_image').hide();
track_load++;
loading = false;
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
$('.animation_image').hide();
loading = false;
});
}
}
});
}, 3000);
});
I have successful create auto load Content with this code:
<script type="text/javascript">
$(document).ready(function() {
var track_load = 0; //total loaded record group(s)
var loading = false; //to prevents multipal ajax loads
var total_groups = <?php echo $total_groups; ?>; //total record group(s)
$('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){
if(track_load <= total_groups && loading==false){
loading = true; //prevent further ajax loading
$('.animation_image').show();
$.post('autoload_process.php',{'group_no': track_load}, function(data){
$("#results").append(data);
$('.animation_image').hide();
track_load++; //loaded group increment
loading = false;
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError); //alert with HTTP error
$('.animation_image').hide(); //hide loading image
loading = false;
});
}
}
});
});
</script>
could you help me to make grid style like portofolio
like this web: http://www.clear.co.id/
I have a iframe and i'm trying to use Dialog to get data in Iframe and output to current html, but i don't know how to get Ckeditor Content from the Iframe.
I tried to using CKEDITOR.instances['editor'].getData(); but look like cannot get it.
This is my code:
<textarea class='editor' name='description' id='description'></textarea>
$( "#dialog_custom" ).dialog({
autoOpen: false,
modal: true,
height: 768,
width: 1024,
buttons: {
Add: function() {
var model = $('.dialog_custom').contents().find('#model').val();
var product_id = $('.dialog_custom').contents().find('#product_id').val();
var product_name = $('.dialog_custom').contents().find('#product_name').val();
var qty = $('.dialog_custom').contents().find('#qty').val();
var total = $('.dialog_custom').contents().find('#total').val();
var category = $('.dialog_custom').contents().find('#category').val();
if(qty=='') { qty = '0'; }
if(total=='') { total = '0.00'; }
if(model=='') {
alert('Please input the correct Model Number.');
} else {
$(".product").append(InsertTableGetFromIframe);
$('.delete_custom_row').click(function() {
if(confirm("Are you sure want to delete this data?")) {
$(this).parents('.custom_row').next('.parts_row').remove();
$(this).parents('.custom_row').remove();
}
});
$('.dialog_custom').contents().find('#model').val('');
$('.dialog_custom').contents().find('#product_id').val('');
$('.dialog_custom').contents().find('#product_name').val('');
$('.dialog_custom').contents().find('#qty').val('');
$('.dialog_custom').contents().find('#total').val('');
$('.dialog_custom').contents().find('#category').val('');
$(this).dialog("close");
i++;
}
},
Close: function() {
$(this).dialog("close");
}
}
});
$( "#open_custom" ).click(function() {
$( "#dialog_custom" ).dialog( "open" );
});
</script>
Finally, I found out the solution to get the content in the iframe, i used jquery to submit the form then POST the value on the field and get it by Jquery again.
It's the most simple way that i found, actually I think we have another way better to do it...
I'm using jQuery to implement a so-called 'infinite scroll' effect on my webiste. Its currently working fine, but I have a concern. That is, although the database row is over, if the scroll bar reaches downward, it continues to grab data, which is, in this case, data that doesn't exist. What I want is, once the database row ends, it should not get data even if the scroll bar reaches down.
<script type="text/javascript">
$(document).ready(function () {
var message_count = <? php echo $message_count; ?> ;
var loaded_messages = 0;
function last_msg_funtion() {
$('div#more_button').html('<img src="./assets/img/loader.gif">');
loaded_messages += 10;
$.get("/flick/load_more_message/" + loaded_messages, function (data) {
$("#load_more_message").append(data);
});
if (loaded_messages >= message_count - 10) {
$("#more_button").hide();
//alert('hide');
}
};
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
last_msg_funtion();
}
});
});
</script>
Make a check before calling for more data (instead of just hiding the button)
function last_msg_funtion() {
if (loaded_messages < message_count) { // ADDED THIS CHECK
$('div#more_button').html('<img src="./assets/img/loader.gif">');
loaded_messages += 10;
$.get("/flick/load_more_message/" + loaded_messages, function (data) {
$("#load_more_message").append(data);
});
if (loaded_messages >= message_count - 10) {
$("#more_button").hide();
//alert('hide');
}
}
};
I think you can try this
$(window).scroll(function(){
if(loaded_messages < message_count)
{
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
}
});
Im looking for a solution to add a product variation via Ajax.
As i found out all the WooCommerce basic functions allow adding a product to the cart only if it is not a variation item.
im using <?php echo woocommerce_template_loop_add_to_cart() ?> to display the add to cart button but this button is a regular submit button.
how can i make a variable item use the Ajax add to cart ?
I created and AJAX add to cart for variable products like this:
Sorry about the delay, here is the expanded answer:
I included a new js file called added-to-cart.js and the file contains the following code. There is some extra code for handling a popup and also increasing the cart counter which you might want to remove.
/* Begin */
jQuery(function($) {
/* event for closing the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
})
$("a.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$('a.livebox').click(function() {
//alert('Hello World!');
return true;
});
setAjaxButtons(); // add to cart button ajax
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
// AJAX buy button for variable products
function setAjaxButtons() {
$('.single_add_to_cart_button').click(function(e) {
var target = e.target;
loading(); // loading
e.preventDefault();
var dataset = $(e.target).closest('form');
var product_id = $(e.target).closest('form').find("input[name*='product_id']");
values = dataset.serialize();
$.ajax({
type: 'POST',
url: '?add-to-cart='+product_id.val(),
data: values,
success: function(response, textStatus, jqXHR){
loadPopup(target); // function show popup
updateCartCounter();
},
});
return false;
});
}
function updateCartCounter() {
var counter = $('.widget_shopping_cart_content').text().replace(/\s/g, '');
if (counter == '') {
$('.widget_shopping_cart_content').text("1");
}
else {
$('.widget_shopping_cart_content').text(++counter);
}
}
var popupStatus = 0; // set value
function loadPopup(target) {
var currentPopup = $(target).parents(".single_variation_wrap").find("#toPopup");
var currentBgPopup = $(target).parents(".single_variation_wrap").find("#backgroundPopup");
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
currentPopup.fadeIn(0500); // fadein popup div
currentBgPopup.css("opacity", "0.7"); // css opacity, supports IE7, IE8
currentBgPopup.fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$(".single_variation_wrap > div:nth-child(2)").fadeOut("normal");
$(".single_variation_wrap > div:nth-child(4)").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
}); // jQuery End