在下拉列表选择中刷新div容器的全部内容

时间:2017-04-16 20:00:20

标签: javascript php jquery ajax wordpress

我正在使用运动WordPress插件,该插件根据放置在页面中的短代码为该运动生成内容。现在它是默认设置的,所以你必须为每项运动设置一个页面并插入该体育短码,但我想要做的是在一个单独的页面上设置一个下拉菜单,列出所有的运动和选择它将显示该运动的生成短代码数据。

我遇到的问题是数据无法刷新,甚至无法从下拉列表中重新选择。实际上,在选择第一个下拉列表时,它会显示生成的内容,但它是随机内容,我不知道为什么。我将每种类型的短代码放在它自己的div容器中,div在选择时会切换运动的标题,但数据不会改变甚至加载。我是否只需要刷新div就像有人点击指向页面的新链接以获取要加载的内容一样?不确定我错过了什么。有人可以看看并帮帮我吗?谢谢!

我包含所有代码只是为了参考,这里是当前发生的事情的网址:https://wsplays-members.com/results/显然需要会员资格来查看任何特定的体育内容,但php生成的消息仍然应该在选择任何内容时显示运动,现在它只适用于第一个菜单选择。再次谢谢你。

Wordpress页面代码:

<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代码

<?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
        }
      }
   }
}
?>

运动插件Javascript文件

/*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

我添加的javascript文件

/*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));

添加到CSS文件

.inv {
  display: none;
}

1 个答案:

答案 0 :(得分:1)

修复已添加的JS文件

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

可选地

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