在下拉選擇時刷新div容器的全部內容

我正在使用一個運動WordPress插件，該插件根據放置在頁面中的短代碼爲該運動生成內容。現在它默認設置，因此您必須爲每項運動設置一個頁面並插入該運動短代碼，但我正在嘗試設置一個下拉菜單，而不是在列出所有運動的單個頁面上選擇它將顯示該運動生成的短碼數據。在下拉選擇時刷新div容器的全部內容

我遇到的問題是數據不會刷新，甚至不會從下拉菜單中選擇新的數據。事實上，在選擇第一個下拉菜單時，它會顯示生成的內容，但它是隨機的內容，我不知道爲什麼。我將每種類型的短代碼放在它自己的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; 
}

來源

2017-04-16 kma1289

你說「數據不刷新，甚至再生」。你的意思是說短代碼應該通過ajax（按需）動態生成/更新內容嗎？或者應該在頁面加載後一切都在那裏，並且下拉菜單僅用於切換哪些內容可見？ – yezzz

實際上，應該在頁面上有ID爲content_1，content_2等的div，並且只有第一個在那裏。其餘的不在那裏，除了一些html的評論。我會說簡碼有問題。插件說明是否告訴你使用尾標？''[/ get_biddata]''[/ membership]'如果一切正常，請檢查php錯誤日誌。您也可以啓用[wp_debug]（https://codex.wordpress.org/Debugging_in_WordPress）。 – yezzz

將短代碼放置在單獨的頁面上時會生成並更新，並且它們屬於同一項運動。但是，當我嘗試在單獨的div容器中將每個文件全部列在一個頁面上時，它們都不起作用，似乎不會分開。第一個div加載但加載隨機生成的php內容。所有標題都以它們應該的方式加載，只是我認爲的JavaScript內容。 – kma1289

修復，讓您更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); 
});

來源

2017-04-16 20:23:11

我嘗試了幾種方法來整合這段代碼，包括用它代替我所有的代碼。這是你想要的我試試嗎？無論哪種方式，它仍然沒有爲我工作，但謝謝你的嘗試。它實際上一次加載所有的div到頁面上。 – kma1289

@ Dambr7我的代碼出錯了，修正了它。你可以再試一次嗎？我還添加了替代方法。我寧願使用替代方法，這也會在顯示中增加動畫效果。 –

@ Dambr7請註釋您之前添加的JS文件中的所有行，以免影響結果。 –

在下拉選擇時刷新div容器的全部內容

回答

相關問題