Как в jQuery добавить в форму елемент?

Question

[FanKiLL]

Ребята, есть форма, в ней много дивов с классом social_link, где находятся елементы формы.
Мне нужно по нажатии на кнопку с классом add_new_social_link добавить ещё 1 див в форму.

Но при этом регулярным выражением поменять одно слово на timestamp

Вот такая форма:

<form accept-charset="UTF-8" action="url" id="social_links" method="post">
  <div class="social_link">...</div>
  <div class="social_link">...</div>
  <div class="social_link">...</div>
  <div class="social_link">...</div>

  <a class="add_new_social_link" href="#"> Add New Social Link</a>
</form>

Вот что нужно добавить - этот div наверно надо где то в переменной держать:

<div class="social_link">

  <select class="chosen-select form-control" id="social_links_new_attributes_replaceme_link_type" name="social_links[new_attributes][replaceme][link_type]" style="display: none;">
    <option value=""></option>
    <option value="email">Email</option>
    <option value="jabber">Jabber</option>
    <option value="twitter">Twitter</option>
    <option value="facebook">FaceBook</option>
  </select>

  <div class="chosen-container chosen-container-single" style="width: 758px;" title="" id="social_links_new_attributes_replaceme_link_type_chosen">
    <a class="chosen-single chosen-default" tabindex="-1"><span>Select an Option</span>

      <div><b></b></div>
    </a>

    <div class="chosen-drop">
      <div class="chosen-search"><input type="text" autocomplete="off"></div>
      <ul class="chosen-results"></ul>
    </div>
  </div>
  <input class="form-control" id="social_links_new_attributes_replaceme_link_value" name="social_links[new_attributes][replaceme][link_value]" type="text">
  <a class="btn btn-danger remove_new_social_link" data-placement="right" data-toggle="tooltip" href="#" title="" data-original-title="Delete New Social Link"><i class="fa fa-trash-o"></i></a>
</div>

Если видите во всяких id в их названии есть слово replaceme вот его надо заменить на timestamp
Вот что начал писать, но в javascript не очень шарю.

$(document).on('page:change', function () {
    $('#social_links').on('click', '.add_new_social_link', function (event) {
        console.log('Knock Knock Knock');
        var regexp, time;
        time = new Date().getTime(); // получили timestamp
        // как теперь заменить в выше приведённом диве слово replaceme на timestamp
       // и добавить этот див в форму
    });
});

Comments

[FanKiLL]

Или лучше вместо регулярки использовать конкатенацию?
Сделать отдельную функцию которая будет возвращать строку и в этой функции вместо raplaceme конкатенировать timestamp?

Answer 1

[barkalov]

Многострочный html-код темплейта проще всего хранить в прямо в body, вот так:

<div id="new_social_link_template" style="display: none">
    <div class="social_link">
        ...          
    </div>    
</div>

Потому что в javascript не очень удобно эскейпить многострочность.

Сам js таков:

var regexp = new RegExp('replaceme', 'g');
var time = new Date().getTime(); // получили timestamp        
var newSocialLinkHtml = $('#new_social_link_template').html();
newSocialLinkHtml = newSocialLinkHtml.replace(regexp, time);
$('#social_links').append(newSocialLinkHtml);

Правда это добавит в самый конец формы. Чтобы добавлять к другим social_link'ам, оберните их в контейнер и добавляйте в него.

Comments

[FanKiLL]

Отличное решение хранить темплейт в style="display: none"
Спасибо.

[FanKiLL]

Немного изменил ваше решение, так как хоть html и не виден но он отрабатывал на странице и к нему применялись плагины jQuery в моём случае это chosen

Подсмотрел как сделано тут и на проектах ТМ. Поставил template в data атрибут. В html поменял кавычки на ".

<div data-blueprint="здесь html" id="new_social_link_template" style="display: none"></div>

js будет выглядеть так:

var regexp = new RegExp('replaceme', 'g');
var time = new Date().getTime(); // получили timestamp
var newSocialLinkHtml = $('#new_social_link_template').data('blueprint');
newSocialLinkHtml = newSocialLinkHtml.replace(regexp, time);
$('.social_links').append(newSocialLinkHtml);

Ещё раз спасибо.

[barkalov]

@FanKiLL Пожалуйста.
Чтобы плагины не применялись, можно (до того, как эти плагины инициализируются) узел с шаблонами отцепить от DOM'а и положить его в глобальную переменную. Можно прям инлайн-скриптом, следом за шаблоном.

$(function () { // запишемся в очередь сразу, до плагинов, но запустимся когда DOM будет готов
    window.templates = {}; // глобальный объект
    templates.socialLink = $('#new_social_link_template');
    templates.socialLink.detach(); // отсоединяем из DOM
});