CODEWITHSUNDEEP
phpajax
Rob Myrick
Rob Myrick

Reputation: 859

AJAX / jQuery Usage for navigation tabs

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.

Upvotes: 2

Views: 1707

Answers (3)

thaJeztah
thaJeztah

Reputation: 29077

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

Upvotes: 3

Oliver Tappin
Oliver Tappin

Reputation: 2541

You could carry on passing the whole page using AJAX and then adding this over the navigation bar and header:

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

This checks to see if the page has been requested via AJAX and the return; will stop anything from loading there on. Alternatively you can put code you want inside this if statement when it is being called via AJAX.

Upvotes: 1

Patrick M
Patrick M

Reputation: 10989

Instead of ajaxing in each individual tab, you could also just apply a jQuery ui tabs widget to the page. Then your markup would like something like this:

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

This assumes you have the ability to add custom scripts to the head. You'll also have to take care to ensure that the tabs play nice with whatever save/cancel actions you provide, but that's the case for your AJAX solution as well. Just different.

Edit: I should have also linked to the hide and show options, which control the fade in and fade out animations. I think you could add those options to the constructor (in addition to adding them after the tabs() call has finished, as in the example code in the linked documentation), like this:

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

Upvotes: 1

Related Questions