正确的方法来重新加载已编辑的博客文章

Evening all, this is really the last piece to my site being ready for testing.

Cant get my head around the correct way of this.

So im building a blogging cms per say.

I have blog posts that are echoed out into their own divs. In this div is also a hidden ckeditor text area.

If the user is logged in, and its their blog, they can see a edit button and when clicked the current text is hidden and the ckeditor is shown.

This is okay and works, when the ckeditor is shown, its also shown with a save button.

On clicking the save button some validation takes place and an ajax call is made to the update.php page where by the blog is updated. Also all good!

However, what i have tried to is when the response from that php page is okay, hide the editor, and update the current content of that div.

So far i have used this:

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

The #container is a main container that holds all the blog information, and it works in sense as the content is reloaded. However, if i go to click the edit button again the text area is not replaced and also the text area has the red border around it suggesting its been submitted, and its empty. I set a red border if its empty.

The .load() seems to be messing with the other scripts on the page.

Am i using the .load() function correctly? And how can i just reload the current div as i think its more effective.

I was thinking of assigning each blog post div its own unique id, and then send that to the php page and send it back along with the response.

And then do e.g.

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

But i just want to know if im going about this in the way i should be, and is also going to be non buggy etc.

Worst case is that i have to perform a page reload after each edit, but it just doesnt feel a slick as i want.

I know the examples talk about loading content from another page and then loading a certain div from that. But the way i have build my site is that its just one query and the blog posts are echoed via a foreach loop.

Just need to know how to reload a single div, on the current page and not affect the other scripts etc.

If needed, i can set up a test account and blog on my site for an example.

Craig!

EDIT: this is the javascript for when the edit button is clicked:

$(".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();
});

This is the ajax call:

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>');

                }
            });
        }

This is how the data is shown on the page:

<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>

3个回答

I wouldnt recommend reloading the entire page with an ajax call every time, the advantage of ajax calls is that you can load seperate parts to save a lot of bandwidth, so you guessed right.

I dont know what update.php returns exactly, if this can only return the entire page it's smart to make a special function that only returns a blog post

Then the call would like something like (a GET request would not be my first choice, that just depends on your system)

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

For a quick fix, just give every post's div a unique id and add that to your load call

$("#container #blogPost"+blogPostId).load("*url* #container #blogPost"+blogPostId);
dongshang5862
dongshang5862 终于找到了这个:$(document).on('click','。button',function(){)};
6 年多之前 回复
douhuan6305
douhuan6305 我猜这个问题是因为脚本没有加载新数据? 我已经尝试将javascripts放在#postholder div中,但这仍然不起作用
6 年多之前 回复
duanfa2014
duanfa2014 为问题增加了一些片段:)
6 年多之前 回复
douju4278
douju4278 我需要更多的东西来回答这个问题,就像编辑表单和update.php脚本的片段一样
6 年多之前 回复
douhuan6157
douhuan6157 谢谢,所以我使用了这个|| $(“#container #postholder”)。load(“URL.com/viewblog.php?id=155 #container #postholder”); || 这是有效的,但用于显示和隐藏文本区域的按钮在重新加载内容后不起作用。 我知道很难看出我的意思,但任何想法可能导致这种情况? 其他脚本工作,而不是涉及重新加载内容的脚本
6 年多之前 回复



有点难以理解你想要做什么,但我会试一试...... </ p> \ n

你不能只使用.html()替换编辑所在的div内的内容。
如果你已经将新数据发送到使用ajax的地方你应该有一个变量集或能够 为你发送到服务器的内容设置一个变量,因此想要在div中使用。</ p>

  $(“#container”)。html(你用的是什么) 作为ajax请求的数据)
</ code> </ pre>

或类似的东西。</ p>

但如果我们这样做会容易得多 至少可以看到某种形式的代码片段。</ p>

希望这会有所帮助</ p>

我可能已经解释过如果它没有让我更好地告诉我 感觉,我会再试一次:)</ p>
</ div>

展开原文

原文

It's kind of hard to understand what you are trying to do but I'll give it a go...

could you not just use .html() to replace the content inside the div where the editor is. If you have sent the new data to where ever using ajax you should have a variable set or be able to set a variable for the content that you sent to the server and as such want to use in the div.

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

or something to that effect.

But it would be a lot easier if we could at least see some form of code snippet.

Hope this helps

I could probably have explained better let me know if it doesn't make sense and I'll try again :)

douziqian2871
douziqian2871 添加了更多信息:)
6 年多之前 回复
dongmouhao7438
dongmouhao7438 如果您发布了一个ajax请求的片段(当然减去网址),我应该能够做出更明智的推荐。 如果你愿意
6 年多之前 回复
douhuan7862
douhuan7862 我确实想到了这一点,实际上它可以做到。 只是再次加载页面,例如 location.reload(); 它不是太糟糕,只是不那么好。 但是,我会尝试使用我提交的数据,但在回复中将其发回。
6 年多之前 回复



事件委托是我所追求的,似乎这就是答案:</ p>

 <  code> $(document).on('click','。edity',function(){
// DO SOMETHING
)};
</ code> </ pre>
</ div>

展开原文

原文

event delegation is what i was after and it seems like this is the answer:

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