Question

我想创建一个编辑链接，以在单击该文章时对其进行更新，
在模板中，其结构为：

后文字
- 文章内容
- 文章形式
后菜单

我将“文章形式”隐藏为<div class="article-form" style="display: none;">，直到点击编辑链接。

<div class = "col-md-12 post-text" >
    <div class="article-content">
        {{article.content}}
    </div>

    <div class="article-form" style="display: none;">
    <form class="form-horizontal" action="/article/edit/{{ b.id }}" method="POST">
        <div class="form-group">
            <div class="col-sm-12">
                <textarea class="form-control" id="editContent" name="content" rows="10" cols="30"> 
                    {{form.content.value}} 
                </textarea >
            </div>
        </div>
        <div class="form-group" >
            <div class="col-sm-offset-0 col-sm-12">
                <button type = "submit" class = "btn btn-success btn-sm" id = "saveEditBtn"> Save Edits </button>
            </div>
        </div>
    </form> 
    </div><!-- article-form -->
</div>

<div class="post-menu pull-left">
    <a id="editArticleLink" href="{% url 'article:article_edit' article.id  %}">
        <span class="glyphicon glyphicon-edit" aria-hidden="true">edit </span>
    </a>
    <a id="delArticleLink">
        <span class="glyphicon glyphicon-trash" aria-hidden="true">delete</span>
    </a>
</div>

更新完成并且喜欢提交后，使用Ajax将数据发送到后端，隐藏“文章形式”并显示“文章内容”。

<script>
$(document).ready(
$(".post-menu a").on("click", function(e){
    e.preventDefault();
    //retrieve the topmost element which the target lives in 
    $postText = $(e.target).closest(".post-text");
    //hide article-content
    $postText.find(".article-content").hide();
    //show the article-form for users to update 
    $postText.find(".article-form").show();

    //capture the button submitting event
    $(".article-form button").on("click", function(e){
        var content = $postText.find("textarea").val();
        $.ajax({
            type:"POST",
            url: ,
            data:,
            success: function(){
                //if saved successfully
                $postText.find(".article-content").show();
                $postText.find(".article-form").hide();
            },//success
        })//ajax post request
    });//nested button click event
}) //click event
)//ready
</script>

我的问题是在ajax success中， $postText.find(".article-content").show()仍显示未更新的文章，

如何在不刷新页面的情况下检索更新的内容？

Answer 1

如果您可以将编辑后的版本发送到服务器...您拥有新内容！用它更新.article-content，然后显示。

这就是我想的...

//capture the button submitting event
$(".article-form button").on("click", function(e){
  var content = $postText.find("textarea").val();
  $.ajax({
    type:"POST",
    url: ,
    data:,  // <-- There is something missing here... I assume it's content.
    success: function(){
      //if saved successfully
      $postText.find(".article-content").html(content).show();  // update before the show!
      $postText.find(".article-form").hide();
    },//success
  })//ajax post request
});

检索新更新的文章，而无需刷新页面

1 个答案: