觸發狀態變化之前的jQuery Ajaxy插件回調

Question

我使用Ajaxy插件嘗試恢復ajax請求歷史記錄。

考慮解碼：

$.Ajaxy.configure({ 
    'Controllers': { 
     '_generic': { 
      request : function() {}, 
      response: function(){ 
       var data = this.State.Response.data; 
       jQuery('#content').html(data.responseText); 
      } 
     } 
    } 
}); 

我有此線

VAR數據= this.State.Response.data;

將responseText注入到#content元素。

但我可能需要運行一些代碼，然後才請求頁面創建一個url並在觸發ajax請求之前定義一個目標id。

例如，假設我有一個產品列表網頁（不是真正的代碼，我只是對這個問題，創建）：

<button data-id="1" data-controller="product" data-action="edit" onClick="getPage(this, '#editContainer1');" >Edit</a> 
<button data-id="1" data-controller="product" data-action="remove" onClick="getPage(this, '#removeContainer1');" >Remove</a> 
<hr> 
<button data-id="2" data-controller="product" data-action="edit" onClick="getPage(this, '#editContainer2');" >Edit</a> 
<button data-id="2" data-controller="product" data-action="remove" onClick="getPage(this, '#removeContainer2");" >Remove</a> 
<hr> 

很多結果，都可能增加ID ....

有一個JavaScript代碼執行以下操作：

function getPage(element, target) 
{ 
    var id = jQuery(element).data('id'); 
    var controller = jQuery(element).data('controller'); 
    var action = jQuery(element).data('action'); 
    var url = "/" + controller + "/" + action + "/" + id; 
    jQuery.get(url,function(responseText){jQuery(target).html(responseText)}); 
} 

所以，我該如何解決呢？

Answer 1

如果我正確理解您的請求...... 你不需要在HTML元素的onClick動作： HTML：

<button data-id="1" data-controller="product" data-action="edit" >Edit</a> 
<button data-id="1" data-controller="product" data-action="remove">Remove</a> 
<hr> 
<button data-id="2" data-controller="product" data-action="edit">Edit</a> 
<button data-id="2" data-controller="product" data-action="remove">Remove</a> 
<hr> 

JAVASCRIPT：

$(function(){ 
    $('button[data-controller=product]').click(function() { 
     var id = $(this).data('id'); 
     var composedURL = "/"+$(this).data('controller')+"/"+$(this).data('action')+"/"+id 
     $.ajax({ 
      url: composedURL, 
     }) 
     .done(function(data) { 
      // called when ajax request was successful 
      console.log("success"); 
      if($(this).attr('data-action')=='edit'){ 
       // clicked EDIT button 
       $('#editContainer'+id).html(data); 
      } 
      else{ 
       // clicked REMOVE button 
       $('#removeContainer'+id).html(data); 
      } 
     }) 
     .fail(function() { 
      // called when there was an error 
      console.log("error"); 
     }) 
     .always(function() { 
      // called when request finished (regardless of error or success) 
      console.log("complete"); 
     }); 

    }) 
});