CODEWITHSUNDEEP
jqueryjquery-ui
Pratik Bothra
Pratik Bothra

Reputation: 2694

Identify accordion-selector and tab using jQuery DOM based methods?

I have this function where I send in the id of the jquery-ui-accordion,and jquery-ui-tab. The function changes both it's error state.

I want to make this function identify both selector and tab automatically, so that I don't need to send it any parameters. 

function show_error(selector,tab) {
    var $this = $(selector);
    //  parent tab
    var parent = $("#accordion").parent();
    //parent.adderror();

    // the content
    $this.adderror();

    // the header
    var header = $this.attr("aria-labelledby");
    $("#"+header).adderror();

    // the tab
    //This didn't work -var tab = parent.attr("aria-labelledby");
    $("#"+tab).parent().adderror();
}

To use this function call as

<div id="tabs-1">
    <div id="accordion_oms">
        <div>
            <script>show_error("#ui-accordion-accordion_oms-panel-0","ui-id-1")</script>
        </div>
        <div>
            <script>show_error("#ui-accordion-accordion_oms-panel-1","ui-id-1")</script>
        </div>
    </div>
</div>

<div id="tabs-2">
    <div id="accordion_fulfillment">
        <div>
            No error here
        </div>
        <div>
            <script>show_error("#ui-accordion-accordion_fulfillment-panel-1","ui-id-1")</script>
        </div>

    </div>
</div>

The problem is I use this in loads of places my rails application, and if something is changed/moved, I need to change them accordingly. Is there any way to make the function as just show_error(), and then it picks up the tab and selector automatically? I will be calling the function in the right place. So for eg-: show_error() , and it automatically identifies which accordion and tab it was for dependent on the place from where it was called.

If you wanna experiment, here is a JSFiddle - http://jsfiddle.net/bxeP7/5/

It's something like

<h3>Orders</h3>

    <div>

      <% if @order_error.present? %>
          <%= @order_error.html_safe %>
          <%= javascript_tag("$(function() {show_error('#ui-accordion-accordion_oms-panel-0','ui-id-1');});") %>
      <% else %>
          <%= render "trace/display_tabular_data", :data => @order %>
      <% end %>
    </div>

<h3> Order Items </h3>
<div>
...
</div>

Upvotes: 0

Views: 351

Answers (1)

iappwebdev
iappwebdev

Reputation: 5910

Change your generating code to:

<h3>Orders</h3>
<div>
  <% if @order_error.present? %>
      <%= @order_error.html_safe %>
      <div class="error-occured"></div>
  <% else %>
      <%= render "trace/display_tabular_data", :data => @order %>
  <% end %>
</div>

<h3> Order Items </h3>
<div>
    ...
</div>

And then your JavaScript, get all errors and their parent accordion contents and headers and tab panels and tab header using generated classes by jquery UI.

function show_error() {
    // Get all errors occured
    var $errorsOccured = $('.error-occured');

    $errorsOccured.each(function () {
        var $currentError = $(this);

        // Get accordion elements
        var $parentAccordionContent = $currentError.closest('.ui-accordion-content');
        var $parentAccordionHeader = $parentAccordionContent.prev('.ui-accordion-header');

        // Get tab elements
        var $parentTabPanel = $parentAccordionHeader.closest('.ui-tabs-panel');
        var tabIndex = $parentTabPanel.index();
        var $parentTabHeader = $parentTabPanel.prev('.ui-tabs-nav').find('li').eq(tabIndex);

        // Call error function for all elements found
        $currentError.add(
        $parentAccordionContent).add(
        $parentAccordionHeader).add(
        $parentTabPanel).add(
        $parentTabHeader).adderror();
    });
}

I didn't test it, to much effort to update your fiddle, but it will work!

Upvotes: 1

Related Questions