CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Aston
Aston

Reputation: 199

jquery: Hide button when page = 1

I have a next and previous page function using jquery. what I want to do is hide the previous button when the page = 1. I haven tried to create an if/else function but doesn't work. I hope you can help me and thank you for your time.

Below is my current jquery code:

$('document').ready(function () {
    var $wrap = $('#wrap'),
        page = 1;
    $('#next').on('click', function () {
        getPage(++page);
    });
    $('#prev').on('click', function () {
        getPage(--page);
    });
    var getPage = function (page) {
        $wrap.load('site/proxy.php?page=' +     page + ' #postsArea');
    };
    getPage(page);
});

Below is my HTML code:

<body>
    <div id="wrap" style="overflow-y: scroll; height:800px; width:480px;"></div>
    <button type="button" id="next">Next</button>
    <button type="button" id="prev">Previous</button>
</body>

Below is the jquery code I badly created:

if ((page)= 1) {
    $('input[id=prev]')
        .click(

    function () {
        $(this).hide();
    });
} else {
    $('input[id=prev]')
        .click(

    function () {
        $(this).show();
    });
}

Below is working jquery code:

$('document').ready(function () {
    var $wrap = $('#wrap'),
        page = 1;

    $('#next').on('click', function () {
        getPage(++page);
    });
    $('#prev').on('click', function () {
        getPage(--page);
    });
    var getPage = function (page) {
        $wrap.load('site/proxy.php?page=' +     page + ' #postsArea');
        if (page == 1) {
            $("#prev").hide();

        } else {
            $('#prev').show();
        }

    };
    getPage(page);

});

Upvotes: 1

Views: 136

Answers (5)

Awlad Liton
Awlad Liton

Reputation: 9351

Try this js:

DEMO: http://jsfiddle.net/c5bA4/7/

        $('document').ready(function () {
            var $wrap = $('#wrap'),
                page = 1;
    
            $('#next').on('click', function () {
                getPage(++page);
            });
            $('#prev').on('click', function () {
                getPage(--page);
            });
            var getPage = function (page) {
                $wrap.load('site/proxy.php?page=' +     page + ' #postsArea');
                if (page == 1) {
                    $("#prev").hide();
    
                } else {
                    $('#prev').show();
                }
    
            };
            getPage(page);
    
        });

Upvotes: 1

niko
niko

Reputation: 9393

Well. as you have asked to make it invisible when page == 1 you could simply put it inside the click event of `#prev' 

 $('#prev').on('click', function () {
     if(--page <= 1 ) $(this).hide() 
     getPage(page);
 });

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74410

Well, why not just:

var getPage = function (page) {
        $wrap.load('site/proxy.php?page=' +     page + ' #postsArea');
        $('#prev').toggle(page !== 1);
    };

You could set code inside load() complete callback but i don't see any reason here.

Upvotes: 1

udit bansal
udit bansal

Reputation: 106

make a single click handler and use the page type condition within it.

$('input[id=prev]')
        .click(

    function () {
    if (page == 1) {
        $(this).hide();
        }
    else {
        $(this).show();
    }
});

Upvotes: 1

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385405

if ((page)= 1) is doubtless wrong. Perhaps you meant if (page == 1).

  • = performs assignment
  • == performs a check for (loose) equality

Upvotes: 3

Related Questions