Jquery GIF onload Jquery 탭

Question

AJAX 콘텐츠가로드되는 동안 내 탭이 표시되는 영역 안에 회 전자 gif를 표시하려고합니다. 그러나 내 Ajax 호출은 탭 코드 내에서 발생하지 않습니다. 아래에 표시된 외부 아약스 호출을 통해 발생하고 아약스 호출의 .done() 메서드를 수행하는 동안 탭 안에있는 해당 div 내에 json 데이터를 배치합니다.

ajax 호출이 진행되는 동안 탭 안에 회 전자를 표시하고 싶습니다. 온라인에서 여러 가지 자습서를 살펴 보았지만 내 필요에 맞는 것은 없습니다. 어떤 도움 감사 감사.

      $('#tabs').tabs({ 
            selected: 1, 
            beforeLoad: function(event, ui) { 
             $('#imageSpinner').show(); 
             /* if ajax call to retrieve tab content failed */ 
             ui.jqXHR.error(function() { 
              // $('#imageSpinner').hide(); 
              ui.panel.html("An error occured."); 
             }); 
            }, 

            /* Called when tab is loaded */ 
            load: function(event, ui) { 
             // $('#imageSpinner').hide(); 

            } 
           }); 


<div id="tabs"> 
           <ul> 
            <li><a href="#tabs-1">PL Message Viewer</a> 
            </li> 
            <li><a href="#tabs-2">File Message Viewer</a> 
            </li> 
           </ul> 

           <div id="tabs-1" style="height:535px; overflow-y:scroll; float:left; z-index:1;"> 
            <div style="margin-left:32px;"> 
             <div id="buttonContent" class="buttonContente"> 
             <img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'"> 
             </div> 
            </div> 
           </div> 

           <div id="tabs-2" style="height:535px; overflow-y:scroll; float:left;"> 
            <div style="margin-left:32px;"> 
             <div id="buttonContentFile" class="buttonContente"></div> 
            </div> 
           </div> 

          </div> 




function getFilters() { 
        return $.ajax({ 
         type: "GET", 
         url: "InsertMessage", 
         data: "term=PLM", 
         cache: false, 
         success: function (data) {}, 
         error: function (xhr, status, error) { 
          alert(xhr.responseText); 
         } 
        }); 
       } 
       getFilters().done(function (r) { 
        if (r) { 
         gridValsstr = r; 
         gridvals = JSON.parse(gridValsstr); 
         $.each(gridvals.messagetypes, function (key, value) { 
          $("#buttonContent").append('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span> </label></div>'); 
         }); 

        } 
       }) 
        .fail(function (x) { 
         alert("Asynchronous call failed."); 
        }); 

Answer 1

을보십시오. 이미지를 제거하고 내용을 표시하려면 done 함수에서 append() 대신 html()을 사용하십시오.

이렇게하면 이미지가로드 된 콘텐츠로 바뀝니다. 당신이 당신의 결과를로드하는 요소가 당신이 getFilters를 호출 할 때 회 전자에 내용을 설정할 수 있습니다 전화 아약스 알 것 때문에

$("#buttonContent").html('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span> </label></div>'); 

() 함수

function getFilters() 
{ 
    $("#buttonContent").html('<img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">'; 
    // your ajax call 
}); 

Answer 2

... 아약스 호출의 완료 이벤트를 처리하는 기능을 포함하도록 beforeLoad 기능을 변경 페이지가로드 될 때 이미지가 기본적으로 표시되어 마치

beforeLoad: function(event, ui) { 
    $('#imageSpinner').show(); 

    // when ajax call to retrieve tab content is complete 
    ui.jqXHT.done(function() { 
     $('#imageSpinner').hide(); 
    }); 

    // if ajax call to retrieve tab content failed 
    ui.jqXHR.error(function() { 
     ui.panel.html("An error occured."); 
    }); 
}, 

Answer 3

// Tabs 
$("#tabs").tabs({ 
// This enables caching as well 
beforeLoad: function(event, ui) { 
    if (ui.tab.data("loaded")) { 
     event.preventDefault(); 
     return; 
    } 
    ui.jqXHR.success(function() { 
     ui.tab.data("loaded", true); 
     $(".spinner").hide(); 
    }), 
    ui.jqXHR.error(function(jqXHR, textStatus, errorThrown) { 
     alert(lang.tabErrorMsg); 
    }) 
}, 
beforeActivate: function(event, ui) { 
    if (ui.newPanel.html()=="") ui.newPanel.html('<img class="spinner" src="spinner.gif">); 
     } 
});