부트 스트랩 테이블 및 레일 항목을 폐기 할 수 없습니다.

Question

부트 스트랩 테이블 플러그인이 작동 중이며 테이블이 훌륭하게 표시됩니다. 그러나 편집 단추와 삭제 단추가 있어야합니다. 수정 버튼이 작동하도록 할 수 있습니다. 그러나, 나는 내 JS를 통해 파괴를 보내는 방법을 알아낼 수 없습니다. 또한, 다른 문제가 하나 있습니다. 처음 페이지가로드되면 JSON 테이블이로드되지 않습니다. 전체 테이블을 얻으려면 페이지를 새로 고쳐야합니다. 이견있는 사람?

index.html.erb :

<div id="custom-toolbar"> 
     <%= link_to new_weight_tracker_path, :class => "btn btn-default", :remote => true, "data-toggle" => "modal", "data-target" => "#addMeasurement", 'aria-label' => "Add New Measurement" do %><span class="glyphicon glyphicon-plus"></span><% end %> 
</div> 
<table id="table-pagination" data-toggle="table" data-url="/weight_trackers.json" data-click-to-select="true" data-toolbar="#custom-toolbar" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-height="600" data-pagination="true" data-sort-name="user_date" data-show-export="true" data-sort-order="desc" data-export-types="['json', 'xml', 'csv', 'txt', 'excel']" > 
    <thead> 
    <tr> 
     <th data-field="weight" data-sortable="true" data-align="right">Weight:</th> 
     <th data-field="waist" data-sortable="true" data-visible="false" data-align="right">Waist:</th> 
     <th data-field="wrist" data-sortable="true" data-visible="false" data-align="right">Wrist:</th> 
     <th data-field="hip" data-sortable="true" data-visible="false" data-align="right">Hip:</th> 
     <th data-field="forearm" data-sortable="true" data-visible="false" data-align="right">Forearm:</th> 
     <th data-field="note" data-sortable="true" data-visible="false" data-align="left">Note:</th> 
     <th data-field="user_date" data-sortable="true" data-align="right">Date:</th> 
     <th class="nopadding" data-field="operate" data-formatter="operateFormatter" data-events="operateEvents" data-align="center" data-valign="center" data-halign="center"></th> 
     <th class="nopadding" data-field="operate" data-formatter="operateFormatter2" data-events="operateEvents" data-align="center" data-valign="center" data-halign="center"></th> 
    </tr> 
    </thead> 
</table> 
<br /> <br /> 
<!-- End JSON Table --> 

application.js :

def destroy 
    @weight_tracker.destroy 
    flash[:notice] = "Measurement Deleted" 
    respond_with(@weight_tracker) 
    end 

내가 클릭 .remove을 얻을 수있는 방법 :

function operateFormatter(value, row, index) { 
    return [ 
     '<a class="edit ml10 btn btn-default" href="javascript:void(0)" title="Edit">', 
      '<i class="glyphicon glyphicon-pencil"></i>', 
     '</a>' 
    ].join(''); 
} 

function operateFormatter2(value, row, index) { 
    return [ 
     '<a class="remove ml10 btn btn-default" href="javascript:void(0)" title="Delete">', 
      '<i class="glyphicon glyphicon-trash"></i>', 
     '</a>' 
    ].join(''); 
} 

window.operateEvents = { 
    'click .edit': function (e, value, row, index) { 
     document.location.href='/weight_trackers/' + row.id + '/edit' 

     console.log(value, row, index); 
    }, 
    'click .remove': function (e, value, row, index) { 
     alert('Are you sure you want to delete entry for ' + row.created_at); 
     document.location.href='/weight_trackers/' + row.id 
     console.log(value, row, index); 
    } 
}; 

이 방법 파괴 weight_tracker_controller.rb 항목을 삭제 하시겠습니까? 페이지가 처음로드 될 때 자동으로로드됩니다.

Answer 1

최상의 방법이 아닐 수도 있습니다. 하지만 내 application.js에 다음을 추가하여 삭제를 요청합니다. 그리고 그것은 효과적입니다.

function operateFormatter2(value, row, index) { 
    return [ 
     '<a class="remove ml10 btn btn-default" data-method="delete" href="/weight_trackers/' + row.id + '" title="Delete">', 
      '<i class="glyphicon glyphicon-trash"></i>', 
     '</a>' 
    ].join(''); 
} 

    'click .remove': function (e, value, row, index) { 
     alert('Are you sure you want to delete entry for ' + row.created_at); 
     document.location.href='/weight_trackers' 
     console.log(value, row, index); 
    } 
};