Как предотвратить исчезновение динамически добавленного элемента после перезагрузки страницы.

У меня есть следующий код, который генерирует элемент div в html, когда я нажимаю кнопку отправки. Элемент div получает сгенерированный результат успешно, но проблема заключается в том, когда я обновляю страницу, которую она исчезает, как заставить ее оставаться там, даже когда страница обновляется позже.Как предотвратить исчезновение динамически добавленного элемента после перезагрузки страницы.

Моя цель - я хочу, чтобы пользователь добавил комментарии на мою страницу. Поэтому я хочу, чтобы комментарии оставались на странице.

<script type="text/javascript"> 

    function myfunction(){ 

     var name=document.forms["myform"]["name"].value; 
     var comment = document.forms["myform"]["comment"].value; 

     var div=document.createElement("div"); 
     var text=document.createTextNode(name+" commented "+comment); 
     div.appendChild(text); 

     document.body.appendChild(text); 

    } 

</script> 

<body> 
    <form name="myform"> 
     Name: <input type="text" name="name"/> 
     <br> 

     Comment: 
     <textarea rows="4" cols="50" name="comment"> 
     </textarea> 
     <input type="button" value="submit" onclick="myfunction()"/> 

    </form> 


</body> 
<div id = "com"></div>

источник

2013-11-22 user1854373

При загрузке страницы, Вы должны т Убедитесь, что вы загружаете все комментарии, введенные до загрузки страницы. Таким образом, должен быть вызов Ajax на загрузку страницы, который загружает все комментарии с сервера. –

Но я не хранил комментарии на сервере, не могли бы вы рассказать немного больше. – user1854373

. Вам нужно сохранить комментарии в базе данных с помощью системы сценариев back end. Весь ваш скрипт - это редактирование HTML DOM локального клиента. Знаете ли вы языки, кроме JavaScript? PHP, Ruby и т. Д.? Как вы размещаете свой сайт? – sbking

Похоже, вы даже хотите что-то вроде этого:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple-web-based-chat-application/

Попробуйте это, я использую JQuery, хотя: http://jsfiddle.net/sVgxa/

HTML :

<textarea id="input"></textarea> 
<button id="submit">Enter</button> 
<div id="newDivs"></div>

Javascript:

$('#submit').click(function() { 
    var text = $('#input').val(); 
    $('#newDivs').append('<div>' + text + '</div>'); 
});

Если вы хотите что-то, что показывает, между различными пользователями вам нужно что-то более сложное с использованием Ajax.

источник

2013-11-22 05:24:39 Supplement

Спасибо всем за быстрые ответы. Да, я думаю, что они должны храниться где-то в некоторой базе данных. Я знаю это в java, но я использую хостинг cPanel www.unichost.com. Мой план не поддерживает java. Я никогда не читал PHP/CGI. Не могли бы вы посоветовать? – user1854373

«Дополнение», ваша точка верна, она правильно отображает введенный текст, но я хочу, чтобы текст оставался в дальнейшем последующем доступе/обновлении страницы. В настоящее время я не храню комментарии нигде, просто печатаю, но мне нужна помощь для хранения и доступа в некотором роде. – user1854373

Удивительно, хорошо, что вы могли бы воспользоваться максимумом, следуя инструкциям в ссылке, опубликованной выше. Вот как вы будете оставлять свои комментарии на странице после публикации и обновления. – Supplement

Вы можете использовать JavaScript печенье:

Fiddle

HTML:

<form name="myform">Name: 
    <input type="text" name="name" /> 
    <br>Comment: 
    <textarea rows="4" cols="50" name="comment"></textarea> 
    <input type="button" value="submit" onclick="myfunction()" /> 
    <div id="com"></div> 
</form>

JavaScript:

document.addEventListener("DOMContentLoaded", check, false); 

function check() { 
    if (checkCookie("name")) { 
     var name = document.forms["myform"]["name"].value; 
     var comment = document.forms["myform"]["comment"].value; 
     var div = document.createElement("div"); 
     var text = document.createTextNode(getCookie("name") + " commented " + getCookie("comment")); 
     div.appendChild(text); 
     document.body.appendChild(text); 
    } 
} 

function myfunction() { 
    var name = document.forms["myform"]["name"].value; 
    var comment = document.forms["myform"]["comment"].value; 
    var div = document.createElement("div"); 
    var text = document.createTextNode(name + " commented " + comment); 
    div.appendChild(text); 
    document.body.appendChild(text); 
    if (!checkCookie("name")) { 
     setCookie("name", name, 365); 
     setCookie("comment", comment, 365); 
    } 
} 

function getCookie(c_name) { 
    var c_value = document.cookie; 
    var c_start = c_value.indexOf(" " + c_name + "="); 
    if (c_start == -1) { 
     c_start = c_value.indexOf(c_name + "="); 
    } 
    if (c_start == -1) { 
     c_value = null; 
    } else { 
     c_start = c_value.indexOf("=", c_start) + 1; 
     var c_end = c_value.indexOf(";", c_start); 
     if (c_end == -1) { 
      c_end = c_value.length; 
     } 
     c_value = unescape(c_value.substring(c_start, c_end)); 
    } 
    return c_value; 
} 

function setCookie(c_name, value, exdays) { 
    var exdate = new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); 
    document.cookie = c_name + "=" + c_value; 
} 

function checkCookie(cookie) { 
    var flag = getCookie(cookie); 
    if (flag != null && flag != "") { 
     return true; 
    } 
    return false; 
}

источник

2013-11-22 05:35:19

Вики, я думаю, что вы упомянули это, когда пользователь добавляет комментарий, мы сохраняем комментарий и его имя в виде файлов cookie в браузере пользователя. И в последующих запусках мы просто извлекаем их из файлов cookie. Но я хочу сказать, что как только пользователь, который впервые обратится к странице, сможет просмотреть комментарии, поскольку куки-файлы не будут отправлены для него. – user1854373

Я думаю, вы не упомянули об этом в своем вопросе –

Чтобы сделать это, вам нужно будет выполнить ответ Дополнения –

Как предотвратить исчезновение динамически добавленного элемента после перезагрузки страницы.

ответ

Смежные вопросы