Hiding a button when maximum is reached: Jquery

Question

I have the following button that is used to View More Friends in increments of 16:

<button class="cancel auto-btn hide-btn" id="viewAllFriends" style="display: visible;">View All Friends</button>

It's initial display is given with this:

var username = '<?php echo $username; ?>';
var num_friends = '<?php echo $num_friends; ?>';
var counter = 8;

$(document).ready(function(){

    <?php if ($num_friends > 8): ?>
    $("viewAllFriends").attr('style', 'display: visible;');

    $("#viewAllFriends").click(function(){
        counter = counter+16;

            $.ajax({

                url:'includes/handlers/ajax_load_profile_friends.php',
                type:'POST',
                data:{'username':username, 'num_friends':num_friends, 'counter':counter},

                    success: function(data) {
                        $('#data_friends').html(data);
                            }
                    });
            });
    <?php else: ?>   
        $("#viewAllFriends").attr('style', 'display: none;');
    <?php endif; ?>
});

The button displays if a user has more than 8 friends or does not if there is less than 8. When ajax_load_profile_friends.php gets to the end, I have a hidden tag that echos on the page.

$max = "<p id='max' hidden>$num_rows</p>";
echo "$max";

The html output looks like this: <p id="max" hidden="">43</p>

This hidden tag doesn't appear on the page until the last query. What I'm trying to do, is when 43 appears (which in this example indicates that there are no more friends to load) is remove the View More friends button from view.

This is what I've tried:

var friend_count = '<?php echo $num_friends; ?>';
var max = ("max").text();

if (max = friend_count) {
    $("#viewAllFriends").remove();

}

Sadly this isn't working - the button remains. Everything else works fine, but this final detail. I'm not so great at jQuery, so I'm wondering if the ajax is overriding this script, or if I'm possibly not getting the data in var max? Any help, links, examples would be appreciated.

Where in your code do you have your max count and test (if (max = friend_count) {, etc)? — Don't Panic
– Don't Panic, Commented Feb 26, 2019 at 0:43
Also, can you clarify what When ajax_load_profile_friends.php gets to the end, I have a hidden tag that echos on the page means, exactly? How does the max element get added to the page? Can you edit your question and show that code? — Don't Panic
– Don't Panic, Commented Feb 26, 2019 at 0:46
It's coming from ajax_load_profile_friends.php and now being echoed onto the page in last query with $max = "<input id='max' type='hidden' value='$num_rows'>"; echo "$max"; The html value on the page is displaying as 43. — Raylene
– Raylene, Commented Feb 26, 2019 at 0:47
So it is just part of the data passed to your AJAX success handler? — Don't Panic
– Don't Panic, Commented Feb 26, 2019 at 0:48
Yes. It will complicate things to post all the code, but it evaluates correctly, and yes get's passed as part of the data in success handler. It appears on the page ONLY in the last query which is an additional indicator that it's working correctly. It's also displaying the correct number. I just want to grab it and hide() the button somehow. — Raylene
– Raylene, Commented Feb 26, 2019 at 0:51

user2915350 · Accepted Answer · 2019-02-26 00:08:42Z

0

I can try

$('#viewAllFriends').hide();

http://api.jquery.com/hide/

instead

$("#viewAllFriends").remove();

answered Feb 26, 2019 at 0:08

user2915350

1457 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raylene Over a year ago

Tried this, but didn't work. Same result - the button remains.

Raylene Over a year ago

I thought it might be display: visible which is an error. So I switched this to display: block then display: none. But it's stubborn.

gfcodix · Accepted Answer · 2019-02-26 00:15:15Z

0

The solution could be like this.

First update ajax_load_profile_friends.php

$max = "<input id='max' type='hidden' value='".$num_rows."'>";
echo "$max";

Then in your script

var friend_count = '<?php echo $num_friends; ?>';
var max = $("#max").val();

if (max >= friend_count) {
    $("#viewAllFriends").hide();

}

answered Feb 26, 2019 at 0:15

gfcodix

1815 bronze badges

1 Comment

Raylene Over a year ago

The input is showing up on the page with a value of 43, so this works fine, but #viewAllFriends is still not hiding.

Collectives™ on Stack Overflow

Hiding a button when maximum is reached: Jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related