CODEWITHSUNDEEP
javascriptphpjqueryajaxwordpress
kma1289
kma1289

Reputation: 109

Refresh entire contents of div container upon a dropdown selection

I am using a sports WordPress plugin that generates content for that sport based on shortcode that is placed in a page. Right now it is set up by default so that you have to set up a page for every sport and insert that sports shortcode but what I am trying to do is set up a dropdown menu instead on one single page that lists all the sports and upon selection it will display the generated shortcode data for that sport.

The problem I am running into is the data does not refresh or even regenerate upon a new selection from the dropdown. In fact upon selecting the first dropdown it does display generated content but it is random content and I have no idea why. I placed each type of short code in it's own div container and the div does switch out the titles of the sports upon selection but the data does not change or even load. Do I just need the div to refresh as if someone was clicking on a new link to a page to get the content to load? Not sure what I am missing. Can someone please take a look and help me out? Thanks!

I included all the code just for reference sake and here is the current url of what is happening: https://wsplays-members.com/results/ Obviously a membership is needed to view any specific sport content but the php generated message should still display upon selecting any sport and right now it only does for the first menu selection. Again thank you.

Wordpress page code:

<select class="div-toggle" data-target=".my-info-1">
    <option value="">Select a sport</option>
    <option value="content_1" data-show=".nfl-results">NFL Football</option>
    <option value="content_2" data-show=".ncaafoot-results">NCAA Football</option>
    <option value="content_3" data-show=".cfl-results">CFL Football</option>
    <option value="content_4" data-show=".nba-results">NBA Basketball</option>
    <option value="content_5" data-show=".ncaabasket-results">NCAA Basketball</option>
    <option value="content_6" data-show=".mlb-results">MLB Baseball</option>
<select>

<div class="my-info-1">
<div id="content_1" class="nfl-results inv">
<!--AUTHORIZED TO VIEW NFL Football DETAILED PICKS RECORDS CONTENT GO HERE-->
[membership level="1,2,3,12,23,37,41,42,44,45,46,47"]
[get_biddata type='current' sport='NFL Football'][/get_biddata]
[get_biddata type='past' sport='NFL Football'][/get_biddata]
[get_biddata type='detailed' sport='NFL Football'][/get_biddata]
[/membership]
<!--HIDE DEFAULT MESSAGE FOR ALL LEVELS WHEN LOGGED IN-->
[membership]
[get_biddata type='defaultMessage' sport='NFL Football'][/get_biddata]
</div>

<div id="content_2" class="ncaafoot-results inv">
<!--AUTHORIZED TO VIEW NCAA Football DETAILED PICKS RECORDS CONTENT GO HERE-->
[membership level="1,2,3,12,23,37,41,42,44,45,46,47"]
[get_biddata type='current' sport='NCAA Football'][/get_biddata]
[get_biddata type='past' sport='NCAA Football'][/get_biddata]
[get_biddata type='detailed' sport='NCAA Football'][/get_biddata]
[/membership]
<!--HIDE DEFAULT MESSAGE FOR ALL LEVELS WHEN LOGGED IN-->
[membership]
[get_biddata type='defaultMessage' sport='NCAA Football'][/get_biddata]
</div>

<div id="content_3" class="cfl-results inv">
<!--AUTHORIZED TO VIEW CFL Football DETAILED PICKS RECORDS CONTENT GO HERE-->
[membership level="1,2,3,12,23,37,41,42,44,45,46,47"]
[get_biddata type='current' sport='CFL Football'][/get_biddata]
[get_biddata type='past' sport='CFL Football'][/get_biddata]
[get_biddata type='detailed' sport='CFL Football'][/get_biddata]
[/membership]
<!--HIDE DEFAULT MESSAGE FOR ALL LEVELS WHEN LOGGED IN-->
[membership]
[get_biddata type='defaultMessage' sport='CFL Football'][/get_biddata]
</div>

<div id="content_4" class="nba-results inv">
<!--AUTHORIZED TO VIEW NBA Basketball DETAILED PICKS RECORDS CONTENT GO HERE-->
[membership level="1,2,3,12,23,37,41,42,44,45,46,47"]
[get_biddata type='current' sport='NBA Basketball'][/get_biddata]
[get_biddata type='past' sport='NBA Basketball'][/get_biddata]
[get_biddata type='detailed' sport='NBA Basketball'][/get_biddata]
[/membership]
<!--HIDE DEFAULT MESSAGE FOR ALL LEVELS WHEN LOGGED IN-->
[membership]
[get_biddata type='defaultMessage' sport='NBA Basketball'][/get_biddata]
</div>

