jQuery 토글 버튼으로 ajax 호출을 사용하는 방법

Question

나는 OpenERP-odoo 모듈로 작업 중이다.

토글 버튼은 클릭시 게시 - 게시 취소를 표시하는 데 사용됩니다. 각 클릭에 일부 백그라운드 프로세스가 json으로 RPC를 사용하여 데이터를 가져가

백그라운드 프로세스가있는 동안 내가 .hide()에 시간이 토글 버튼을 원하는 :

​  $(document).on('click', '.js_publish_management .js_publish_btn', function() { 
      var $data = $(this).parents(".js_publish_management:first"); 
      var self=this; 
      openerp.jsonRpc($data.data('controller') || '/website/publish', 'call', {'id': +$data.data('id'), 'object': $data.data('object')}) 
       .then(function (result) { 
        $data.toggleClass("css_unpublished css_published"); 
        $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off'); 
       }).fail(function (err, data) { 
        website.error(data, '/web#return_label=Website&model='+$data.data('object')+'&id='+$data.data('id')); 
       }); 
     }); 

[Inshort 내가 바로이 버튼을 전환 할 해달라고]

저는 Ajax 호출에 익숙하지 않습니다. 아무도 날 안내 할 수있어! TIA.

Answer 1

  $('.btn-group').ready(function() { 
       $('.btn-group').button('loading'); 
       openerp.jsonRpc($data.data('controller') || '/website/publish', 'call', {'id': +$data.data('id'), 'object': $data.data('object')}) 
        .then(function (result) { 
         $data.toggleClass("css_unpublished css_published"); 
         //do something 
         $('.btn-group').button('reset'); 
        }).fail(function (err, data) { 
         //do something 
         $('.btn-group').button('reset'); 
        }); 
      }); 

당신은 표시 할 준비가 클래스를 부트 스트랩 사용하려고 할 수 있습니다 '로드 ...'상태를 대신

Answer 2

은 함수의 첫 번째 줄에 .hide() 요소를 호출합니다. 그런 다음 아약스 호출을 보여주기 위해 .always() 기능을 추가 :

$(document).on('click', '.js_publish_management .js_publish_btn', function() { 
    var $data = $(this).parents(".js_publish_management:first"); 
    var self=this; 

    //hide your element here 
    element.hide(); 

    openerp.jsonRpc($data.data('controller') || '/website/publish', 'call', {'id': +$data.data('id'), 'object': $data.data('object')}) 
     .then(function (result) { 
     $data.toggleClass("css_unpublished css_published"); 
     $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off'); 
     }).fail(function (err, data) { 
      website.error(data, '/web#return_label=Website&model='+$data.data('object')+'&id='+$data.data('id')); 
     }).always(function(){ 
      //show your element again. Once the call is resolved either way 
      element.show(); 
     }); 
    });