donglin9068 2013-01-27 22:12
浏览 164
已采纳

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

I am wanting to implement AJAX into the admin pages of my Wordpress theme. I seem to almost be there, but I am somehow fading-in the wrong class.

Please see this screenshot with the class labels provided:

Theme Options Screenshot

Here is what's happening:

  1. I click on Appearance > Site Options and the page display correctly with a single page of options

  2. I click on one of the top navigation tabs, and the page fades out correctly.

  3. When the page fades back in - it appears like the 2nd screenshot below.

enter image description here

Here is the code that is currently handling the request:

 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
   });
  });
 });

So I just need to know how to show only the "page form" class inside of the rendered content, not the entire wordpress admin area.

  • 写回答

3条回答 默认 最新

  • dongtou2016 2013-01-27 23:09
    关注

    You're loading the entire page in your AJAX request (as mentioned by Bence) and modifying the response server-side is the best option, however, it is possible to fix this using jQuery;

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

    This should load the url from the location of the clicked link and extract the element with class '.page-form' from the result and replace the element selected by '.page-form' with its content. However;

    • make sure that a [space] is present between the url and the selector (' .page-form'), a space is missing in your code
    • using a 'class' as selector may return multiple elements, I'm not sure what the result will be in case multiple elements are selected

    See the documentation here: http://api.jquery.com/load/

    NOTE: You're using jQuery.live() in your code, which is deprecated since jQuery 1.7 (http://api.jquery.com/live/). You may want to rewrite your code and use jQuery.on() as its replacement (http://api.jquery.com/on/)

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)