0

Ive been fooling around with both Jquery and PHP and Im trying to setup a website for a sports team. I've created a custom post type called "Matches" and in there I've created two Custom Meta Boxes. One for the match details (IE home and away team) and one for match stats (goals, shots etc.). What I currently have is a (Is This Game Complete) checkbox that shows/hides the statistics options (that are in a Div #meta_box_stats) in the Meta Box Details (#dw_match_details).

The checkbox data value is saving but it isn't functioning quite properly. If it's checked as complete upon loading to edit and the value is set to 'on' it still won't show the stats meta box when I try to edit the post, I have to click it off and then click it on again. Here is my code (as brief as possible cause theres a lot going on).

This is working, as I've done a var_dump on check and it changes accordingly to on or off and either shows the check or not.

I want the stats to be hidden initially until the gamescore is entered. Once entered and checked as complete it should always show when you edit the page...I just cant figure out why it isnt.

Here is My script

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#dw_match_stats").hide();
        $('#dw_match_details').on('change', '#dw_complete', function() {            
            played = $(this).prop('checked');
            if (played) {
                $('#dw_match_stats').show();
            } else {
                $('#dw_match_stats').hide();
            }
        });
        $('#dw_match_stats').change();
    });
</script> 

As mentioned the custom data value "dw_complete" is saving and changing properly.

EDIT: Here is some of the remaining code. I've essentially created two meta boxes, one called #dw_match_details which has the team selection and the checkbox on whether or not the game is complete.

<div id="dw_match_details" class="postbox ">
<div class="handlediv" title="Click to toggle"><br></div><h3 class="hndle"><span>Match Details</span></h3>
<div class="inside">

<?php 
$values = get_post_custom( $post->ID );
$check =  $values['dw_complete'][0];
?>

<input type="checkbox" id="dw_complete" name="dw_complete" <?php checked( $check, 'on', true ); ?> />  
<label for="dw_complete">Is This Game Complete?</label>

Then I have my stats metabox.

<div id="dw_match_display" class="postbox">
<div class="inside">
<div id="dw_game_stats" class="tabs-panel">
<div width="50%" style="float:left;margin-right:10%;">
<strong>Goals Per Period:</strong>  
    <table>
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>1st</th>
                <th>2nd</th>
                <th>3rd</th>
                <th>OT</th>
                <th>Total</th>
            </tr>
        </thead>
    </table>
</div>

That's the gist of it, I obviously have more information going on for the stats section but think it should be irrelevant. If you need me to post that I can or Ill put it in a PasteBin. Before I forget here are the two calls to create my meta boxes.

function dw_custom_meta_boxes_match() {
add_meta_box( 'dw_match_details', 'Match Details', 'dw_match_details', 'dw_match', 'normal', 'high' );
add_meta_box('dw_match_display', 'Match Statistics', 'dw_match_display', 'dw_match', 'normal', 'low' );
  • Your code uses #dw_match_stats and #dw_match_details, but you didn't provide matching example markup. Can you edit your post to show all the relevant markup in the first box? The idea is to allow us to set up a test to test your code. We can't do that without all the relevant markup. – Charles Clarkson Jul 20 '13 at 5:54
  • Added the code thats being displayed for the creation of the Meta boxes. I'm not sure if a screen shot would help either if I can that I will. – Phrosty30 Jul 22 '13 at 16:43
  • Thanks, I think I can grasp what you have. The #dw_match_stats HTML is still not present. It is used in the jQuery call $('#dw_match_stats').change(); and there are several missing closing divs </div> in the markup you provided. A screen shot of text would probably not be useful. – Charles Clarkson Jul 23 '13 at 0:10
1

Found a solution to it though, pretty simple

<script type="text/javascript">

jQuery(document).ready(function($) {
    var dw_match_display = $('#dw_match_display');
    dw_match_display.hide();
    if ($('#dw_complete').prop('checked') ) {
        dw_match_display.show();
    }

    $( '#dw_match_details' ).on( 'change', '#dw_complete', function() {
        dw_match_display.hide();
            if ( $(this).prop('checked') ) {
                dw_match_display.show();
            } 
        });
    });
jQuery(document).ready(function($) {
    $( '#dw_match_display' ).change();
});

</script>
0

I simplified your code by removing the WordPress stuff and removing some of your markup. I found it still didn't run the change event until I did it this way:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Testing jQuery</title>
        <script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {

                $( '#dw_match_display' ).on( 'change', '#dw_complete', function() {

                    $( '#dw_match_details' ).hide();

                    // These 2 lines should be removed in production.
                    var change_status = $(this).prop('checked') ? 'shown' : 'hidden';
                    alert( "In Change Event\n\n Match Display will be " + change_status + '.' );

                    if ( $(this).prop('checked') ) {
                        $( '#dw_match_details' ).show();
                    }
                });
            });

            jQuery(document).ready(function($) {
                $( '#dw_complete' ).change();
            });

        </script>
    </head>
    <body>
        <div id="dw_match_display" class="postbox ">

            <input type="checkbox" id="dw_complete" name="dw_complete" checked="checked" />
            <label for="dw_complete"> Show Match Details</label>

            <div id="dw_match_details" class="postbox">
                [This data should be seen when the page loads.]
            </div><!-- end #dw_match_details -->

        </div><!-- end #dw_match_display -->
    </body>
</html>

I added an alert box so you could see that the change event runs when the page loads. I don't know why the second call to jQuery(document).ready works. I only tried it on a lark. :)

This tests the page when the check box is checked. To check the page when the box is not checked change this line:

<input type="checkbox" id="dw_complete" name="dw_complete" checked="checked" />

To this:

<input type="checkbox" id="dw_complete" name="dw_complete" />

So, try changing your jQuery code to this:

jQuery(document).ready(function($) {
    $('#dw_match_details').on('change', '#dw_complete', function() {
        played = $(this).prop('checked');
        if (played) {
            $('#dw_match_stats').show();
        } else {
            $('#dw_match_stats').hide();
        }
    });
});

jQuery(document).ready(function($) {
    $('#dw_match_stats').change();
});
  • THe script itself works, still not solving the problem I'm having of if the checkbox isnt checked don't show the DW_match_stats metabox after initial page load. Clicking the box while I edit the page works flawlessly though. – Phrosty30 Aug 1 '13 at 19:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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