Question

我想在我的Wordpress主题的管理页面中实现AJAX。我好像几乎都在那里，但我在某种程度上正在逐渐消失。

请使用提供的班级标签查看此屏幕截图：

Theme Options Screenshot

以下是发生的事情：

我点击外观＆gt;使用单页选项正确显示网站选项和页面
我单击其中一个顶部导航标签，页面正确淡出。
当页面淡入时 - 它看起来像下面的第二个截图。

enter image description here

以下是当前处理请求的代码：

 jQuery('.nav-tab').live('click', function(e){ 
     e.preventDefault();
     var link = jQuery(this).attr('href'); //Get the href attribute
 jQuery('.page-form').fadeOut(500, function(){ //fade out the content area
 jQuery("#loader").show(); // show the loader animation
    }).load(link + '.page-form', function(){ jQuery('.page-form').fadeIn(500, function(){ 
 jQuery("#loader").hide(); //hide the loader
   });
  });
 });

所以我只需要知道如何只在渲染内容中显示“页面表单”类，而不是整个wordpress管理区域。

Answer 1

您正在加载AJAX请求中的整个页面（如Bence所述），并且修改响应服务器端是最佳选项，但可以使用jQuery解决这个问题;

jQuery('.nav-tab').on('click', function(e){ 
    e.preventDefault();
    jQuery('.page-form').load(jQuery(this).attr('href') + ' .page-form');
});

这应该从点击链接的位置加载网址，并从结果中提取类“.page-form”的元素，并将'.page-form'选择的元素替换为其内容。然而;

确保在网址和选择器（'.page-form'）之间存在[空格]，代码中缺少空格
使用'class'作为选择器可能会返回多个元素，我不确定如果选择多个元素会有什么结果

请参阅此处的文档： http://api.jquery.com/load/

注意：您在代码中使用了jQuery.live（），这是自jQuery 1.7（http://api.jquery.com/live/）以来不推荐使用的。您可能想要重写代码并使用jQuery.on（）作为替代（http://api.jquery.com/on/）

Answer 2

您也可以只在页面中应用jQuery ui tabs widget，而不是在每个单独的标签中使用jj。然后你的标记就像这样：

<head>

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript>
  $(document).ready(function() {
    $("#tabs").tabs();
  });
</script>

</head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-General">General Settings</a></li>
    <li><a href="#tabs-Layout">Layout Options</a></li>
    <li><a href="#tabs-Content">Content Display</a></li>
    <li><a href="#tabs-Advanced">Advanced Options</a></li>
  </ul>
  <div id="tabs-General">
    <!-- general settings form -->
  </div>
  <div id="tabs-Layout">
    <!-- Layout options form -->
  </div>
  <div id="tabs-Content">
    <!-- content display form -->
  </div>
  <div id="tabs-Advanced">
    <!-- advance options form -->
  </div>
</div>
</body>

这假设您可以向头部添加自定义脚本。您还必须注意确保选项卡与您提供的任何保存/取消操作一致，但您的AJAX解决方案也是如此。与众不同。

修改：我还应该链接到hide和show选项，这些选项可以控制淡入和淡出动画。我想你可以将这些选项添加到构造函数中（除了在tabs()调用完成后添加它们，如链接文档中的示例代码中所示），如下所示：

<script type="text/javascript>
  $(document).ready(function() {
    $("#tabs").tabs(
                hide : {
                    effect : 'fadeOut',
                    duration : 500
                },
                show : {
                    effect : 'fadeIn',
                    duration : 500
                }
            );
  });
</script>

Answer 3

您可以使用AJAX继续传递整个页面，然后在导航栏和标题上添加：

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    return;
}

这会检查是否已通过AJAX请求该页面，return;将阻止任何内容加载。或者，您可以在if语句中通过AJAX调用所需的代码。

用于导航选项卡的AJAX / jQuery用法

3 个答案: