How to show alert only once in jQuery

Question

I have a jquery function which loads more post when user scroll below every time

here is the jquery code

$(function() {
    var $timeline = $('#tupdate'),
        $spinner = $('#loading').hide();

    function loadMore() {
        $(window).unbind('scroll.posts');
        $spinner.show();
        $.ajax({
            url: "/ajax/loadmore?lastPost=" + $(".pointer:last").attr('id'),
            success: function(html) {
                if (html) {
                    $timeline.append(html);
                    $spinner.hide();
                } else {
                    $spinner.hide();
                    bootbox.alert('No more post available');
                }
                $(window).bind('scroll.posts', scrollEvent);
            }
        });
    }
    //lastAddedLiveFunc();
    $(window).bind('scroll.posts', scrollEvent);

    function scrollEvent() {
        var wintop = $(window).scrollTop(),
            docheight = $(document).height(),
            winheight = $(window).height();
        var scrolltrigger = 0.95;
        if ((wintop / (docheight - winheight)) > scrolltrigger) loadMore();
    }
});

Now the problem is whenever user scroll down popup is shown everytime which irritates the user, how can i alert only once?

here is what I've tried

if (!g) {
    var g = 1;
    bootbox.alert('No more Post');
}

but still it keeps on showing alert every time i scoll down

Create a cookie on that page and on other delete that cookie — Miomir Dancevic, Jun 14 '16 at 06:49
you try is almost corre,t declare g out of the fonction with 0 value (var g = 0) and when you are in the if, change to g = 1 — Jax Teller, Jun 14 '16 at 06:50
I don't think you should be using the alert box at all. You should try something else such as a final element that states there are no more items to load below the final element. You could also remove this item if they try to scroll and there suddenly _is_ something new to load. — Nimphious, Jun 14 '16 at 06:50
You could also have a look at the answer here: http://stackoverflow.com/a/21567127/6049581 — Frits, Jun 14 '16 at 06:51

score 1 · Answer 1 · answered Jun 14 '16 at 06:49

1

You are initializing a new variable with scope inside the callback which value can't get on next callback, so update the global variable. Also it's better to use Boolean value instead of number.

if(!g){
  g = true;
  bootbox.alert('No more Post'); 
}

answered Jun 14 '16 at 06:49

Pranav C Balan

113,687
23
165
188

score 1 · Accepted Answer · answered Jun 14 '16 at 06:52

You're declaring g inside the scope. I've renamed it to showAlert for readability.

  // Declare outside of `loadMore()`.
  var showAlert = true; // True by default.

  function loadMore(){

    $(window).unbind('scroll.posts');
    $spinner.show();

    $.ajax({
      url: "/ajax/loadmore?lastPost="+ $(".pointer:last").attr('id'),
      success: function(html){
          if(html){
              $timeline.append(html);
              $spinner.hide();
          }else{
            $spinner.hide();
              if (showAlert)
              {
                  bootbox.alert('No more post available');
                  showAlert = false; // don't show no more.
              }
          }

          $(window).bind('scroll.posts',scrollEvent);
      }
    });
  }

score 0 · Answer 3 · answered Jun 14 '16 at 06:51

You have to declare g outside $(function(){ to make it global.

So your code will look like this:

var g = false;

$(function() {
    var $timeline = $('#tupdate'),
        $spinner = $('#loading').hide();

    function loadMore() {
        $(window).unbind('scroll.posts');
        $spinner.show();
        $.ajax({
            url: "/ajax/loadmore?lastPost=" + $(".pointer:last").attr('id'),
            success: function(html) {
                if (html) {
                    $timeline.append(html);
                    $spinner.hide();
                } else {
                    $spinner.hide();
                    if (!g) {
                        bootbox.alert('No more post available');
                    }
                }
                $(window).bind('scroll.posts', scrollEvent);
            }
        });
    }
    //lastAddedLiveFunc();
    $(window).bind('scroll.posts', scrollEvent);

    function scrollEvent() {
        var wintop = $(window).scrollTop(),
            docheight = $(document).height(),
            winheight = $(window).height();
        var scrolltrigger = 0.95;
        if ((wintop / (docheight - winheight)) > scrolltrigger) loadMore();
    }
});

score 0 · Answer 4 · answered Jun 14 '16 at 06:53

0

Remove var from

if(!g){
 g =1;
bootbox.alert('No more Post');

}

So g will be work as global variable.

answered Jun 14 '16 at 06:53

Dhaval Soni

205
2
14

How to show alert only once in jQuery

4 Answers4