Help with hiding button until triggered

JavaScript
1

The web video script that I’m using has a ‘View All’ button, when a video is chosen by selecting a “View” button under the each thumbnail. This “View All” button is supposed hide and only appear upon clicking a View button. But, it appears when the page displays. I am looking for help to get this button to hide until a View button is selected.

Here is the html:

<button class="btn btn-main" data-action="multiple-buy-video" onclick="PT_MultipleBuyVideo();">View all</button>

Here is the relevant javascript code:

function PT_MultipleBuyVideo() {
    var checked = getSelectedVideos();
    if (!checked) { return false; }

    swal({
        title: "",
        type: "info",
        html:"Simply proceed to purchase " + countSelectedVideos() + " video(s) at a total cost of " + countTotalCredits() +" credits",
        showCancelButton: true,
        cancelButtonText: "Close",
        customClass: 'sweetalert-lg',
        confirmButtonText:'Proceed'
    }).then(function(){

        $.ajax({
            url: PT_Ajax_Requests_File() + 'aj/buy-video',
            type: 'POST',
            dataType: 'json',
            data: {id:checked},
        }).done(function(data){
            if (data.status == 200) {
                for (var i = 0; i < checked.length; i++) {
                    var button = $("button[data-action='multiple_select_button'][data-id='" + checked[i] + "']")
                    buttonMultipleSelectingStyle(button, 'purchased');
                }

                swal({
                    title: "Success",
                    type: "success",
                    html:"",
                    showCancelButton: true,
                    cancelButtonText: "Close",
                    customClass: 'sweetalert-lg',
                    confirmButtonText:'Go To Video(s)'
                }).then(function(){
                    window.location.href='/paid-list';
                });

            } else {
                if (data.error_num == 1) {
                    swal(
                        'Error!',
                        'Not enough money!!!',
                        'error'
                    );
                } else {
                    swal(
                        'Error!',
                        'Please log in!',
                        'error'
                    );
                }
            }
        }).fail(function() {
            swal(
                'Error!',
                'Something went wrong. Please try again later!!',
                'error'
            );
        })
    });
}

function buttonMultipleBuy(command) {
    var button = $("button[data-action='multiple-buy-video']");
    if (command == 'hide') {
        button.hide();
    } else if (command == 'show') {
        button.show();
    }
}

buttonMultipleBuy('hide');

$(document).on('click touchstart', "button[data-action='multiple_select_button']", function(){
    if ($(this).attr('data-selected') == 1) {
        // uncheck
        buttonMultipleSelectingStyle($(this), 'uncheck');
    } else {
        // check
        buttonMultipleSelectingStyle($(this), 'check');
    }

    if (countSelectedVideos()) {
        buttonMultipleBuy('show');
    } else {
        buttonMultipleBuy('hide');
    }
});

function countSelectedVideos() {
    var checked = 0;
    $("button[data-action='multiple_select_button']").each(function(i){
        if ($(this).attr('data-selected') == 1) {
            checked++;
        }
    });
    return checked;
}

function getSelectedVideos() {
    var checked = [];
    $("button[data-action='multiple_select_button']").each(function(i){
        if ($(this).attr('data-selected') == 1) {
            checked.push($(this).attr('data-id'));
        }
    });
    return checked;
}

function countTotalCredits() {
    var total=0;
    $(".video-wrapper").each(function(i){
        if ($(this).find("[data-action='multiple_select_button']").first().attr('data-selected') == 1) {
            total += Number($(this).attr('data-price'));
        }
    });
return total;
}


function buttonMultipleSelectingStyle(button, action) {
    if (action == 'check') {
        button.attr('data-selected', 1);
        button.css('backgroundColor', '#FF4500');
        button.html('Selected');
    } else if (action == 'uncheck') {
        button.attr('data-selected', 0);
        button.css('backgroundColor', '#04abf2');
        button.html('View');
    } else if (action == 'purchased') {
        button.attr('data-selected', 0);
        button.css('backgroundColor', '#04abf2');
        button.html('Purchased');
        button.attr('disabled', 'disabled');
    }
}

Any help is appreciated

2

Well unhelpfully, it works for me. https://jsfiddle.net/pmw57/6fbpk02a/

Line 73 of the JavaScript successfully hides the button.

3

Thanks for your reply.

Yes, it stays hidden if I link to the page from the home page, but doesn’t hide if I link to the page via the drop down list. Being that I’ve spent too much time already trying to solve this mystery. Can you suggest something that I might add to the html that would hide it until clicked?

I look forward to any suggestion

4

I suggest that you move the code that needs to run on both page load and from the dropdown list, into a separate function. That way you can call that function both on page load, and when linking to the dropdown list page.

Further details are unavailable due to lack of existing implementation information.

5

Thanks again for your reply.
I’m sure that is great advice. But, I don’t know how to do what you’re suggesting

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.