引导面板显示.bs.崩溃得到ajax数据的头部和显示加载图标延迟

Question

我使用引导手风琴面板来显示数据。我需要从服务器上使用ajax获得标题响应的数据。下面是我在每个面板标题上使用的代码，我需要实现ajax请求。

示例:点击可折叠组项目#1需要实现ajax请求，改变#数字，并显示加载图标而不是glyphicon-chevron-down在得到响应后需要显示回glyphicon-chevron-down延迟1000。

                   <div class="panel-group" id="accordion">
             <div class="panel panel-default" id='result'>
               <div class="panel-heading">
                <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  Collapsible Group Item #1 
                </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                   Collapsible Group Item #2 
                </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  Collapsible Group Item #3 
                </a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
        </div>

('#accordion').on('shown.bs.collapse', function () {
   // do ajaxy stuff…
    alert('test');
   //$('#result').toggle('1000');
    //  $("i",this).toggleClass("glyphicon-chevron-down glyphicon-chevron-spinner");
 })

Answer 1

我的答案使用fontawesome代替，它应该很容易改变它使用字形。该脚本将id与来自可折叠标题中使用的锚标记的data-id属性的ajax请求一起发送。默认情况下，ajax请求自然会失败。在ajax请求后按要求更改标题。

// Add your javascript here
$(document).ready(function() {
  $('a[data-toggle="collapse"]').on('click', function(e) {
    var Myi = $(e.target).next();
    $.ajax({
      type: "get",
      url: "/test/testservice?id=" + $(e.target).data("id"),
      beforeSend: function() {
        Myi.attr("class", "fa fa-cog fa-spin pull-right");
      },
      success: function() {
        //...
        $(e.target).html("Successfull for id #" + $(e.target).data("id"));
        Myi.delay(500).queue(function(next) {
          Myi.attr("class", "fa fa-check text-success pull-right");
          next();
        }).delay(500);
        alert("Successfully received content with id: " + $(e.target).data("id"));
      },
      error: function() {
        //..
        $(e.target).html("Unsuccessfull for id #" + $(e.target).data("id"));
        Myi.delay(500).queue(function(next) {
          Myi.attr("class", "fa fa-times text-danger pull-right");
          next();
        }).delay(500);
        alert("Couldn't get content with id: " + $(e.target).data("id"));
      }
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
  <div class="panel panel-default" id='result'>
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-id="1" href="#collapseOne">
                  Collapsible Group Item #1 
                </a><i class="fa fa-chevron-right pull-right"></i>
              </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-id="2" href="#collapseTwo">
                   Collapsible Group Item #2 
                </a><i class="fa fa-chevron-right pull-right"></i>
              </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-id="3" href="#collapseThree">
                  Collapsible Group Item #3 
                </a><i class="fa fa-chevron-right pull-right"></i>
              </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>