слишком много ошибок рекурсии в пользовательском интерфейсе JQUERY с использованием аккордеона

Я пытаюсь программно обработать переключение аккордеона пользовательского интерфейса Jquery. Я хочу, чтобы, если кто-то нажал кнопку «Далее», он перешел к следующему шагу после добавления скрытого поля, вот что я написал в коде:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pro Plan Store</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(document).ready(function(){

  $("#changeStep").on("click",function(){
        $("#step1content").append("<input type='hidden' name='step1done' id='step1done' value=''>");

    $('#accordion').accordion('option', 'active', 1);
  });

    var accordian = $( "#accordion" ).accordion({
        active: false,
        beforeActivate: function(event, ui) {
            var newIndex = $(ui.newHeader).index('h3');
            console.log(newIndex);        
            switch(newIndex){
                case 0:
                 //   $(this).accordion( "option", "active", 0 ); //Main page just set it to homepage again
                break
                case 1:
                    if($("#step1done").length > 0){
                        $(this).accordion( "option", "active", 1 ); //Main page just set it to homepage again
                    }
                    else{
                        alert("Please login first to choose plan"); 
                        event.preventDefault();
                    }
                break
                case 2:
                break                
            }

    }
    });



});
</script>
</head>
<body>
<div id="accordion">
    <h3 id="logmein">Welcome Pro Plan Store</h3>
        <div id="step1content">
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>

          <input type="button" value="Next" id="changeStep" />




        </div>
    <h3 id="chooseplan">Choose Plan</h3>
    <div id="step2content">
        <p>
            Choose Plan Here
        </p>
    </div>

    <h3 id="zoura">Checkout</h3>
    <div id="step3content">
        <p>
            Zoura Iframe
        </p>

    </div>

</div>
</body>
</html>

но когда я запускаю его и вижу в консоли, это дает мне слишком много ошибок рекурсии. как показано в следующей ошибке:

введите здесь описание изображения

Я делаю что-то неправильно?? Я использую все стабильные версии библиотек. Я также пробовал это, эмулируя щелчок по головному элементу аккордеона, но получаю ту же ошибку.


jquery jquery-ui jquery-ui-accordion
person Seeker    schedule 12.06.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Это связано с написанным вами кодом: вы пытаетесь сделать «Выбрать панель» активной, выполнив $('#accordion').accordion('option', 'active', 1) при нажатии следующей кнопки в первом панель.

Перед активацией элемент управления переходит к методу beforeActivate. Но в методе beforeActivate вы пытаетесь активировать ту же панель. Теперь элемент управления снова переходит к методу beforeActivate перед активацией и, следовательно, в тупиковой ситуации.

Почему вы хотите активировать тот же аккордеон в методе beforeActivate? Это никогда не сработает.

person Raghav    schedule 12.06.2013
comment
Спасибо, приятель, за идею :) да, мне просто нужно предотвратить поведение по умолчанию, если моя логика не выполняется в части beforeActivate, иначе пусть аккордеон выполняет работу по умолчанию. - person Seeker; 12.06.2013

arrow_upward
1
arrow_downward

Хорошо, благодаря Rag Answer, я смог найти свою проблему, мне просто нужно предотвратить поведение Dafult в соответствии с моей логикой, поэтому мой код станет примерно таким:

 <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Pro Plan Store</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script>
    $(document).ready(function(){

      $("#changeStep").on("click",function(){
            $("#step1content").append("<input type='hidden' name='step1done' id='step1done' value=''>");

        $('#accordion').accordion('option', 'active', 1);
      });

        var accordian = $( "#accordion" ).accordion({
            active: false,
            beforeActivate: function(event, ui) {
                var newIndex = $(ui.newHeader).index('h3');
                console.log(newIndex);        
                switch(newIndex){
                    case 0:
                     //   $(this).accordion( "option", "active", 0 ); //Main page just set it to homepage again
                    break
                    case 1:
                        if($("#step1done").length < 0){
                            alert("Please login first to choose plan"); 
                            event.preventDefault();
                        }
                    break
                    case 2:
                    break                
                }

        }
        });



    });
    </script>
    </head>
    <body>
    <div id="accordion">
        <h3 id="logmein">Welcome Pro Plan Store</h3>
            <div id="step1content">
                <p>
                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                </p>

              <input type="button" value="Next" id="changeStep" />




            </div>
        <h3 id="chooseplan">Choose Plan</h3>
        <div id="step2content">
            <p>
                Choose Plan Here
            </p>
        </div>

        <h3 id="zoura">Checkout</h3>
        <div id="step3content">
            <p>
                Zoura Iframe
            </p>

        </div>

    </div>
    </body>
    </html>
person Seeker    schedule 12.06.2013