хочу добавить динамический контент на странице JSP - PullRequest
Новая
       10

хочу добавить динамический контент на странице JSP

1 голос
/ 30 мая 2009

Я использую теги Struts2 для моей страницы проектирования на передней стороне.

Теперь у меня есть требование на моей странице jsp, чтобы я поместил 3 простых поля и в какую-то ссылку для добавления, я хочу, чтобы несколько раз было 3 или 4 поля в той же форме динамически.

Например, если пользователь нажимает 5 раз на ссылку добавления, то 5 раз, когда 3 или 4 поля должны отображаться на странице JSP.

Я знаю, что ajax может быть полезен для этой цели. Но все же я запутался, что как этого добиться.

Пожалуйста, ответьте, если у кого-то есть решение ...

Спасибо заранее ....

1 Ответ

1 голос
/ 01 июня 2009

Ваш лучший подход - использовать jquery для упрощения JavaScript. Эта простая html-страница демонстрирует подход: 

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"/>
  </head>
  <body>
    <form method="post" action="#">
      <table>
        <tbody> 
          <tr>
            <td><input type="text" name="fieldname"/></td>
            <td><a href="#" onclick="$(this).closest('tr:not(:only-child)').remove();return false;">delete</a></td>
          </tr>
          <tr>
            <td><input type="text" name="fieldname"/></td>
            <td><a href="#" onclick="$(this).closest('tr:not(:only-child)').remove();return false;">delete</a></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td></td>
            <td><a href="#" onclick="var tr = $(this).closest('table').find('tbody tr:first-child').clone(true); $(tr).find(':input').val(''); $(this).closest('table').find('tbody').append(tr); return false;">add</a>
            </td>
          </tr>
        </tfoot>    
      </table>
    </form>
  </body>
</html>

Это краткое изложение подхода. Каждый повторяющийся элемент является частью строки в таблице. Вы можете выбрать любой другой тип контейнера, соответственно корректируя jquery. Повторяющиеся элементы находятся внутри tbody, в каждой строке есть вход и ссылка, которая удаляет эту строку. Обратите внимание, что он удалит строку, только если он не единственный дочерний элемент tbody. Нам нужно, чтобы у нас всегда был способ добавить новый элемент из ссылки добавления. Логика добавления находится в tfoot. Ссылка add находит первую строку таблицы в соответствующем теле, клонирует ее, очищает все значения в любых полях ввода и добавляет ее в тело в качестве новой строки.

Не рекомендуется вставлять столько атрибутов javascript / jquery в атрибут, как я делал в этом примере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...