Jump to content

The buttons aren't working past "Show More"


Chrisj
 Share

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

 

Edited by Chrisj
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

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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.