Модальные окна + ajax запросы
 

Здравствуйте, я раньше писал на php и с ajax/jquery сталкивался не так часто. Сейчас встала потребность в более-менее современном интерфейсе для приложения. Я нашел пример, как у меня примерно будет выглядеть моя часть интерфейса с обработкой пользователей, вот ссылка:

http://bootsnipp.com/snippets/featur...-for-datatable

Собственно, вопрос:

Как с помощью такого модального окна отправить данные. Я так понимаю что нужно как-то при ВЫВОДЕ модального окна привязывать к нему такие параметры как user_id к примеру, чтобы потом отправлять на нужный скрипт.

Как организовать взаимодействие сервера с клиентом решать тебе...
Клиент лишь сможет отправить некие данные на некий УРЛ, без перезагрузки страницы. А сервер сможет, получив данные, правильно обработать полученную информацию...

Так у меня вопрос именно про клиентскую часть. Мне получается нужно из строки в таблице получить id пользователя, передать его в модальное окно и из модального окна уже ajax отправить. Вопрос в том как данные из строки таблицы в модальное окно запихнуть?

Если пользователь авторизован, то ничего откуда либо и выдирать не надо, сервер и так знает ID пользователя.

У тебя окно точно модальное?

Да, вот посмотрите ссылку что я привел в первом посте. Там таблица, в ней в каждой строке есть запись про пользователя и кнопки на модальные окна с его редактированием и удалением. Чтобы этот пример реально заработал, нужно как-то в модальное окно id этого пользователя передать, чтобы потом из модального окна осуществить ajax запрос на редактирование/удаление пользователя.

Посмотрите первую ссылку, я говорил про пользователей в таблице, вопрос именно про редактирование пользователей с помощью модального окна и ajax.

Я не хожу на левые ссылки. :)
Да и в конторе у нас слежка за ресурсами. Зачем мне объяснять для чего я туда ходил?

И как же ты открываешь модальное окно? А то у меня все же есть сомнения именно в оконности и модальности. :)

Вот в примере кода, эти модальные окна вызываются вот так:

<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>

То есть для редактирования и удаления пользователя свое окно.

jquest, не хочу тебя расстраивать... Но у тебя нет окна. И тем паче модального.

Почему нет? Вот код окон, если он нужен:

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
      </div>
          <div class="modal-body">
          <div class="form-group">
        <input class="form-control " type="text" placeholder="Mohsin">
        </div>
        <div class="form-group">
        
        <input class="form-control " type="text" placeholder="Irshad">
        </div>
        <div class="form-group">
        <textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
    
        
        </div>
      </div>
          <div class="modal-footer ">
        <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
      </div>
        </div>
    <!-- /.modal-content --> 
  </div>
      <!-- /.modal-dialog --> 
    </div>
    
    
    
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
      </div>
          <div class="modal-body">
       
       <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
       
      </div>
        <div class="modal-footer ">
        <button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
      </div>
        </div>
    <!-- /.modal-content --> 
  </div>
      <!-- /.modal-dialog --> 
    </div>

У тебя странное понятие окна...

Вот "код окон"

alert('Test');
prompt('Test');
confirm('Test');
window.open('http://javascript.ru/forum/jquery/68044-modalnye-okna-ajax-zaprosy-2.html#post448185');

В твоем примере лишь хтмл теги...

Потому как нет собственно команд создающих именно окна...

Вы с бутстрапом работали когда-нибудь? Это модальные окна бустрапа, я же скидывал пример, вот часть вызова окна с id delete

data-toggle="modal" data-target="#delete"

Если бы по ссылке перешли сами бы убедились, что все работает. Вопрос совсем в другом, как из таблицы с пользователями достать данные и привязать их к модальному окну, чтобы из него потом эти данные через аякс отправить управляющему скрипту.

Они не модальные и не окна... :D

Это же ты работаешь с бустрапом, не я... :)
Лови событие клика... Отыскивай нужный элемент с тем ИДшником... При формировании УРЛа, для отправки данных серверу, подсунешь еще один параметр - ИД пользователя.

Есть другой способ...
Если можешь повлиять на разметку элемента, который ты, по наивности, называешь "модальным окном", добавь в него скрытый инпут.
Когда будут заполняться поля редактирования, данными из строки пользователя, в тот скрытый инпут запиши ИД пользователя...

Т.е. тебе просто нужно уметь манипулировать данными в пределах одного окна, в котором все и происходит. ;)

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

Я с бустрапом дело не имел. Это же ты с ним работаешь...

jquest,
нет там ничего модального ни от бустрапа ни от другого. Это пример аля модального диалога. Если речь идет об административном разделе и нужен диалог между клиентом и сервером, то этого "окна" уж точно не хватит.

В смысле не от бутстрапа? Вот пример как в бс вызываются модальные окна https://www.w3schools.com/bootstrap/bootstrap_modal.asp , в том примере точно так же. Мне достаточно редактировать данные пользователя (несколько полей) и из такого модального окна будет посылаться ajax со всеми данными. И если его не хватит, то что тогда нужно?

Так обработчик все равно свой придется писать, поэтому тут все на jquery писать придется

jquest,
Зачем вам вообще нужно это окно? Необходимо редактировать список пользователей. А это форма, и если редактирование, это только удалить, то это набор флажков, значениями которых проставлены ID пользователей, и проставлено сервером при запросе этой формы. На бутстрапе ли эта таблица-форма построена или нет роли не играет.

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

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

Редактирование это редактирование данных в полях таблицы, то есть данных пользователя (email, пароль, джаббер), а так же блокировка пользователя. А форма это и есть модальное окно. Ajax уже из этой формы в модальном окне и высылается.

Вы точно зациклились на окне. Кстати, пароли в открытом виде в базе не держат, и редактировать их вы не имеете права, возникают ситуации по восстановлению входа, но это отдельный вопрос. Как в общем то и прочие конфиденциальные данные пользователя, это его собственность, не ваша.
А вот блокировка пользователя и т.п., такие вещи как раз удобнее производить из списка, включая и групповое редактирование. Детальное редактирование да, можно и и в окне, хотя это не принципиально, главное как следует из темы, это асинхронный обмен с сервером. И редактирование при этом не обязательно "модальность", возможно более удобным будут и иные решения.

Никто в открытом виде пароли не держит, у нас ситуация такая что пароль назначает и меняет администратор. Мне нужно чтобы интерфейс отработал по такой схеме:

1. Администратор выбирает пользователя и нажимает "редактировать"
2. Всплывает модальное окно с информацией о пользователе, администратор редактирует данные
3. Нажимается кнопка "Обновить" и данные из формы аяксом уходят на управляющий скрипт

Продублирую основной вопрос - как получать данные из ряда таблицы (там где информация о пользователе) и записывать ее в форму модального окна (вместе со скрытым полем, где будет указан индентификатор пользователя)?

Ну так забудьте о сообщениях бутстрапа, и если уж так охота в "окне", так для этого есть и более продвинутые готовые плагины. Это же и самому просто сделать ибо нет никаких окон, все это слой с абсолютным позиционированием размещенный выше всех. Запросили сервер, пусть это будет ID пользователя, которое можно содержать в чем угодно на странице. Сервер вернул форму, которую и помещают в такой слой добавляемый на страницу.

Как получить ID и передать, это уже конкретное представление требуется, описывать многочисленные примеры никто не станет.