0

I'm using the ScrewDefaultButtons jQuery plugin to replace checkboxes w/ images. The plugin uses the following code to successfully hide the checkbox and replace it with a checked/unchecked image:

$('input:checkbox').screwDefaultButtons({ 
    image: "url(../../images/radio_check.png)",
    width:   14,
    height:  14
});

The issue I'm experiencing arises when trying to combine these custom checkboxes with a To-Do List plugin that uses a checkbox to mark items as completed. When an item is complete, the checkbox is ticked and the item gets moved to a "completed items" list via PHP and AJAX.

The above code successfully replaces the default checkbox w/ the custom image, but when the new checkbox is ticked, nothing occurs except the "unchecked" image changes to a "checked" image. With the default checkbox, an alert pops up confirming whether you want to move the item or not, and if confirmed, the item is moved.

The big question is: How do I get the ScrewDefaultButtons checkbox to work w/ my To-Do List's checkbox function?

This is the code for the checkbox:

Output of the default checkbox:

<td id="checkbox_parent">
    <input id="ctdl-1852" class="todo-checkbox uncompleted" type="checkbox"></input>
    <input type="hidden" value="a193d8dc3a" name="cleverness_todo_complete_nonce"></input>
</td>

Output of the ScrewDefaultButton checkbox:

<td id="checkbox_parent">
    <div class="todo-checkbox uncompleted styledCheckbox" style="background-image: url("../../images/radio_check.png"); width: 14px; height: 14px"> … </div>
    <input type="hidden" value="a193d8dc3a" name="cleverness_todo_complete_nonce"></input>
</td>

PHP:

protected function show_checkbox( $id, $completed = NULL, $layout = 'table', $single = '' ) {
    $permission = CTDL_Lib::check_permission( 'todo', 'complete' );
    if ( $permission === true ) {
        if ( is_admin() || $layout == 'table' ) $this->list .= '<td id="checkbox_parent">';
        if ( $completed == 1 ) {
            $this->list .= sprintf( '<input type="checkbox" id="ctdl-%d" class="todo-checkbox completed'.$single.'" checked="checked" />', esc_attr( $id ) );
        } else {
            $this->list .= sprintf( '<input type="checkbox" id="ctdl-%d" class="todo-checkbox uncompleted'.$single.'" />', esc_attr( $id ) );
        }
        $cleverness_todo_complete_nonce = wp_create_nonce( 'todocomplete' );
        $this->list .= '<input type="hidden" name="cleverness_todo_complete_nonce" value="'.esc_attr( $cleverness_todo_complete_nonce ).'" />';
        if ( is_admin() || $layout == 'table' ) $this->list .= '</td>';
    }
}

jQuery: (Note: adding .bind("click", function () { does not fix the issue)

$( '.todo-checkbox' ).click( function () {
    var confirmed = confirm( ctdl.CONFIRMATION_CHECK );
            if ( confirmed == false ) return false;
    var status = 1;
    var id = $( this ).attr( 'id' ).substr( 5 );
    var todoid = '#todo-' + id;
    var single = $ ( this ).hasClass( 'single' );
    if ($( this ).prop( 'checked' ) == false ) status = 0;

    var data = {
        action: 'cleverness_todo_complete',
        cleverness_id: id,
        cleverness_status: status,
        _ajax_nonce: ctdl.NONCE
    };

    jQuery.post( ctdl.AJAX_URL, data, function( response ) {
        if ( single != true ) {
                    $( todoid ).fadeOut( function () {
                        $( this ).remove();
                    });
            $( '.todo-checkbox' ).prop( "checked", false );
        }
    } );
} );

EDIT (07/28/13): Output with Hauke's first code:

<td id="checkbox_parent">
  <div class="todo-checkbox uncompleted styledCheckbox" style="background-image: url("../../images/radio_check.png"); width: 14px; height: 14px; cursor: pointer; background-position: 0px 0px;"> … </div>
  <input type="hidden" value="a81d045af8" name="cleverness_todo_complete_nonce"></input>
</td>

When the checkbox is clicked, the only difference in the output is the height of the background-position changes to -14px.

4
  • is your code or script where is code for call of "screwDefaultButtons" before $( '.todo-checkbox' ).click(), or after? If it is after, most likely, you don't have bound click event, because you have new DOM element attached, and yes, you do have css class needed for this event, but you will need either .bind('click',function(){}); or on.('click',function(){}); and just in case, put script before click event bind Commented Jul 25, 2013 at 6:41
  • It was after, but I just moved it before $( '.todo-checkbox' ).click(), and the alert prompt came up (which didn't happen before), but if I clicked OK to move the item, nothing happened. With .bind('click',function(){});, where do I place it?
    – eclipsis
    Commented Jul 25, 2013 at 6:51
  • try instead of .click(function() to place .bind('click',function() Commented Jul 25, 2013 at 6:54
  • Just tried that, same no action as before.
    – eclipsis
    Commented Jul 25, 2013 at 15:08

2 Answers 2

1
+50

ScrewDefaultButtons creates a wrapper HTML element around the actual input element. Therefore, you can't rely on this being the neccessary input element when using it inside the click event handler. Instead, you'll have to find the input element first. You can accomplish this by doing something like this:

var inputElement;
if( $( this ).is( 'input' ) )
    inputElement = $( this );
else
    inputElement = $( this ).children().first();

With the inputElement found, you can get its id etc. then:

var id = inputElement.attr( 'id' ).substr( 5 );   
var todoid = '#todo-' + id;
var single = inputElement.hasClass( 'single' );
if (inputElement.prop( 'checked' ) == false ) status = 0;

To test this, I created a small jsFiddle here: http://jsfiddle.net/Q8s96/3/


EDIT: In the jsFiddle I did not deal with this line:

$( '.todo-checkbox' ).prop( "checked", false );

You'll have to replace it with something that first detects if ScrewDefaultButtons was applied to the checkbox. If it was applied, you'll have to change the checked property of its first child. If it was not applied, you can directly change the checked property.

Something like this:

$( '.todo-checkbox' ).each( function () {
    if( $( this ).is( "input" ) )
        $( this ).prop( "checked", false );
    else
        $( this ).children().first().prop( "checked", false );
});
0
0

Try replacing $( '.todo-checkbox' ).click( function () { with $(document).on("click", '.todo-checkbox', function { (assuming you have jQuery 1.7+):

$(document).on('click', '.todo-checkbox', function {
    var confirmed = confirm( ctdl.CONFIRMATION_CHECK );
            if ( confirmed == false ) return false;
    var status = 1;
    var id = $( this ).attr( 'id' ).substr( 5 );
    var todoid = '#todo-' + id;
    var single = $ ( this ).hasClass( 'single' );
    if ($( this ).prop( 'checked' ) == false ) status = 0;

    var data = {
        action: 'cleverness_todo_complete',
        cleverness_id: id,
        cleverness_status: status,
        _ajax_nonce: ctdl.NONCE
    };

    jQuery.post( ctdl.AJAX_URL, data, function( response ) {
        if ( single != true ) {
                    $( todoid ).fadeOut( function () {
                        $( this ).remove();
                    });
            $( '.todo-checkbox' ).prop( "checked", false );
        }
    } );
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.