1

現在、jQuery UI タブと ajax を使用しています。「次へ」ボタンと「前へ」ボタンでのみナビゲートできる合計 3 つのタブがあります。パラメータを設定しました: tab1 で入力フィールドを離れるcar_nameと、警告メッセージと同様のパラメータが tab2 に表示されます。

私の意図した設定:パラメータが満たされていない場合、ユーザーは次のタブに進むことができません。ただし、その部分は機能していません。ユーザーは警告を受け取ります。無視して、もう一度 [次へ] をクリックし、次のタブに進むことができます。パラメータ(入力フィールドに入力)が満たされるまで「次へ」ボタンを無効にするにはどうすればよいですか? 例

ありがとうございました

JS

    <script>  
        $(function () {
            var $tabs = $('#tabs').tabs({
              disabled: [0, 1, 2],
              select: function () {

                $.ajax({
                  type: "POST",
                  url: "post_tabs.php",
                  data: {
                    "name": $("#car_name").val(),
                    "title": $("#title").val(),
                    "price": $("#price").val()

                  },
                  success: function (result) {
                    $("#tab-3").html(result);
                  } 
                });  
              } 
            });

            $(".ui-tabs-panel").each(function (i) {
              var totalSize = $(".ui-tabs-panel").size() - 1;
              if (i != totalSize) {
                next = i + 2;
                $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
              }
              if (i != 0) {
                prev = i;
                $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
              }
            });



            $('.next-tab, .prev-tab').click(function () {
              var prev = $(this).hasClass('prev-tab');
              var currentTab = $('#tabs').tabs('option', 'selected');
              if (
                prev || /*(A)*/ (
                  currentTab == 0 && /*(B)*/
                  $.trim($('#car_name').val()).length > 0

                ) || (
                  currentTab == 1 && /*(C)*/
                  $.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0)


              ) {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
              } else if (!prev) {
                switch (currentTab) {
                  case 0:
                    alert('Please choose an option.', 'Alert Dialog');
                    break;
                  case 1:
                    alert('Please fill out all the required fields.', 'Alert Dialog');
                    break;

                }
              }
              return false;
            });


     $('.next-tab, .prev-tab').click(function () {
          var tabIndex = $(this).attr("rel");
          $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
          return false;
      });
});
         </script>

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
 <label for="car_name">Car Model</label>
     <input type="text" id="car_name" class="detail" name="car_name" value="" /> <br>

</div>

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">

     <label for="title">Title</label>
     <input type="text" id="title" name="title" size="60" autocomplete="off" value=""/><br>
     <label for="price">Price</label>
     <input type="text" id="price" name="price" size="60" autocomplete="off" value=""/><br>
</div>

<div id="tab-3" class="ui-tabs-panel ui-tabs-hide">

</div>
4

1 に答える 1

3

コードに少し奇妙なことがあります。「次へ」と「前へ」を2回登録します。

それはあなたが意図したものではありません。

必要なのは次の動作です。

  1. prevがクリックされた場合-常にprevに移動します
  2. [次へ]をクリックした場合-必須フィールドが入力されている場合にのみ[次へ]に進みます。

これは、以下を変更する必要があることを意味します

  1. .prev-tab最初のイベントからセレクターを削除し、prevvairableへの言及を削除します。このメソッドは、のみを処理する必要がありnextます。
  2. next2番目のイベントバインディングから削除します。これは。のみを処理する必要がありprevます。

したがって、JavaScriptは次のようになります。

   $('.next-tab').click(function () {

              var currentTab = $('#tabs').tabs('option', 'selected');
              if (
                (
                  currentTab == 0 && /*(B)*/
                  $.trim($('#car_name').val()).length > 0

                ) || (
                  currentTab == 1 && /*(C)*/
                  $.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0
                )


              ) {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
              } else {
                switch (currentTab) {
                  case 0:
                    alert('Please choose an option.', 'Alert Dialog');
                    break;
                  case 1:
                    alert('Please fill out all the required fields.', 'Alert Dialog');
                    break;

                }
              }
              console.log("preventing default");

              return false;
            });


     $('.prev-tab').click(function () {
          var tabIndex = $(this).attr("rel");
          $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
          return false;
      });

これで問題が解決するはずです。

あなたはこれを行動で見ることができ、私のサイトで私のリソースをダウンロードすることができます

上記はあなたの問題に答えます。

それでは、「次の」シナリオのためにコードを少し短くする方法を提案する機会を与えてください。

線の真上に$('.next-tab').click(function () {次の関数を作成します

function isEmpty( item ) { 
    return $.trim(item.val()).length <= 0;
}

今-class='required'クリックしたときに空であってはならないすべての入力フィールドを追加しますnext。

各タブに追加data-alert="The alert message you want to show"

これで、HTMLは次のようになります。

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide" data-alert="Please choose an option.">
 <label for="car_name">Car Model</label>
     <input type="text" id="car_name" class="required detail" name="car_name" value="" /> <br>

</div>

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide" data-alert="Please fill out all the required fields.">
     <label for="title">Title</label>
     <input type="text" id="title" class="required" name="title" size="60" autocomplete="off" value=""/><br>
     <label for="price">Price</label>
     <input type="text" id="price" class="required" name="price" size="60" autocomplete="off" value=""/><br>
</div>

これで、JSコードははるかに小さくなり、保守しやすくなります（必須フィールドを含む別のタブを追加した場合でも、変更しないでください）。

$('.next-tab').click(function () {
              var $tab = $(this).closest(".ui-tabs-panel");
              var $requiredFields = $tab.find(".required");
              var canContinue = true;

              $requiredFields.each(function(index,item){
                console.log(["checking" , item]);
                if ( canContinue && isEmpty($(item))){ alert( $tab.attr("data-alert"), 'Alert Dialog' ); canContinue = false; }

              });
              if ( canContinue )
              {
                var tabIndex = $(this).attr("rel");
                $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]);
              } 
              return false;
            });
于 2012-08-10T21:59:43.810 に答える