За последние 24 часа нас посетили 19327 программистов и 1643 робота. Сейчас ищут 1782 программиста ...

Как заставить работать JS в модальных окнах bootstrap 3

Тема в разделе "JavaScript и AJAX", создана пользователем winsok, 21 сен 2016.

  1. winsok

    winsok Активный пользователь

    С нами с:
    13 сен 2016
    Сообщения:
    82
    Симпатии:
    1
    Как заставить работать JS в модальных окнах bootstrap 3

    Может кто то сталкивался с подобной проблемой? Как решить?
    Там похоже вообще не работает JS
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Можно после открытия окна запустить свой код.
    В документации даже наглядный пример есть http://getbootstrap.com/javascript/#modals
    Код (Javascript):
    1. $('#myModal').on('shown.bs.modal', function () {
    2.   $('#myInput').focus()
    3. })
     
  3. winsok

    winsok Активный пользователь

    С нами с:
    13 сен 2016
    Сообщения:
    82
    Симпатии:
    1
    тоесть мой код надо сюда засунуть? или как
    Код (Javascript):
    1. $('#myModal').on('shown.bs.modal', function () {
    2.   сюда?
    3. })
     
  4. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    @winsok вариант хороший, попробуй. Можно простой alert() чтобы посмотреть работает это или нет, уже дальше можно будет что-то сложнее вставлять.
    Ты не писал как там всё у тебя устроено, не дал посмотреть на живой пример, по этому предложил самый простой вариант и ссылку на документацию по твоему вопросу.
     
  5. winsok

    winsok Активный пользователь

    С нами с:
    13 сен 2016
    Сообщения:
    82
    Симпатии:
    1
    Не работет. У меня там ничего не обычного:
    jquery.min.js - 1.11.00
    bootstrap.min.js - 3.3.7
    в модальном окне форма, которую нужно отправить ajax и вернуть результат
    JS не мой, найден в сети, чутка переделан
    идеально работает везде, кроме модальных
    Код (Javascript):
    1. function send(injoin) {
    2.     var msg = $('#send[role="'+injoin+'"]').serialize();
    3.     var exit = injoin.split('-');
    4.     $.ajax({
    5.         type: 'POST',
    6.         url: exit[0]+'.php',
    7.         data: msg,
    8.         success: function(data) {
    9.             $('#show_cform-'+injoin).html(data);
    10.         },
    11.         error: function(xhr, str){
    12.             alert('Возникла ошибка: ' + xhr.responseCode);
    13.         }
    14.     });
    15. }
    само окно
    HTML:
    1. <div id="modal" class="modal fade">
    2.             <div class="modal-dialog">
    3.                 <div class="modal-content" id="show_cform-order-2">
    4.                     <form class="form-horizontal" role="order-2" method="post" id="send" action="javascript:void(null);" onsubmit="send(\'order-2\')">
    5.                         <div class="modal-body">
    6.                             <div class="device">'.$text[0].'</div>
    7.                             <div class="form-group">
    8.                                 <input type="text" class="form-control" id="name" placeholder="Введите имя" required>
    9.                             </div>
    10.                             <div class="form-group">
    11.                                 <input type="text" class="form-control" id="phone" placeholder="Введите номер" required>
    12.                             </div>
    13.                         </div>
    14.                         <div class="modal-footer">
    15.                             <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
    16.                             <button type="button" class="btn btn-primary" type="submit">Отправить</button>
    17.                         </div>
    18.                     </form>
    19.                 </div>
    20.             </div>
    21.         </div>
    Вызов окна производится так
    HTML:
    1. <a href="#modal" class="btn btn-primary btn-xs" data-toggle="modal">Заказать</a>
     
  6. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    @winsok ну те куски кода что ты дал, ничего не говорят о том как у тебя всё устроено, лучше живой пример

    В модальном окне не срабатывает onsubmit?
     
  7. winsok

    winsok Активный пользователь

    С нами с:
    13 сен 2016
    Сообщения:
    82
    Симпатии:
    1
    не срабатывает
     
  8. winsok

    winsok Активный пользователь

    С нами с:
    13 сен 2016
    Сообщения:
    82
    Симпатии:
    1
    denis01 так type="submit" есть
     
  9. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    <button type="button" class="btn btn-primary" type="submit">Отправить</button>
    Думаю компьютер не настолько хорошая ванга, и лучше input вместо button
    --- Добавлено ---
    на твоём сайте всё по другому
    HTML:
    1. <button type="button" class="btn btn-primary">Отправить</button>
     
    winsok нравится это.
  10. winsok

    winsok Активный пользователь

    С нами с:
    13 сен 2016
    Сообщения:
    82
    Симпатии:
    1
    это где такое?
     
  11. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    upload_2016-9-22_13-35-29.png
     
  12. winsok

    winsok Активный пользователь

    С нами с:
    13 сен 2016
    Сообщения:
    82
    Симпатии:
    1
    это я уже исправил
    --- Добавлено ---
    где это?
     
  13. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    было в модальном окне (заказать), ты уже исправил
     
    winsok нравится это.
  14. winsok

    winsok Активный пользователь

    С нами с:
    13 сен 2016
    Сообщения:
    82
    Симпатии:
    1