CODEWITHSUNDEEP
jqueryjquery-tabs
Yashman Gupta
Yashman Gupta

Reputation: 296

Load AJAX Page only in one jquery tab

Background: I have categories that calls the ajax page and prints in the DIV tag. This AJAX page pulls the contents from database and divides into 2 parts (1st part regular content display, 2nd part jQuery tabs (Features, Specifications and Downloads tabs)). All tabs prints the information fetched from database but the last tab i.e., Downloads tab has another <DIV> tag that will load the associated list of PDF and ZIP files for download.

Issue: I am trying to load the files list when the user clicks on the Downloads tab and not before that. So far what I have tried is the below.. System is not able to trigger the alert message also returning the Tab index ID

<div id="tabs">
  <ul>
    <li><a href="#tab_feature">Features</a></li>
    <li><a href="#tab_specification">Specifications</a></li>
    <li><a href="#tab_download" data-id="3">Downloads</a></li>
  </ul>

  <div id="tab_feature">
    <div>
        Tab Features
    </div>
  </div>

  <div id="tab_specification">
        Tab Specificications
  </div>

  <div id="tab_download">
    <p>Below listed are the related files that can be downloaded to you PC.</p>
        <div id="downloadFilesList"></div>
  </div>
</div>

<script>
$(function ()
{
   $('#tabs').tabs(
   {
      select: function(event,ui)
      {
          var intSelectedIndex = ui.index;

          alert('selected: ' + intSelectedIndex);

          if (intSelectedIndex == 2)
          {
              $("#downloadFilesList").load('loadfiles.asp', function (response, status, xhr)
              {
                .....
              }
          }
      }
   });
});
</script>

Just to add on, I am using jQuery the below

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.0/themes/humanity/jquery-ui.css" rel="stylesheet">

Adding JSFiddle

Upvotes: 0

Views: 746

Answers (1)

Punitha Subramani
Punitha Subramani

Reputation: 1477

use

    select: function(event,ui)

instead

    activate: function (event, ui) {

or

    beforeActivate: function( event, ui ) {}

To know more about tabs, Please read this Link

Edited

$(document).ready(function ()
{
$('#tabs').tabs(
{
    activate: function (event, ui)
    {
        var intSelectedIndex = ui.index;

        var intSelectedIndexs=ui.newPanel.selector;

        if ($.trim(intSelectedIndexs) == "#tab_download")
        {
        alert("This is Download:");//$('.downloadFakeClass').load('www.google.com');          
        }
    }
 });
});

Upvotes: 1

Related Questions