帮助AJAX在Rails 3中使用jQuery更新编辑过的评论

当我编辑已经存在的评论并按下'保存' -在我的jquery中单击input#comment_submit，它隐藏了我的编辑表单，并显示了原始状态的列表(即更新之前)。

但是如果我刷新页面，它会显示更新后的评论——这表明评论实际上是通过Rails更新的。所以不知道发生了什么。

我想要的最终产品是:

单击编辑。输入注释的更新。
单击save。jQuery隐藏编辑框，并显示更新后的评论-不做整个页面刷新。

下面是注释的HTML:

<div class="comment-show"> 
   <div class="details"> 
    <span class="comment_name">Test</span> said
   </div> 
   <div class="uploads"> 
      <div class="upload-image" title="red-stripe-dark.jpg"><img alt="Red-stripe-dark" src="red-stripe-dark.jpg" /></div> 
      <div class="upload-image selected-image" title="red-stripe-original.jpg"><img alt="Red-stripe" src="red-stripe.jpg" /></div> 
      <div class="upload-image selected-image" title="red-stripe-red.jpg"><img alt="Red-stripe-red" src="red-stripe-red.jpg" /></div> 
      <div class="upload-image" title="red-stripe-bw.jpg"><img alt="Red-stripe-bw" src="red-stripe-bw.jpg" /></div> 
   </div> 
   <div class="body"> 
      This is extremely ugly. WOW.Let's see if this works any at all.<br /> 
       <span class="timestamp">about 1 hour ago</span> 
      <div class="comment-buttons"> 
        <button class="comment-edit green awesome">Edit</button> 
        <button class="red awesome" data-destroy-url="/comments/28" data-destroy-title="Delete this comment?" data-compv-mapping="comments.destroy">Delete</button> 
      </div> 
    </div> 
</div>
    <div class="comment-form" style="display:none"> 
    <form accept-charset="UTF-8" action="/comments/28" class="ajax-form" data-remote="true" id="comment-ajax-form-update" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /></div> 
<input id="comment_stage_id" name="comment[stage_id]" type="hidden" value="46" /> 
<input id="comment_user_id" name="comment[user_id]" type="hidden" value="1" /> 
<h3>Add a Comment</h3> 

<div> 
    <div class="uploads" > 
    <div class="hint">Select the images you are discussing</div> 
        <div class="upload-image image-selector" title="red-stripe-dark.jpg" id="image-selector-141"> 
         <img alt="Red-stripe-dark" src="red-stripe-dark.jpg" /> 
        <input autocomplete="off" id="comment[uploads_ids][141]" name="comment[upload_ids][]" style="display:none;" type="checkbox" value="141" /> 
         </div> 
        <div class="upload-image image-selector" title="red-stripe-original.jpg" id="image-selector-140"> 
         <img alt="Red-stripe" src="red-stripe.jpg" /> 
        <input autocomplete="off" checked="checked" id="comment[uploads_ids][140]" name="comment[upload_ids][]" style="display:none;" type="checkbox" value="140" /> 
         </div> 
        <div class="upload-image image-selector" title="red-stripe-red.jpg" id="image-selector-139"> 
         <img alt="Red-stripe-red" src="red-stripe-red.jpg" /> 
        <input autocomplete="off" checked="checked" id="comment[uploads_ids][139]" name="comment[upload_ids][]" style="display:none;" type="checkbox" value="139" /> 
         </div> 
        <div class="upload-image image-selector" title="red-stripe-bw.jpg" id="image-selector-138"> 
         <img alt="Red-stripe-bw" src="red-stripe-bw.jpg" /> 
        <input autocomplete="off" id="comment[uploads_ids][138]" name="comment[upload_ids][]" style="display:none;" type="checkbox" value="138" /> 
         </div> 
    </div> 
<textarea cols="40" id="comment_body" name="comment[body]" rows="10" style="width: 100%">This is extremely ugly. WOW. Let's see if this works any at all.</textarea>
    <div class="actions"> 
      <input class="green awesome" id="comment_submit" name="commit" type="submit" value="Save" /> 
       <button class="comment-form-cancel red awesome">Cancel</button> 
    </div> 
    </div> 
   <br style="clear:both" /> 
  </form> 
</div> 
   </li> 
 </ul> 
 <div id="comment-form"> 
 <form accept-charset="UTF-8" action="/comments" class="ajax-form" data-remote="true" id="comment-ajax-form-create" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div> 
<input id="comment_stage_id" name="comment[stage_id]" type="hidden" value="46" /> 
<input id="comment_user_id" name="comment[user_id]" type="hidden" value="1" /> 
<h3>Add a Comment</h3> 

