The buttons aren't working past "Show More"

[Chrisj]

The php web video script that I'm using displays a page of searched results (thumbnail images) with a 'View' button underneath each one. When the 'View' button(s) is selected the button(s) changes from "View" to "Selected", and then a separate "View All Selected" button is used to proceed. The issue I'm having is, when the page of searched list is initially displayed all "View" buttons can be selected, however, if you select the "Show More" button at the bottom of the page, to display more of the searched results, all have a "View" button, but none are selectable. In other words, when these "View" buttons are clicked, these buttons don't change to "Selected" (only the initial page - not the 'Show More" part of the page). Here is a file pertaining to this page:

<div class="content pt_shadow">
	<div class="col-md-12">
		<div class="upload-head">
			<div style="float: right;">
				<button class="btn btn-main" data-action="multuple-buy-video" onclick="PT_MultipleBuyVideo();">View all selected</button>
			</div>
			<h4><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> {{LANG search_results}}: {{KEYWORD}}</h4>
			<hr>
		</div>
		<div class="videos-latest-list row">
      		{{VIDEOS}}
		</div>
		<?php if (count($pt->videos) > 0 && empty($_GET['is_channel'])) { ?>
            <div class="watch-video-show-more desc load-more" data-type="search" data-keyword="{{KEYWORD}}">
                {{LANG show_more}}
            </div>
		<?php } ?>

		<div class="clear"></div>
	</div>

	<div class="clear"></div>
</div>

Can you provide some suggestions or coding example of what needs to be modified to get the Show More results to also be available to Select?

Any help is appreciated

 

Edited November 20, 2018 by Chrisj

[Barand]

Your problem is with the "View" buttons but I don't see any code for those. How and when are you setting the "on click" for them? And how and when are you dong that for those added after "Show More" is clicked?

[Chrisj]

Thanks for you reply.

Here is the page html:

 

<div class="col-md-3 col-sm-6 no-padding-right-at-all no-padding-mobile-left">
	<div class="video-latest-list video-wrapper" data-id="{{ID}}" data-views="{{VIEWS}}">
		<div class="video-thumb">
			<img src="{{THUMBNAIL}}" alt="{{TITLE}}">
			<div class="video-duration">{{DURATION}}</div>
		</div>
		<div class="video-title">
			<h4 title="{{TITLE}}">{{TITLE}}</h4>
		</div>
		<div class="video-info">
			<div style="float:right;"><button class="btn btn-main" data-action="multiple_select_button" data-selected="0" data-id="{{ID}}">View</button></div>
		</div>
	</div>
</div>

 

[Barand]

There is no on-click event defined, so how does its text change to "Selected"

[Chrisj]

I received help with this, and that helper is not currently available. But I'm guessing it has to do with the script.js file and this portion of it:

 

 

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

    swal({
        title: "",
        type: "info",
        html:"Simply proceed to purchase " + countSelectedVideos() + " videos",
        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!',
                        'Something went wrong. Please try again later!',
                        'error'
                    );
                }
            }
        }).fail(function() {
            swal(
                'Error!',
                'Something went wrong. Please try again later!',
                'error'
            );
        })
    });
}

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

buttonMultipleBuy('hide');

$("button[data-action='multiple_select_button']").click(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 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 additional help is appreciated

[Barand]

I couldn't tell from that as I don't know the timing of the calls, but here's what may be happening

• Page loads
• on click events assigned to (existing) View buttons
• Show More is clicked and new View buttons added

However, these new buttons have no onclick events, so the onclick events for View buttons have to be reassigned so the new ones are included

[Chrisj]

Thanks again. How do I "onclick events for View buttons have to be reassigned ", would it be a modification to the code I posted in my initial request here?