<div id="content_5" class="ncaabasket-results inv">
<!--AUTHORIZED TO VIEW NCAA Basketball DETAILED PICKS RECORDS CONTENT GO HERE-->
[membership level="1,2,3,12,23,37,41,42,44,45,46,47"]
[get_biddata type='current' sport='NCAA Basketball'][/get_biddata]
[get_biddata type='past' sport='NCAA Basketball'][/get_biddata]
[get_biddata type='detailed' sport='NCAA Basketball'][/get_biddata]
[/membership]
<!--HIDE DEFAULT MESSAGE FOR ALL LEVELS WHEN LOGGED IN-->
[membership]
[get_biddata type='defaultMessage' sport='NCAA Basketball'][/get_biddata]
</div>

<div id="content_6" class="mlb-results inv">
<!--AUTHORIZED TO VIEW MLB Baseball DETAILED PICKS RECORDS CONTENT GO HERE-->
[membership level="1,2,3,12,23,37,41,42,44,45,46,47"]
[get_biddata type='current' sport='MLB Baseball'][/get_biddata]
[get_biddata type='past' sport='MLB Baseball'][/get_biddata]
[get_biddata type='detailed' sport='MLB Baseball'][/get_biddata]
[/membership]
<!--HIDE DEFAULT MESSAGE FOR ALL LEVELS WHEN LOGGED IN-->
[membership]
[get_biddata type='defaultMessage' sport='MLB Baseball'][/get_biddata]
</div>
</div>

PHP Code

