За последние 24 часа нас посетили 19576 программистов и 1607 роботов. Сейчас ищут 1675 программистов ...

как передать переменные в модальное окно Bootstrap

Тема в разделе "JavaScript и AJAX", создана пользователем wolf777, 7 май 2015.

  1. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    Здравствуйте, помогите новичку разобраться с Bootstrap

    сама кнопка
    Код (PHP):
    1. <a data-toggle="modal" data-target="#myModal"
    2. onclick="('mail.php?id={$email.id}')"> 
    само модальное окно
    Код (PHP):
    1. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    2.   <div class="modal-dialog">
    3.     <div class="modal-content">
    4.       <div class="modal-header">
    5.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">×</span></button>
    6.         <h4 class="modal-title" id="myModalLabel">{$subject}</h4>
    7.       </div>
    8.       <div class="modal-body">{$message}</div>
    9.       <div class="modal-footer">
    10.         <button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
    11.       </div>
    12.     </div>
    13.   </div>
    14. </div>
    15.  
    только почему то не выводится информация переменной {$subject} и {$message}

    может ещё нужен какой то скрипт js? пожалуйста помогите разобраться ребят уже неделю с этим вожусь(((

    а если ввожу в индекс строке site.ru/mail.php?id=82, то информация выводится на новой странице (только без модального окна)

    * код заключай в тег
    Код ( (Unknown Language)):
    1. [b]][[/b][b]/code][/b][/color]
     
  2. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  3. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    denis01
    это вывод сообщения которое нам приходит на сайт в письма

    при переходе на ссылку нам открывается mail.php?id=82
    82 - произвольное число(смотря какое письмо открываем)
    вот пример

    http://sg.uploads.ru/pw14j.png

    картинка большая получается поэтому просто ссылка

    у меня не передается в модальное окно только переменные

    {$subject} и {$message}
     
  4. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    ты хочешь вместо открытия нового(popup) окна, сделать модальное от bootstrap?
     
  5. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    denis01 да
     
  6. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    С помощью bootstrap modal можно в окне открыть mail.php?id=82 через iframe, а в iframe если он на том же домене, добраться через javascript iframe children.
    Ещё в модальное окно можно просто подгрузить содержимое mail.php?id=82 и его через DOM модифицировать.
     
  7. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    denis01
    а как это?

    Добавлено спустя 1 минуту 16 секунд:
    я думал так сделать

    Код (PHP):
    1.  $(".mailMessages__subject").click(function (e) {
    2.         e.preventDefault();
    3.         var me = this, meta = $(this).metadata();
    4.  
    5.         if (meta.id === undefined) {
    6.             return false;
    7.         }
    8.  
    9.         var id = meta.id;
    10.  
    11.         var display = function (mail) {
    12.             var mailTitle = '<p><strong>Пользователь:</strong> ' + (username ? username : '<неизвестно>' ) + '</p>'
    13.                 + '<p><strong>Тема:</strong> ' + (subject ? subject : '<без темы>' ) + '</p>'
    14.                 + '<p><strong>От кого:</strong> <span class="mail__from"></span></p>'
    15.                 + '<p><strong>Кому:</strong> ' + (toEmail ? toEmail : '<неизвестно>' ) + '</p>'
    16.                 + (toEmails ? '<p><strong>Копия:</strong> ' + toEmails + '</p>' : '');
    17.  
    18.             var $title = $(mailTitle);
    19.             $title.find(".mail__from").text(mail.sender ? mail.sender : '<без отправителя>');
    20.  
    21.             var mailText = '<div style="margin-top: 25px;" id="main-doc">' + mail.text + '</div>';
    22.             bootbox.dialog({ message: mailText, title: $title, className: "wide-bootbox-modal", buttons: {
    23.                 main: { label: "Закрыть", className: "btn-primary" }
    24.             }});
    25.         };
    26.         return false;
    27.     }); 
    ну мой вариант не работает(
     
  8. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    https://jsfiddle.net/yLa02m0x/1/

    Код (PHP):
    1. <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
    2.  
    3. <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal">
    4.   <div class="modal-dialog modal-lg">
    5.     <div class="modal-content">
    6.         <div id="result">loading...</div>
    7.     </div>
    8.   </div>
    9. </div>
    10.  
    Код (PHP):
    1. $('#myModal').on('shown.bs.modal', function (e) {
    2.   $.get( "mail.php?id=1", function( data ) {
    3.     $( "#result" ).html( data );
    4.   });
    5. });
     
  9. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    denis01 то что выводится loading.. это все понятно, мой вопрос заключался в другом ведь, как передать переменные PHP {$subject} и {$message} в модальное окно.

    если в модальном окне я пропишу так

    Код (PHP):
    1. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    2.   <div class="modal-dialog">
    3.     <div class="modal-content">
    4.       <div class="modal-header">
    5.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">×</span></button>
    6.         <h4 class="modal-title" id="myModalLabel">[color=#FF0000]ЗОГОЛОВОК[/color]</h4>
    7.       </div>
    8.       <div class="modal-body">[color=#FF0000]Привет[/color]</div>
    9.       <div class="modal-footer">
    10.         <button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
    11.       </div>
    12.     </div>
    13.   </div>
    14. </div> 

    то модальное окно выведет Заголовок и привет, а когда стоят переменные то выводит пустое окно

    Код (PHP):
    1. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    2.   <div class="modal-dialog">
    3.     <div class="modal-content">
    4.       <div class="modal-header">
    5.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="false">×</span></button>
    6.         <h4 class="modal-title" id="myModalLabel">{$subject}</h4>
    7.       </div>
    8.       <div class="modal-body">{$message}</div>
    9.       <div class="modal-footer">
    10.         <button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
    11.       </div>
    12.     </div>
    13.   </div>
    14. </div> 
    вот тут пустое окно будет..
     
  10. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    {$subject} и {$message} замени на на то что нужно с помощью PHP или JavaScript
     
  11. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    denis01 в смысле на то что нужно? мне как раз таки и нужно {$subject} и {$message}

    вот сам php код

    Код (PHP):
    1. if (isset($_SESSION['uid'])) {
    2.     require "includes/smarty/Smarty.class.php";
    3.     $smarty = new Smarty();
    4.     $smarty->template_dir = "templates/" . $whmcs->get_sys_tpl_name() . "/";
    5.     $smarty->compile_dir = $templates_compiledir;
    6.     $smarty->assign("template", $whmcs->get_sys_tpl_name());
    7.     $smarty->assign("LANG", $_LANG);
    8.     $smarty->assign("logo", $CONFIG['LogoURL']);
    9.     $smarty->assign("companyname", $CONFIG['CompanyName']);
    10.     $id = $whmcs->get_req_var("id");
    11.     $result = select_query("tblemails", "", array("id" => $id, "userid" => $_SESSION['uid']));
    12.     $data = mysql_fetch_array($result);
    13.     $date = $data['date'];
    14.     $subject = $data['subject'];
    15.     $message = $data['message'];
    16.     $date = fromMySQLDate($date, "time");
    17.     $smarty->assign("date", $date);
    18.     $smarty->assign("subject", $subject);
    19.     $smarty->assign("message", $message);
    20.     $template_output = $smarty->fetch("mail.tpl");
    21.     echo $template_output;
    22.     return 1;
    23. }
    24.  
     
  12. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    smarty не заменяет {$subject} и {$message} ? добейся замены в html через smarty, а по кнопке будет открываться уже модальное окно
     
  13. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    denis01 модальное окно у меня открывается вот что получается

    [​IMG]

    а если допустим словами напишу вместо {$subject} Зоголовок, и вместо {$message} привет, то вот

    [​IMG]

    а в Smarty.class.php хранится библиотека, там нету {$subject} и {$message}

    Код (PHP):
    1. */
    2. class Smarty
    3. {
    4.     /**#@+
    5.      * Smarty Configuration Section
    6.      */
    7.  
    8.     /**
    9.      * The name of the directory where templates are located.
    10.      *
    11.      * @var string
    12.      */
    13.     var $template_dir    =  'templates';
    14.  
    15.     /**
    16.      * The directory where compiled templates are located.
    17.      *
    18.      * @var string
    19.      */
    20.     var $compile_dir     =  '/includes/templates_c';
    21.  
    22.     /**
    23.      * The directory where config files are located.
    24.      *
    25.      * @var string
    26.      */
    27.     var $config_dir      =  'configs';
    28.  
    29.     /**
    30.      * An array of directories searched for plugins.
    31.      *
    32.      * @var array
    33.      */
    34.     var $plugins_dir     =  array('plugins');
    35.  
    36.     /**
     
  14. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  15. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    сейчас гляну ссылки, которые Вы выложили

    _____
    ну это все у меня есть, то что в ссылках и переменные {$subject} и {$message} выводят информацию на экран, получается что все у меня работает, только если определить их в модальное окно, только в этом случае они не выводят информацию

    Добавлено спустя 8 минут 42 секунды:
    denis01 да я знаю что class большой сильно( ну там {$subject} и {$message} все равно нету
     
  16. denis01

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

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

    Код (PHP):
    1. <button>Показать modal0</button>
    2. <button>Показать modal1</button>
    3. <button>Показать modal2</button>
    4. <button>Показать modal3</button>
    5. <button>Показать modal4</button>
    6.  
    7. <div id="modal0"></div>
    8. <div id="modal1"></div>
    9. <div id="modal2"></div>
    10. <div id="modal3"></div>
    11. <div id="modal4"></div> 
    Добавлено спустя 1 минуту 56 секунд:
    это в шаблоне заменяет
    Код (PHP):
    1. $smarty->assign("subject", $subject);
    2. $smarty->assign("message", $message);
    вот это {$subject} и {$message}

    Добавлено спустя 2 минуты 52 секунды:
    index.php
    Код (PHP):
    1. <?php
    2. require_once('Smarty.class.php');
    3. $smarty = new Smarty();
    4.  
    5. $smarty->assign('name', 'Катруська');
    6.  
    7. $smarty->display('index.tpl');
    8. ?>
    index.tpl
    Код (PHP):
    1. Привет {$name} 
    Результат будет: Привет Катруська
     
  17. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    ну это есть у меня в PHP коде

    Код (PHP):
    1. $smarty->assign("subject", $subject);
    2. $smarty->assign("message", $message); 
    мне почему то кажется что нужен просто обработчик JS, для того чтоб выводилось сообщение в модальное окно, например такое

    вот сама кнопка

    <a data-toggle="modal" data-target="#myModal"
    onclick="mailMessages__subject('mail.php?id={$email.id}')">

    дальше обработчик, который выводит сообщения (только я не знаю как его правильно написать)

    Код (PHP):
    1.     $(".mailMessages__subject").bind('click', function (e) {
    2.         e.preventDefault();
    3.         var me = this, meta = $(this).metadata();
    4.  
    5.         if (meta.id === undefined) {
    6.             return false;
    7.         }
    8.  
    9.         var id = meta.id;
    10.  
    11.         var display = function (mail) {
    12.             var mailTitle = '<p><strong>Пользователь:</strong> ' + (username ? username : '<неизвестно>' ) + '</p>'
    13.                 + '<p><strong>Тема:</strong> ' + (subject ? subject : '<без темы>' ) + '</p>'
    14.                 + '<p><strong>От кого:</strong> <span class="from"></span></p>'
    15.                 + '<p><strong>Кому:</strong> ' + (toEmail ? toEmail : '<неизвестно>' ) + '</p>'
    16.                 + (toEmails ? '<p><strong>Копия:</strong> ' + toEmails + '</p>' : '');
    17.  
    18.             var $title = $(Title);
    19.             $title.find("._from").text(sender ? sender : '<без отправителя>');
    20.  
    21.             var mailText = '<div style="margin-top: 25px;" id="main-doc">' + text + '</div>';
    22.             bootbox.dialog({ message: Text, title: $title, className: "wide-bootbox-modal", buttons: {
    23.                 main: { label: "Закрыть", className: "btn-primary" }
    24.             }});
    25.         };
    Добавлено спустя 55 секунд:
    у меня ведь не статическую фразу должно выводить, а должно выводить из БД информацию, поэтому статические фразы не подходят(((
     
  18. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    вместо статики вставь из базы данных значение
     
  19. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    denis01 ну она у меня и стоит) там тока обработчик нужен, я щас сайт нашел в нем сделано тоже что и я хочу, ну там обработчик стоит, делал наподобие ну у меня не плучается
     
  20. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    есть кнопка, на неё нажали, открылось модальное окно, смотря на какую кнопку нажали в это окно подгружай mail.php?=значение_из_кнопки
    в модальное окно
     
  21. wolf777

    wolf777 Новичок

    С нами с:
    26 авг 2014
    Сообщения:
    207
    Симпатии:
    0
    ну вот

    Код (PHP):
    1. <a data-toggle="modal" data-target="#myModal" //кнопка на которую нажимаю
    2. onclick="mailMessages__subject('mail.php?id={$email.id}')"> // mailMessages__subject значение которое пытаюсь подгрузить (ну мой обработчик не работает, поэтому не подгружается)
    3.  
    так ведь должно быть?
     
  22. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Вот тут можно узнать какую кнопку нажали event.relatedTarget
    Код (PHP):
    1. $('#myModal').on('shown.bs.modal', function (event) {
    2.  
    3.     console.log(event.relatedTarget);
    4.   $.get( "mail.php?id=1", function( data ) {
    5.       
    6.     $( "#result" ).html( data );
    7.   });
    8. }); 
    Добавлено спустя 6 минут 29 секунд:
    Вот ещё пример https://jsfiddle.net/yLa02m0x/2/
     
  23. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  24. p@R@dox 55RU

    p@R@dox 55RU Зэк
    [ БАН ]

    С нами с:
    21 май 2014
    Сообщения:
    1.358
    Симпатии:
    7
    Адрес:
    с планеты Ялмез
    автор, у тебя изначально данные не выводятся, но сам fancybox работает, как видишь. Ты в начале с ошибкой разберись, потом туда уже передавай (((((((((( :
     
  25. denis01

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

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    @Виталик78 не достаточно данных, чтобы тебе помочь. Попробуй сделать всплывающее окно не используя генерацию PHP. Как будет работать, уже вставляй данные с помощью PHP.