重新加載已編輯博客帖子的正確方法

Question

總而言之，這實際上是我網站上准備進行測試的最后一部分。

不能正確地理解這一點。

因此，即時通訊建立了一個博客的CMS說。

我的博客帖子被自己的div呼應。 在這個div中，也是一個隱藏的ckeditor文本區域。

如果用戶已登錄及其博客，則可以看到一個編輯按鈕，單擊該按鈕將隱藏當前文本並顯示ckeditor。

沒關系，並且可以正常工作，當顯示ckeditor時，還顯示帶有保存按鈕。

單擊“保存”按鈕后，將進行一些驗證，並對更新博客的update.php頁面進行ajax調用。 也都不錯！

但是，我試圖做的是當該php頁面的響應正常時，隱藏編輯器，並更新該div的當前內容。

到目前為止，我已經使用了：

$("#container").load("#container");

#container是保存所有博客信息的主要容器，在重新加載內容時它在一定意義上起作用。 但是，如果我再次單擊編輯按鈕，則不會替換該文本區域，並且該文本區域周圍有紅色邊框，表明其已提交，並且為空。 如果邊框為空，則設置紅色邊框。

.load（）似乎與頁面上的其他腳本混亂。

我是否正確使用.load（）函數？ 我如何重新加載當前的div，因為我認為它更有效。

我正在考慮為每個博客帖子div分配其自己的唯一ID，然后將其發送到php頁面，並將其與響應一起發送回去。

然后做例如

 $("#container").load(response.blogPostID),

但是我只想知道我是否按照我應該的方式進行操作，並且也將是非越野車等。

最糟糕的情況是，每次編輯后我都必須重新加載頁面，但是它並沒有像我想要的那樣光滑。

我知道這些示例談論的是從另一個頁面加載內容，然后從該頁面加載某個div。 但是我建立網站的方式是，它只是一個查詢，而博客文章則通過foreach循環回顯。

只需要知道如何在當前頁面上重新加載單個div，而不影響其他腳本等。

如果需要，我可以在我的網站上設置測試帳戶和博客作為示例。

克雷格！

編輯：這是單擊編輯按鈕時的javascript：

$(".edity").click(function () {
     $(this).parent().find('.edity').toggle();
     $(this).parent().find('.saveupdatebutton').toggle();
     $(this).parent().find('.updatebutton').toggle();
     $(this).parent().find('.editor').toggle();
     $(this).parent().find('.buildtext').toggle();
     $(this).parent().find('.deleteupdatebutton').toggle();
});

這是ajax調用：

if (check) {
            $.ajax({
                type: "POST",
                url: "process/updatepost.php",
                data: $targetForm.serialize(),
                dataType: "json",
                success: function (response) {

                    if (response.databaseSuccess)
                    $("#container #postholder").load("http://url.com/viewblog.php?id=155 #container #postholder");
                    else
                    $ckEditor.after('<div class="error">Something went wrong!</div>');

                }
            });
        }

這是數據在頁面上的顯示方式：

<div class="blogtest" id="156">
<form action="process/updatepost.php" class="updatepost" method="post">
<input type="button" class='.$editenabled.' value="Edit">
<input type="submit" name="saveupdatebutton" class="saveupdatebutton" value="Save">
<input type="submit" name="deleteupdatebutton" class="deleteupdatebutton" value="Delete">
<input type="hidden" class="postid" name="postid" value="'.$postID.'">
<input type="hidden" class="editorid" name="editorid" value="'.$ckEID.'">
<input type="hidden" class="pageurl" name="pageurl" value="'.$pageurl.'">
<input type="hidden" name="buildowner" value="'.$buildcreator.'" />
<br>

<div class="text">

<div class="buildtext" id="'.$postID.'">'.$convertedtext.'</div>

<div class="editor"><textarea name="muffin" id="'.$ckEID.'" class="ckeditor">'.$text.'</textarea></div>

</div>

</form>

</div>

Answer 1

很難理解您要做什么，但我會嘗試一下...

您不能只使用.html（）替換編輯器所在的div中的內容。 如果您已將新數據發送到使用ajax的任何位置，則應該設置一個變量，或者能夠為發送到服務器的內容設置一個變量，並因此要在div中使用。

$("#container").html(what ever you used as data for the ajax request)

或類似的東西。

但是，如果我們至少可以看到某種形式的代碼片段，將會容易得多。

希望這可以幫助

我可能可以解釋得更好，讓我知道這是否沒有道理，我會再試一次:)

Answer 2

我不建議每次都使用ajax調用重新加載整個頁面，ajax調用的優點是您可以加載單獨的部分以節省大量帶寬，因此您猜對了。

我不知道什么update.php確切地返回，如果這只能返回整個頁面，則明智的做法是創建一個僅返回博客文章的特殊功能

然后，該呼叫就需要類似的東西（GET請求不是我的首選，這取決於您的系統）

$( "#container #blog" + blogPostId ).load( "update.php?q=updatePost&id="+blogPostId );

為了快速解決，只需為每個帖子的div分配一個唯一的ID，然后將其添加到您的加載調用中

$("#container #blogPost"+blogPostId).load("*url* #container #blogPost"+blogPostId);

Answer 3

事件委托就是我所追求的，而這似乎就是答案：

$(document).on('click','.edity',function(){
    // DO SOMETHING
)};