<?php
function memberresults($sport_val,$data_type){
global $wpdb;
  $bidsys_options = get_option('bidsys_options');
   for($i=1;$i<11;$i++){
        if($bidsys_options->sportsstatus[$i]!="Disabled"){
             if($sport_val==$bidsys_options->sportsname[$i])
             $sport = $i;
   }}
  $user = get_current_user_id();
  $currentsportaccess =   get_user_meta($user,"sport_".$sport ,true);
    if($currentsportaccess=="No"){
        ?>
        <div class="pmpro_content_message">Your access plan is valid but does not give you access to view this section.<br /> You may <a href="<?=home_url();?>/purchase/">purchase another access plan here</a>.</div>
        <?php

    } else {


    if($data_type=="current"){
     if (pmpro_hasMembershipLevel() ) {
   ?>
   <script type='text/javascript'>
jQuery(document).ready(function(){
    memberresults("current","<?php echo $sport;?>","");
});
</script>
<h1 class="post-title"><?php echo $sport_val; ?> Picks</h1>
<h2 class="post-title">Current Season</h2>
<table class='inner_result'>
<td colspan='5' >
<table id='member_<?=$data_type;?>season_vals_inner' class='hdr_3 inner_result'>
</table>
</td>
</table>
   <?php
        } else {

            ?>
        <h1 class="post-title"><?php echo $sport_val; ?> Picks</h1>
        <h2 class="post-title">Current Season Record</h2>
        <div class="pmpro_content_message">You must be logged in to view this section.  Please <a href="<?=home_url();?>/login/">log in</a> or <a href="<?=home_url();?>/register/">register here</a>.</div>
        <?php

        }
    } else  if($data_type=="past"){
     if (pmpro_hasMembershipLevel() ) {

    $result = "SELECT * FROM ".$wpdb->prefix."bidsys_sport_seasons WHERE sport=  '".$sport."' AND current_season = 'NO'   ORDER BY start_date DESC";
     $newmeta = $wpdb->get_results($result);
    ?>
<script type='text/javascript'>
jQuery(document).ready(function(){
    memberresults("past","<?php echo $sport;?>","season_<?php echo $newmeta[0]->id;?>");
});
</script>
<h1 class="post-title"><?php echo $sport_val; ?> Picks</h1>
<h2 class="post-title">Previous Seasons</h2>
    <form action='' method='post' class="f_p_filter_frm outside_table">
    <select  name='f_p_filter' class="f_p_filter" onchange='memberresults("past","<?php echo $sport; ?>",this.value)' >
    <?php $i = 0; foreach($newmeta as $seasons ){
        if($i == 0){  $sel =  'selected=""'; } else { $sel = ""; }
        ?>
    <option value='season_<?php echo $seasons->id;?>' <?php echo $sel;?>><?php echo $seasons->season_name;?></option>
    <?php $i++; } ?>
    </select>
    </form>

<table class='inner_result'>
<td colspan='5' >
<table id='member_<?=$data_type;?>season_vals_inner' class='hdr_3'>
</table>
</td>
</table>
   <?php
        } else {

            ?>
        <h1 class="post-title"><?php echo $sport_val; ?> Picks</h1>
        <h2 class="post-title">Previous Seasons Records</h2>
        <div class="pmpro_content_message">You must be logged in to view this section.  Please <a href="<?=home_url();?>/login/">log in</a> or <a href="<?=home_url();?>/register/">register here</a>.</div>
        <?php

        }

    } else  if($data_type=="detailed"){
     if (pmpro_hasMembershipLevel() ) {
   ?>
   <script type='text/javascript'>
jQuery(document).ready(function(){
    memberresults("detailed","<?php echo $sport;?>","yesterday");
});
</script>
<style>
.imgwin {
    background: url('/wp-content/plugins/bid-sys/customgif/winningPick.gif');
     height: 16px; width: 16px; margin:8px;
}
.imgloss {
    background: url('/wp-content/plugins/bid-sys/customgif/losingPick.gif');
     height: 16px;  width: 16px;  margin:8px;
}
.imgpush {
    background: url('/wp-content/plugins/bid-sys/customgif/pushedPick.gif');
     height: 16px;  width: 16px; margin:8px;
}

</style>
<h1 class="post-title"><?php echo $sport_val; ?> Picks</h1>
<h2 class="post-title">Detailed History</h2>
<form action='' method='post' class="f_p_filter_frm outside_table">
    <select  name='f_p_filter' class="f_p_filter" onchange='memberresults("detailed","<?php echo $sport; ?>",this.value)' >
    <?php
    $result = "SELECT * FROM ".$wpdb->prefix."bidsys_sport_seasons WHERE sport=  '".$sport."' AND current_season = 'NO'   ORDER BY start_date DESC";
     $newmeta = $wpdb->get_results($result);

    foreach($newmeta as $seasons ){
        ?>
    <option value='season_<?php echo $seasons->id;?>' ><?php echo $seasons->season_name;?></option>
    <?php  }
    ?>
    <option value='playoftheday30' >Play of the Day (L30 Days)</option>
    <option value='playoftheday365' >Play of the Day (L365 Days)</option>
    <option value='latebreakingplay30' >VIP Late Info Play (L30 Days)</option>
    <option value='latebreakingplay365' >VIP Late Info Play (L365 Days)</option>
    <option value='vipplays30' >VIP Plays (L30 Days)</option>
    <option value='vipplays365' >VIP Plays (L365 Days)</option>
    <option value='yesterday' selected="">Yesterday</option>
    <option value='past7days' >Past 7 Days</option>
    <option value='past30days' >Past 30 Days</option>
    <option value='current' >Current Season</option>
    <option value='past365days' >Past 365 Days</option>
    </select>
    </form>
<div style="width: 56px; float: right; background: #F8F8F8;"><img src="/wp-content/plugins/bid-sys/customgif/pushedPick.gif" />  Push</div><div style=" margin: -2px 3% 0; padding-bottom: 2px; float: right;">|</div>
<div style="width: 56px; float: right; background: #F8F8F8;"><img src="/wp-content/plugins/bid-sys/customgif/losingPick.gif" />  Loss</div><div style=" margin: -2px 3% 0; padding-bottom: 2px; float: right;">|</div>
<div style="width: 48px; float: right; background: #F8F8F8;"><img src="/wp-content/plugins/bid-sys/customgif/winningPick.gif" />  Win</div>
<table class='inner_result detailed_history'> 
<tr class="hdr_2">
<td>Game Date</td>
<td colspan="2">Game/Pick Details</td>
<td>Result</td>
<td>Unit Change</td>
</tr>
<table id='member_<?=$data_type;?>season_vals_inner' class='hdr_3'>
</table>
</table>
   <?php
        } else {

            ?>
        <h1 class="post-title"><?php echo $sport_val; ?> Picks</h1>
        <h2 class="post-title">Detailed History</h2>
        <div class="pmpro_content_message">You must be logged in to view this section.  Please <a href="<?=home_url();?>/login/">log in</a> or <a href="<?=home_url();?>/register/">register here</a>.</div>
        <?php

        }

    } else  if($data_type=="pending"){
      if (pmpro_hasMembershipLevel() ) {
   ?>
<script type='text/javascript'>
jQuery(document).ready(function(){
    memberresults("pending","<?php echo $sport;?>","");
});
</script>
<h1 class="post-title">Today's <?php echo $sport_val; ?> Picks</h1>
<table id='member_<?=$data_type;?>season_vals_inner' class='hdr_3'>
</table>
   <?php 
      }
        } else  if($data_type=="unauthorized"){
            if (pmpro_hasMembershipLevel() ) {
        ?>
<h1 class="post-title">Today's <?php echo $sport_val; ?> Picks</h1>
<div class="members-only">
Picks posted here are for <strong>PAID MEMBERS ONLY</strong>.<br> Your current membership level is not authorized to view this section.</strong><br> <a href="<?=home_url();?>/subscription-options/">Click Here</a> to upgrade your membership and view today's <?php echo $sport_val; ?> picks.</p></div>
        <?php
        }
      }

        else if($data_type=="defaultMessage"){
            if (pmpro_hasMembershipLevel() ) {
        ?>
        <!--INTENTIONALLY LEFT BLANK SO WHEN A MEMBER LOGS IN THE MESSAGE BELOW DISAPPEARS-->
        <?php

        } else {

        ?>
<div class="loggedout-members-only">
<p>Picks posted here are for <strong>PAID MEMBERS ONLY</strong>.<br>
<a href="http://wsplays-members.com/login/">Log In</a> &nbsp;-<strong>or</strong>-&nbsp; <a href="http://wsplays-members.com/subscription-options/">View/Purchase Subscriptions Here</a>.</p>
<p><a href="http://wsplays-members.com/membership-account/membership-checkout/?level=23">Click Here</a> to register for <strong>FREE PICKS</strong> and gain <strong>FREE ACCESS</strong><br> to our Pick History &amp; Detailed Records </p>
</div>
        <?php
        }
      }
   }
}
?>

