Dynamically and Permanently Adding an Element to Your Page - JavascriptjQuery - Stack Overflow

admin管理员组

文章数量:1425778

I'm working on a website project from scratch. The content section of the main page has a form and a div of class "blog". When the user is logged in on the admin account, the form shows up. This allows you to pick a title and content to post in the blog. The current code works well, except for the fact that the posts are removed when the page is refreshed. How I can permanently add this to the page?

Here's my code:

<script type="text/javascript">
function addtext() {
    var title = document.blogform.title.value;
    var content = document.blogform.content.value;

    var $blogTitle = $('<div class="blogtitle">' + title + '</div>');
    var $blogContent = $('<div class="blogbody">' + content + '</div>');

    $('#blog').prepend($blogContent);
    $('#blog').prepend($blogTitle);
}
</script>

<h2>Submit New Blog Post</h2>
<div class="blogtitle">Submit a new blog post:</div>
<div class="blogbody">
    <form name="blogform">
    <fieldset class="fieldsetoffset"><legend>Post</legend>
        <div>Title of Post:</div>
        <input type="text" name="title">
        <div>Content of Post:</div>
        <textarea name="content" class="ment" rows="6" cols="88"></textarea>
        <hr>
        <input type="button" value="Add New Text" onClick="addtext();">
    </fieldset> 
    </form>
</div>
<div id="blog"></div>

I'm working on a website project from scratch. The content section of the main page has a form and a div of class "blog". When the user is logged in on the admin account, the form shows up. This allows you to pick a title and content to post in the blog. The current code works well, except for the fact that the posts are removed when the page is refreshed. How I can permanently add this to the page?

Here's my code:

<script type="text/javascript">
function addtext() {
    var title = document.blogform.title.value;
    var content = document.blogform.content.value;

    var $blogTitle = $('<div class="blogtitle">' + title + '</div>');
    var $blogContent = $('<div class="blogbody">' + content + '</div>');

    $('#blog').prepend($blogContent);
    $('#blog').prepend($blogTitle);
}
</script>

<h2>Submit New Blog Post</h2>
<div class="blogtitle">Submit a new blog post:</div>
<div class="blogbody">
    <form name="blogform">
    <fieldset class="fieldsetoffset"><legend>Post</legend>
        <div>Title of Post:</div>
        <input type="text" name="title">
        <div>Content of Post:</div>
        <textarea name="content" class="ment" rows="6" cols="88"></textarea>
        <hr>
        <input type="button" value="Add New Text" onClick="addtext();">
    </fieldset> 
    </form>
</div>
<div id="blog"></div>

• javascript
• jquery
• html
• ajax
• dom

Share Improve this question Follow edited May 8, 2013 at 12:18 Jesse 8,75977 gold badges4949 silver badges5757 bronze badges asked May 8, 2013 at 12:11 Nomadic PenguinNomadic Penguin 6311 silver badge88 bronze badges 4

• are you running anything on the backend? I.E. ASP.NET, Java, PHP, etc. You'd need to save your post to a database and then pull the data when loading the page. – CM Kanode Commented May 8, 2013 at 12:15
• Yeah, my whole site is php and I have a database/mysql support on the server. Just not that fortable with using it yet, but I'm definitely willing to learn. – Nomadic Penguin Commented May 8, 2013 at 12:37
• MySQL is easy to use and PHP has a lot of support for it. There should be plenty of tutorials out there for you. Once you get fortable with using a DB, you'll love it. I seem to remember that PHP has good documentation. It's been awhile since I've used PHP. – CM Kanode Commented May 8, 2013 at 13:16
• Took me a few hours of playing with it, but I got it figured out! Thanks. – Nomadic Penguin Commented May 9, 2013 at 23:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 0

You should use a database (or flat-files, but not remended..) to store those extra parts. On your page, create a database connection (php/PDO), fetch any existing records from the database and when the admin stores it you should insert it into your database.

HTML is flat, you can add and delete elements dynamically by altering the DOM but that's only on your screen and nobody elses :)

I assume that this is a static HTML page. Otherwise you would be refreshing from a server-based data source. If you are going to be doing this, then the only other way would be to store the data as client-side cookies.

You can't do this by Javascript or jQuery because they are client side languages. for this which you want to achieve you have to use a Server Side Language and database

Javascript is client side, meaning when you add content to the page with jQuery it's local to your browser only, not on the server-side (it's not actually changing the website, it's just changing what your browser is rendering).

You will need to either use cookies (there is a great jQuery cookies plugin that's incredibly simple to use) or, preferably, have some kind of server-side script store it in the database and retrieve the values later, i.e. with PHP/mySQL, since cookies are still going to be specific to you rather than anyone who might visit the website. If nothing else you could use PHP to write it to a text/html file on the server that is then displayed later but that's a really ugly solution and a database is really where you should be going here.

I would probably use jQuery's AJAX functions to call a PHP function when addtext() is triggered that passes it the content and title values to write to the database. Then add a bit of php code on the page to check the database for existing posts and display them.

本文标签： Dynamically and Permanently Adding an Element to Your PageJavascriptjQueryStack Overflow