jquery 콜백에 문제가 있습니다.

저는 html로 아코디언을 가지고 있는데, 헤더 onclick은 initTable 함수를 호출합니다.jquery 콜백에 문제가 있습니다.

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
    $('.accordion ul li h1').click(function() 
    {     
     document.getElementById('processing').innerHTML = "Processing..."; 
     document.body.style.cursor = 'Wait'; 
     $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active'); 

     if ($(this).next().is(':hidden')) 
     { 
     $(this).next().slideToggle().parent().addClass('active'); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div id=processing></div> 
    <div class="wrapper"> 
    <div class="accordion"> 
     <ul> 
     <li> 
      <h1 onclick=initTable("Anticoag")>Anticoag</h1> 
      <div class="ac"> 
      <div id="AnticoagTable" width="100%">Loading...</div> 
      </div> 
     </li>

initTable은 데이터를 가져 오기 위해 서버에 도달하여 몇 초가 걸리는 DataTable을 생성합니다.

내가 뭘 하려는지 내 div id = 'processing'을 "Processing ..."으로 설정합니다. initTable 호출이 발생하기 전에.

는 지금 무슨 일이 일어나고 있는지 테이블 데이터가 돌아올 것이 THEN 표시 기다리고 있다는 것입니다 "처리를 ..."나는이 코드를 사용하여,의 onclick = TEST1 (카테고리)에 내 H1을 변경 시도

. 하지만 어떤 이유로 initTable 함수가 호출되지 않습니다. 구문인지 또는 완전히 잘못 사용하고 있는지 모릅니다.

function test1(category) 
{ 
    test2(category, function() 
    { 
    initTable(category); 
    }); 
} 

function test2(category) 
{ 
    alert("test2"); 
    document.getElementById('processing').innerHTML = "Processing..."; 
    document.body.style.cursor = 'Wait'; 
}

initTable 요청에 의해 기능을 추가 기능 initTable (카테고리) { 경우 (gsCategory === '') = gsCategory 카테고리; else if (gsCategory == category) gbToggle =! gbToggle; else gbToggle = false;

gsCategory = category; 

    if (gbToggle === false) { 
     gsCategory = category; 

     var select = document.forms[0].selFacility; 
     var facility = select.options[select.selectedIndex].value; 

     var patJson = getJson(facility, category); 
     document.getElementById('processing').innerHTML = "Done..."; 
     document.body.style.cursor = 'Default'; 
     var anOpen = []; 
     var sImageUrl = "../images/"; 
     makeTable(category); 

     var oTable = $('#' + category).dataTable({ 
      "bProcessing": false, 
       "bDestroy": true, 
       "aaData": patJson, 
       "bAutoWidth": false, 
       "aoColumns": [{ 
       "mDataProp": null, 
        "sClass": "control center", 
        "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png' + '">', 
        "sWidth": "5%" 
      }, { 
       "mDataProp": "S_PAT_NAME", 
        "sWidth": "30%" 
      }, { 
       "mDataProp": "S_AGE", 
        "sWidth": "15%" 
      }, { 
       "mDataProp": "S_FIN", 
        "sWidth": "30%" 
      }, { 
       "mDataProp": "S_ROOM_BED", 
        "sWidth": "20%" 
      }] 
     }); 

     $('#' + category + ' td.control').live('click', function() { 
      var nTr = this.parentNode; 
      var i = $.inArray(nTr, anOpen); 

      if (i === -1) { 
       $('img', this).attr('src', sImageUrl + "details_close.png"); 
       var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 
       $('div.innerDetails', nDetailsRow).slideDown(); 
       anOpen.push(nTr); 
      } else { 
       $('img', this).attr('src', sImageUrl + "details_open.png"); 
       $('div.innerDetails', $(nTr).next()[0]).slideUp(function() { 
        oTable.fnClose(nTr); 
        anOpen.splice(i, 1); 
       }); 
      } 
     }); 
    } //gbToggle = false 
}

출처

2013-02-10 southfanning

'initTable' 함수는 어떻게 생겼습니까? – YoannM

initTable(category)는 절대로 호출되지 않습니다.

test2

은 다음과 같아야합니다

function test2(category,cb){ 
    alert("test2"); 
    document.getElementById('processing').innerHTML = "Processing..."; 
    document.body.style.cursor = 'Wait'; 
    //Calling the call-back 
    cb(category); 
}

실제 코드의 그. 그러나 당신은 단순히 이미 jQuery를 함께 클릭하는 기능을 할당하여 test1

function test1(category) 
{ 
    test2(category); 

    //asynchronous call to initTable(). 
    setTimeout(function(){ 
     initTable(category); 
    },0); 
}

출처

2013-02-10 19:41:57 YoannM

불행히도 initTable이 돌아올 때까지 div를 변경하지 않습니다. 문서의 코드와 관련이있을 수 있습니다.) .ready? 나는 위의 두 가지 버전을 시도했다. – southfanning

'setTimeout'에'initTable' 콜을 넣는 것은 어떨까요? 내 업데이트를 참조하십시오. – YoannM

예!효과가있었습니다. 질문은 지금 - 왜 그게 효과가 있습니까? 그리고 나는 두 가지 답을 맞출 수 있니? 너희 둘 다 톤을 도왔다. – southfanning

에서 할 수있는, 당신은 필요하지 않습니다 및 onclick이 속성

그냥 클릭 내부의 initTable 전화를 넣어 사용하지 말아야합니다 핸들러 함수. 당신이 data-something 속성을 사용할 수있는 클릭 한 인식

$(document).ready(function() { 
    $('.accordion ul li h1').click(function() { 
    var category = $(this).attr('data-category'); 

    $('#processing')..text("Processing..."); 
    ... 
    initTable(category); 



<h1 data-category="Anticoag">Anticoag</h1>

또한 수행해야합니다

자바 스크립트에 새로운 라인
몇 가지 이해하기에 {을 넣어 잘못된 것을 알고 당신이했기 때문에 인라인 함수를 다른 함수에 넘길 때 무슨 일이 일어나는가?

test2 (category, function() { initTable (카테고리); }});

그리고 test2 함수 정의에 두 번째 인수도 선언하지 않았습니다.

출처

2013-02-10 19:47:21 naugtur

죄송합니다. {내 함수와 h1 태그를 변경하고 div를 "Processing"으로 설정했지만 initTable이 다시 돌아온 후에야 – southfanning

아무 것도 유감스럽게 생각하지 않으며, 경우에 따라 올바르게 작동합니다. 코드 업데이트를 보면 데이터를 동 기적으로 다운로드하고 있음을 알았습니다. 예상하지 못했던 것입니다. anywat jquery를 사용하는 경우 데이터를 가져 오기 위해 사용하십시오. 현재의 경우 initTable 호출을'processing ... '을 표시하는 부분 다음으로 이동하십시오. 내 대답 업데이트 – naugtur

getJson에서 일부 독점 기능에 대한 호출을해야합니다. getJson은 json 문자열을 반환하는 데이터베이스 쿼리 스크립트 (독점적 인 부분)를 호출합니다. 그래서 불행히도 jquery를 사용하여 직접 가져올 수는 없습니다. 내가 할 수 있으면 좋겠지 만, 데이터 테이블을 훨씬 쉽게 사용할 수있게 만들었을 것입니다. – southfanning

jquery 콜백에 문제가 있습니다.

답변

관련 문제