2016-08-29 2 views
0

FooTable 반응 형 테이블 플러그인이 작동했습니다. 이제 PHP 스크립트를 설정하여 PostgreSQL을 가져오고 JSON 인코딩 된 배열을 반환하려고합니다.jQuery를 사용하는 글로벌 변수

지금까지 모든 것이 잘 작동합니다. 이 jQuery 스크립트를 작성하는 데는 정말 가깝지만, 왜 내 변수가 전달되지 않는지 잘 모르겠습니다. 여기

는 스크립트입니다 : 내 콘솔을 보면

var columns_json; 
    var rows_json; 

    jQuery(function($){ 

    $.ajax(
    { 
     type: "POST", 
     dataType:"JSON", 
     url: "a.php", 
     data: {action: 'test'}, 

     success: function(data) 
     { 
      columns_json = data[0]; 
      rows_json = data[1]; 

      console.log(columns_json); 
      console.log(rows_json); 
     }, 

     failure: function(data) 
     { 
      alert("Something went wrong"); 
     } 
    }); 

    $('.table').footable(
    { 

     "paging": {"enabled": true}, 

     "filtering": {"enabled": true}, 

     "sorting": {"enabled": true}, 

     "columns": columns_json, 

     "rows": rows_json     

     }); 
}); 

, 나는 심지어 두 개의 데이터 배열을 올바르게 ... 심지어 수 있도록 출력 데이터를 시도 반환 볼 수 있습니다 (이 정확해야합니다 아무 문제) :

console.log(JSON.stringify(columns_json)) 

그래서 내가 jQuery에 대해 이해하고 있지 않다 것은 없다 : 나는 내가 $.ajax 함수 내에서 스크립트의 상단에 선언 된 변수를 업데이트 할 때, 왜에서 사용할 수있는 JSON 배열되지 않습니다 $('.table').footable(의 기능은 무엇입니까?

나는 1 달 조금 넘게 jQuery를 사용 해왔다. 그래서 이것은 나에게 모두 새로운 것이다.

이 문제를 해결할 수있는 해결 방법이 하나 발견되어이 내용은 Post에 대한 제안이었습니다. 스크립트를 수정하여 제대로 작동하도록했습니다. 그러나 콘솔은 경고를 던졌습니다 :

"주 스레드에서 동기 XMLHttpRequest 객체가되지 않습니다 최종 사용자의 경험의 해로운 영향의 때문이다.".

항상 그렇듯이 모든 생각과 제안은 대단히 감사하겠습니다.

답변

0

성공 콜백 내에서 테이블을 채우는 로직을 이동하십시오.

또는 논리에 함수를 캡슐화하고 성공 콜백에서 해당 함수를 호출 할 수도 있습니다.

코드가 작동하지 않는 이유는 $ .ajax가 비동기식이기 때문입니다. 즉, 서버 요청이 완료 될 때까지 기다리지 않고 다음 코드가 즉시 실행되기 때문입니다.

링크 된 답변에서 async: false - 서버 응답을 기다리는 동안 ajax 호출을하기 때문에 (나쁜) 대안이 될 수 있지만 브라우저가 고정되어있는 것처럼 사용자에게도 보입니다.

제안 : 아약스 전화를하는 동안 애니메이션/오버레이 로딩을 표시하는 데 몇 초 정도 걸릴 수 있습니다.

코드를 수정 한 후에도 여전히 변수가 전역이어야하는지 확인하십시오.

var columns_json; 
 
var rows_json; 
 

 
jQuery(function($) { 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    dataType: "JSON", 
 
    url: "a.php", 
 
    data: { 
 
     action: 'test' 
 
    }, 
 

 
    success: function(data) { 
 
     columns_json = data[0]; 
 
     rows_json = data[1]; 
 

 
     $('.table').footable({ 
 

 
     "paging": { 
 
      "enabled": true 
 
     }, 
 

 
     "filtering": { 
 
      "enabled": true 
 
     }, 
 

 
     "sorting": { 
 
      "enabled": true 
 
     }, 
 

 
     "columns": columns_json, 
 

 
     "rows": rows_json 
 

 
     }); 
 
    }, 
 

 
    failure: function(data) { 
 
     alert("Something went wrong"); 
 
    } 
 
    }); 
 

 

 
});