Sports Plugin Javascript file

/*jslint browser: true*/
/*global $, jQuery, alert*/
var memberresults =
        function memberresults(seasontype, sport, seasonrange) {
            "use strict";
            var ajaxl = '<img src="/wp-content/plugins/bid-sys/customgif/ajax-loader.gif" alt="" />',
                dataURL = "seasontype=" + seasontype + "&sport=" + sport + "&seasonrange=" + seasonrange;
            jQuery("#member_" + seasontype + "season_vals_inner").html(ajaxl);
            jQuery.ajax({
                type: "POST",
                url: "/wp-content/plugins/bid-sys/ajax_member.php",
                data: dataURL,
                success: function (msg) {  // alert(msg);
                    jQuery("#member_" + seasontype + "season_vals_inner").html(msg);
                }
            });
        };

var filterresult =
         function filterresult(type, val) {
            "use strict";
            var ajaxl = '<img src="/wp-content/plugins/bid-sys/customgif/ajax-loader.gif" alt="" />',
                dataURL = "action=" + type + "&val=" + val;
            jQuery("#" + type + "_vals").html(ajaxl);
            jQuery.ajax({
                type: "POST",
                url: "/wp-content/plugins/bid-sys/ajax_load.php",
                data: dataURL,
                success: function (msg) {  // alert(msg);
                    jQuery("#" + type + "_vals").html(msg);
                }
            });
        };

filterresult("overall", "playoftheday365");
filterresult("persport", "currentseason");
// END

jQuery(document).ready(function () {
// backend script for rp_picks.php
    "use strict";
    jQuery("select.f_p_filter").uniform();
    jQuery(".validatenm").bind("keyup change", function () {
        if (!(this.value).match(/^-?\d+(?:\.\d){0,1}$/) && this.value !== "") {
            jQuery(this).addClass('errorfield');
        } else {
            jQuery(this).removeClass('errorfield');
        }
    });
// END

My added javascript file

/*jslint browser: true*/
/*global $, jQuery, alert*/
(function ($) {
    'use strict';
    jQuery(document).on('change', '.div-toggle', function () {
        var target = $(this).data('target'),
            show = $("option:selected", this).data('show');
        $(target).children().addClass('inv');
        $(show).removeClass('inv');
    });
    jQuery(document).ready(function () {
        $('.div-toggle').trigger('change');
    });
}(jQuery));

Added to CSS file

.inv {
  display: none;
}

Upvotes: 0

Views: 717

Answers (1)

Оzgur
Оzgur

Reputation: 432

Fix for your added JS file

$('.div-toggle').on('change', function() {
      $('.my-info-1').children().addClass('inv');
      $('#'+this.value).removeClass('inv');
});

Alternatively

$('.div-toggle').on('change', function() {
      $('.my-info-1').children().hide();
      $('#'+this.value).show(100);
});

Upvotes: 1

Related Questions