<div> 
    <div class="uploads" > 
    <div class="hint">Select the images you are discussing</div> 
        <div class="upload-image image-selector" title="red-stripe-dark.jpg" id="image-selector-141"> 
         <img alt="Red-stripe-dark" src="red-stripe-dark.jpg" /> 
        <input autocomplete="off" id="comment[uploads_ids][141]" name="comment[upload_ids][]" style="display:none;" type="checkbox" value="141" /> 
         </div> 
        <div class="upload-image image-selector" title="red-stripe-original.jpg" id="image-selector-140"> 
         <img alt="Red-stripe" src="red-stripe.jpg" /> 
        <input autocomplete="off" id="comment[uploads_ids][140]" name="comment[upload_ids][]" style="display:none;" type="checkbox" value="140" /> 
         </div> 
        <div class="upload-image image-selector" title="red-stripe-red.jpg" id="image-selector-139"> 
         <img alt="Red-stripe-red" src="red-stripe-red.jpg" /> 
        <input autocomplete="off" id="comment[uploads_ids][139]" name="comment[upload_ids][]" style="display:none;" type="checkbox" value="139" /> 
         </div> 
        <div class="upload-image image-selector" title="red-stripe-bw.jpg" id="image-selector-138"> 
         <img alt="Red-stripe-bw" src="red-stripe-bw.jpg" /> 
        <input autocomplete="off" id="comment[uploads_ids][138]" name="comment[upload_ids][]" style="display:none;" type="checkbox" value="138" /> 
         </div> 
    </div> 
<textarea cols="40" id="comment_body" name="comment[body]" rows="10" style="width: 100%"></textarea> 
    <div class="actions"> 
       <input class="green awesome" id="comment_submit" name="commit" type="submit" value="Add Comment" /> 
     </div> 
      </div> 
     <br style="clear:both" /> 
     </form>

这是嵌入在页面上的JS:

$(document).ready(function(){
$('button.comment-edit').live('click', compv.comments.edit);
$('button.comment-form-cancel').live('click', compv.comments.editCancel);
$('div.actions input#comment_submit.green.awesome').live('click', compv.comments.updated);
$('#comment-ajax-form-update')
    .bind("ajax:success", function(evt, data, status, xhr){
    //console.log("Updated comment");
});
$('#comment-ajax-form-create')
    .bind("ajax:success", function(evt, data, status, xhr){
    compv.comments.updateView('comments', xhr);
    $('div.image-selector').each(function(){
        var element = $(this);
        element.children('input').attr('checked', false);
        element.removeClass('selected-image');
    });
});

下面是相关的JS代码片段:

   compv.comments.updated = function(event){
    var parentElement = $(this).parents("li");
    parentElement.find('div.comment-show').fadeIn("slow");
    parentElement.find('div.comment-form').fadeOut("slow");
}; 
    compv.comments.edit = function(event){
console.log("Clicked Edit");
var parentElement = $(this).parents("li");
parentElement.find('div.comment-show').hide();
parentElement.find('div.comment-form').show();
};
compv.comments.editCancel = function(event){
    console.log("Clicked Cancel");
    var parentElement = $(this).parents("li");
    parentElement.find('div.comment-show').show();
    parentElement.find('div.comment-form').hide();
};
compv.comments.updated = function(xhr){
    var parentElement = $(this).parents("li");
    parentElement.find('div.comment-show').fadeIn("slow");
    parentElement.find('div.comment-form').fadeOut("slow");
};
compv.comments.updateView = function(divPrefix, xhr){
var dataDiv = 'div#'+divPrefix;
if(xhr.responseText.length > 1){ 
    $(dataDiv + ' ul').append(xhr.responseText);
    $(dataDiv + ' ul li:last').effect('highlight', {}, 3000);
}
};
var compv = {
    exists: true,
    tools: {
        exists: true,
        csrf_param: null,
        csrf_token: function() { },
        clientError: function() { }
    },
    comments: {
        exists: true,
        updateView: null,
        selectImage: null,
        upvote: null,
        edit: null,
        cancelEdit:null,
        downvote: null,
        showVotes: null,
        destroy: {
            success: null,
            error: null,
            dialog: 'comment-destroy-dialog'
        },
        getUploadID: function(element) {
            return $(element).parents("li").attr("data-upload-id");
        }
    },
    steps: {
        exists: true,
        selectFn: {},
        selectedClass: "selected-step",
        selectableClass: "selectable-step",
        selectedClient: {
            element: null,
            id: null,
            stepType: "client",
            ajaxSuccess: null
        },
        selectedProject: {
            element: null,
            id: null,
            stepType: "project",
            ajaxSuccess: null
        },
        selectedStage: {
            element: null,
            id: null,
            stepType: "stage",
            ajaxSuccess: null,
            getID: function() {
                return compv.steps.selectedStage.id;
            },
            displayCompare: function() {
                window.open($(this).attr('data-url'), "_blank");
            }
        },
        selectedUpload: {
            element: null,
            id: null,
            stepType: "image",
            primeUploadDisplay: null,
            ajaxSuccess: null,
            uploader: null,
            noCloseDialog: false
        }
    }
};

您需要让服务器端返回一些值，表示如果评论编辑成功，在这种情况下，您有三个选项:

让JavaScript刷新整个页面(OK选项)
使服务器端不仅返回成功消息，而且还返回新的评论列表(最差的选项)
使用JavaScript，替换你的评论容器，与数据，你输入在编辑字段(最佳选项)

如果你选择了第三个选项，你应该:

添加服务器返回值，如果评论编辑成功
在ajax内添加成功语句，检查返回值是否为成功值，如果是，运行函数
为JavaScript添加一个函数，用edit(或任何你使用的)的值替换注释容器HTML。

相关内容

最新更新

热门标签：