1

Подскажите, у меня вот такой HTML (CSS потом вынесу):

 <div id="comments" >
     <a style="color:black; font-size:19px; text-decoration:none" id="showName">
Имя</a>
    <p style="padding:10px; font-size:17px;" id="showComment">
Какой-то текст</p>

Как мне вставить с такими же параметрами в <a>, <p> новый текст через jQuery посредством AJAX, чтобы не перепрописывать к примеру через .html().
Ну то есть, добавляю в бд и у меня сразу эти данные отображаются, а отображаю их через AJAX.
Вот как я предполагал:

$("form").submit(function (event) {

            $.ajax({
                url: 'keepComment.php',
                type: "POST",
                cache: false,
                data: $(this).serialize(),
                success: function (data) {
                   //#name - id одной формы
               $("#comments").append($("#name").val()); //Вот как я пробывал
                    //$("#showComment").append(document.createTextNode($("#comment").val()));

                }
            });
            return false;
7
  • Что Вы пытаетесь сделать по success? Добавляете к элементу с id comments вэлью элемента с id name? Или это попытка ответ таким образом разобрать?
    – yolosora
    26 янв 2018 в 7:27
  • При success добавляет в бд (php), ну и мне нужно чтобы через js отобразилось сразу это, без обновления страницы. То есть я хочу чтобы через js создало элемент, и вставило К примеру как в ютуб комментарии, отправляем, чуть грузится, и сразу отображает твой коммент. 26 янв 2018 в 7:33
  • 1
    Понял, смутило что функция с параметром. Так вы тут просто текст пытаетесь приаппендить, нужно элементы соответсвующие создать, заполнить и аппендить уже их. Тут даже ajax особо не причем к вопросу.
    – yolosora
    26 янв 2018 в 7:40
  • Это понятно, как это более грамотно сделать можно? 26 янв 2018 в 7:43
  • опять же непонятно вы хотите перезапись значения в уже существующих <a> и <p> или хотите дописать новые? В вашем коде есть неоднозначность...
    – yolosora
    26 янв 2018 в 7:55

2 ответа 2

1

Можно хоть так, но стили действительно лучше перенести) И id для каждого взятого комментария сомневаюсь, что нужны.

var name = $("#name").val();
var comment = $("#comment").val();
$("#comments").append(`<a style="color:black; font-size:19px; text-decoration:none">${name}</a>`);
$("#comments").append(`<p style="padding:10px; font-size:17px;">${comment}</p>`);
3
  • Есть какой-то более универсальный способ? Нежели пихать так все. Писал же, что такое не подойдет 26 янв 2018 в 13:08
  • @nikitaAbramov в каком смысле "более универсальный"? Можно отдельным методом завести пустой тег, отдельным методом подцепить ему стиль и отдельным методом положить значение, но смысл от этого только эстетический (например через методы .css() и .val()
    – yolosora
    26 янв 2018 в 13:10
  • у ТС в голове есть какая-то идея "универсальности", которую он требует уже не в первый раз (ru.stackoverflow.com/questions/775265), но что эта "универсальность" означает - не объясняет
    – user176262
    26 янв 2018 в 15:43
0

Я могу только догадываться, что Вам не нравится повторение html-a для тэгов а и p в коде. Это действительно не очень красиво.

Заведите на странице невидимый шаблон:

<div id="template" style="display:none;">
  <a style="color:black; font-size:19px; text-decoration:none">Имя</a>
  <p style="padding:10px; font-size:17px;">Какой-то текст</p>
</div>

А в коде:

var name = $("#name").val();
var comment = $("#comment").val();
var newItem = $($("#template").html());
newItem.find("a").text(name);
newItem.find("p").text(comment);
$("#comments").append(newItem);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.