Как правильно реализовать окно настроек, используя jquery, html и среду загрузки Twitter

Question

Я использую среду загрузки Twitter и немного запутываю трийнг, чтобы правильно реализовать модальный (окно подтверждения).

Дело в том, что в тот момент, когда мой сайт отображает таблицу со ссылками, среди каждой ссылки есть «кнопка удаления», когда пользователь нажимает ее, они переходят на другую страницу с запросом подтверждения, кнопкой для подтверждения.это просто ссылка типа delete.php?ref=THE-LINK.Строка THE-LINK - это просто уникальный идентификатор, переданный jquery для определения, какую ссылку удалить:

$('.remove_link').live('click', function(e) {   window.location = 'delete.php?ref=' + $(this).attr('id');  });

Хорошо, теперь я не хочу, чтобы пользователь уходил от таблица страница на страницу delete , я хочу использовать модальное.Модал в твиттере работает очень просто, включая html для формата и javascript:

<script src="JS/jquery-1.7.min.js"></script>
<script src="JS/bootstrap-modal.js"></script>
          <div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
              <a href="#" class="close">&times;</a>
              <h3>Delete URL</h3>
            </div>
            <div class="modal-body">
              <p>You are about to delete one track url, this procedure is irreversible.</p>
              <p>Do you want to proceed?</p>
            </div>
            <div class="modal-footer">
              <a href="delete.php?confirm=yes&ref=THE-URL" class="btn danger">Yes</a>
              <a href="#" class="btn secondary">No</a>
            </div>
          </div>

Тогда вы можете запустить его просто: $('#modal-from-dom').modal('show');.Дело в том, как я могу передать идентификатор THE-URL модальному для того, чтобы сделать его динамичным, потому что в этот момент модальное спрашивает у меня два варианта (ссылки, да или нет), но ссылкидолжна быть динамика, должна меняться в зависимости от идентификатора кнопки удаления ($(#remove_link).attr('id')), которая ее вызывает.Так как я могу сделать эту работу?Спасибо за любую помощь!

Answer 1

Посмотрите этот пример, который я создал: http://jsfiddle.net/MjmVr/1/
Это не идеально, но сделайте свою работу.

Answer 2

Вы можете использовать динамический модал таким образом

Предположим, у вас есть индексное значение с идентификатором i и уникальный ID для каждой записи.

Поместить значение id в атрибут span

(я показываю это в синтаксисе jsp):

  <c:forEach items="${elements}" var="element" varStatus="i">
    <tr>
      <td><c:out value='${element}' /></td>
      <td>
        <div class="center">
        <span id='${element["ID"]}'>
            <a href='#deleteElement' data-toggle="modal" >
              <i class="icon-trash"></i>
            </a>
        </span>
        </div>
      </td>
    </tr>
  </c:forEach>

определите вашу модальную форму

<form action="/submitUserDeleteUrl" 
      id="submitDelete">       
    <hidden name="id">
    <div id="deleteElement" class="modal hide fade">
      <div class="modal-header">
          <a class="close" data-dismiss="modal" >&times;</a>
          <h3>delete form</h3>
      </div>
      <div class="modal-body">
          <p>do you want to cancel element: </p>
      </div>
      <div class="modal-footer">
        <a class="btn" data-dismiss="modal" href="#">
        CANCEL
        </a>
        <input class="btn btn-primary" type="submit" value="OK"/>                                                       
      </div>
    </div>
</form>

добавить настройку jQuery после того, как документ будет готов. Это просто связано с каждая ссылка для модальной инъекции параметров, полученных span

jQuery('#yourtableid a[data-toggle|="modal"]').on('click', function () {
    var id=jQuery(this).parent('span').attr('id');
    jQuery('#deleteElement').one('show', function () {
        //here made simple, you should append
        jQuery(this).find('.modal-body p').text(id); 
        var action = jQuery(this).parent('form').attr('action');
        //shouldn't because there is a hidden in the form anyway check it out
        jQuery(this).parent('form').attr('action', action+'?id='+id);
    });
});