CODEWITHSUNDEEP
jqueryruby-on-railsperformancetabs
Jake Smith
Jake Smith

Reputation: 2813

How do I use JQuery to allow more than one possible view per tab?

Problem:

I have a vertical tab system from foundation, and in the first tab's corresponding container, there are two main components: a list of objects and a button that, when clicked, should display a form to create another one of these objects in the same container without having to reload the page. Once the form is submitted, the original content with the list of objects (now including the newly added object), and that button to create a new object.

I am using Foundation 3's vertical tabs and have something like this:

<div class="four columns">
  <dl class="vertical tabs">
    <dd id="firstTab" class="active"><a href="#1">1</a></dd>
    <dd id="secondTab><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li class="active" id="1Tab">
      <a id="formButton" class="large success button radius">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab">form goes here</li>
  </ul>
</div>

I was previously trying to get this to work with AngularJS. However, it has been suggested to me that if I stick with just pure DOM manipulation that AngularJS isn't really required, and now I have a better understanding of why that is too. Would what I'm looking for here be better implemented with JQuery or even a lighter version like Zepto.js, considering that Zepto is the javascript framework being used by Foundation? Can someone help me get pointed in the right direction?

Update:

This is the jQuery that I ended up using:

$(document).ready(function () {
    $("firstTab").removeClass("active");
    $("1Tab").removeClass("active");
    $("formTab").addClass("active");
})

The problem with this solution so far is that I can only bring up the form one time. This allows me to change my mind about filling out the form and click another tab. But if I try to click the form button again after that, the form doesn't come up anymore. The developer window indicates that the classes of "active" are still being added and removed. But I think the issue is that the object that this form is used for is a Class.new() object that I create with an embedded ruby statement just before the form in the DOM. Is there a way to make this Class.new() instantiation happen with each button click rather than only when the whole page is loaded?

Upvotes: 1

Views: 157

Answers (1)

Eugenio Cuevas
Eugenio Cuevas

Reputation: 11078

Not sure what you are trying to achieve here, but you can show/hide elements with ng-show attribute. Here is an example on how to use it:

<div class="four columns">
  <dl class="vertical tabs">
    <dd class="active"><a href="#1">1</a></dd>
    <dd><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li class="active" id="1Tab">
      <a id="formButton" class="large success button radius" ng-click="showForm()">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab"><form ng-show="isVisible"><input type="text" value="Hi! I'm visible!"/></form></li>
  </ul>
</div>

Now you manage your isVisible property in the controller:

var myApp = angular.module('myApp', []);
myApp.controller("FormCtrl", function ($scope) {
    //set it to false initially
    $scope.isVisible = false;
    $scope.showForm = function () {
        //change to visible after click
        $scope.isVisible = true;
    }
});

If you want to add a class depending on a property, you can use ng-class:

<div class="four columns">
  <dl class="vertical tabs">
    <dd class="active"><a href="#1">1</a></dd>
    <dd><a href="#2">2</a></dd>
  </dl>
</div>
<div class="twelve columns">
  <ul class="tabs-content contained">
    <li ng-class="{selected: tag.isSelected}" id="1Tab">
      <a id="formButton" class="large success button radius" ng-click="showForm()">Show Form</a>
    </li>
    <li id="2Tab">2</li>
    <li id="formTab"><form ><input type="text" value="Hi! I'm visible!"/></form></li>
  </ul>
</div>

Upvotes: 1

Related Questions