0

jquery-ui-accordionとjquery-ui-tabのIDを送信するこの関数があります。関数は、エラー状態の両方を変更します。

この関数にセレクターとタブの両方を自動的に識別させて、パラメーターを送信する必要がないようにしたいと考えています。

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();
}

この関数呼び出しを次のように使用するには

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

問題は、レールアプリケーションの多くの場所でこれを使用していることです。何かが変更/移動された場合は、それに応じて変更する必要があります。関数を show_error() だけにして、タブとセレクターを自動的に取得する方法はありますか? 適切な場所で関数を呼び出します。したがって、 eg-: show_error() の場合、呼び出された場所に応じて、どのアコーディオンとタブがどのアコーディオンとタブに依存していたかを自動的に識別します。

実験したい場合は、ここに JSFiddle があります - http://jsfiddle.net/bxeP7/5/

のようなものです

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

1 に答える 1

1

生成コードを次のように変更します。

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

次に、JavaScript で、 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();
    });
}

私はそれをテストしませんでした.あなたのフィドルを更新するために多くの努力をしましたが、うまくいきます!

于 2013-03-06T09:59:34.060 に答える