Question

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:

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.

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.

Answer 1

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