CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uitabs
jeffery_the_wind
jeffery_the_wind

Reputation: 18158

jQuery Tabs, multiple tabs with just ONE panel

I'm working on a custom solution, so I thought I would ask the community if anyone has use jQuery Tabs for this purpose before.

The idea is this: I have one main panel, a form with inputs. There are multiple tabs which basically identify different records. All the records will use this form, thats why I just want to load it once, instead of for each tab.

I put a basic example of the direction I want to go. As you can see there are 3 tabs but only one panel. I want to dynamically load content into the_input depending on which tab I click. SO i don't even want to switch the panel, just the selected tab on each click.

I was thinking I need to catch the beforeActivate (http://api.jqueryui.com/tabs/#event-beforeActivate) event, identify which tab was selected, and dynamically alter the 1 visual panel accordingly.

The code isn't really working

jQuery(function($){
  $("#tabs").tabs({
    beforeActivate(event, ui) {
      $('#msg').append('<p>'+ui.newPanel+'</p>');
      //I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab.
    }
  });
  
  function fill_input(selector){
    if ( selector == 1 ) {
         $('#the_input').val(1);
    }else if ( selector == 2 ) {
         $('#the_input').val(2);
    }else{
         $('#the_input').val();
    }
  }
  
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#bol_new">New</a></li>
    <li><a href="#bol_1">record 1</a></li>
    <li><a href="#bol_2">record 2</a></li>
  </ul>
  <div id="bol_new">
    <form>
      <input id="the_input">
    </form>
  </div>
</div>
<div id="msg">

</div>

Upvotes: 1

Views: 2307

Answers (2)

Twisty
Twisty

Reputation: 30883

I would advise just mocking up the tabs with CSS. You can then manipulate the form as needed.

Working example: https://jsfiddle.net/Twisty/j63uvk4q/

HTML

<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
  <ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
    <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active">
      <a href="#bol_new" class="ui-tabs-anchor">New</a>
    </li>
    <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
      <a href="#bol_1" class="ui-tabs-anchor">Record 1</a>
    </li>
    <li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
      <a href="#bol_2" class="ui-tabs-anchor">Record 2</a>
    </li>
  </ul>
  <div id="bol_new" class="ui-tabs-panel ui-corner-bottom ui-widget-content">
    <form>
      Record:
      <input id="the_input">
    </form>
  </div>
</div>
<div id="msg">
</div>

JavaScript

var myData = {
  records: {
    bol_1: "Homer Simpson",
    bol_2: "Marge Simpson"
  }
}
$(function() {
  $("#tabs .ui-tabs-nav li").click(function(e) {
    e.preventDefault();
    $("#tabs li.ui-state-active").toggleClass("ui-tabs-active ui-state-active");
    $(e.target).parent().addClass("ui-tabs-active ui-state-active");
    var id = $(e.target).attr("href").substring(1);
    $("#the_input").val(myData.records[id]);
  });
  $("#tabs .ui-tabs-nav .ui-tabs-tab").hover(function(e) {
    $(this).toggleClass("ui-state-hover");
  }, function(e) {
    $(this).toggleClass("ui-state-hover");
  });
});

Upvotes: 1

Rakesh Gupta
Rakesh Gupta

Reputation: 3750

You could set the href for each hyperlink to bol_new as under

<ul>
    <li><a href="#bol_new">New</a></li>
    <li><a href="#bol_new">record 1</a></li>
    <li><a href="#bol_new">record 2</a></li>
</ul>

This will set the panel for each tab to the same div with id="bol_new"

Test: https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview

Upvotes: 1

Related Questions