2

我想在我的 Wordpress 主题的管理页面中实现 AJAX。我似乎几乎在那里，但我不知何故淡入了错误的班级。

请查看此屏幕截图以及提供的类标签：

主题选项截图

这是正在发生的事情：

  1. 我单击外观 > 站点选项，页面显示正确，并带有单页选项

  2. 我单击顶部导航选项卡之一，页面正确淡出。

  3. 当页面淡入时 - 它看起来像下面的第二个屏幕截图。

在此处输入图像描述

这是当前处理请求的代码：

 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 管理区域。

4

3 回答 3

3

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

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

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

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

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

注意：您在代码中使用 jQuery.live()，自 jQuery 1.7 ( http://api.jquery.com/live/ ) 起已弃用。您可能想要重写您的代码并使用 jQuery.on() 作为其替代品 ( http://api.jquery.com/on/ )

于 2013-01-27T23:09:46.967 回答
1

除了在每个单独的选项卡中使用 ajax，您还可以将jQuery ui 选项卡小部件应用于页面。然后你的标记会是这样的：

<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 解决方案也是如此。只是不同。

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

<script type="text/javascript>
  $(document).ready(function() {
    $("#tabs").tabs(
                hide : {
                    effect : 'fadeOut',
                    duration : 500
                },
                show : {
                    effect : 'fadeIn',
                    duration : 500
                }
            );
  });
</script>
于 2013-01-27T22:40:48.727 回答
1

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

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

这将检查页面是否已被请求，AJAX并且return;将停止加载任何内容。或者，您可以在if通过调用此语句时将所需的代码放入此语句中AJAX。

于 2013-01-27T23:17:20.433 回答