Jump to content

The buttons aren't working past "Show More"


Chrisj

Recommended Posts

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

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.