Передача переменной JQuery в php в модальном

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

<?php $i = 0; while ($row = mysqli_fetch_assoc($data)) { print '<li>'; print '<a class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg"><img src="'.$row["image"].'" /></a><br>'; print '<a class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg"><h4>'.$row['name'].'</h4></a>'; print '</li>'; } ?>

Когда щелкнули изображение / имя, как сохранить путь к изображению или имя, которое было нажато на переменную, и отправить его на php, чтобы я мог запускать запрос и получать дополнительную информацию (на основе щелчка) для заполнения модального?

Я читал это другое сообщение: Как передать переменные jQuery в переменную PHP? Но это только для одного случая, как бы передать переменные, которые распечатываются с использованием цикла while?

Здесь полезен тег data-id модалов?

Solutions Collecting From Web of "Передача переменной JQuery в php в модальном"

В основном, вам нужно сделать следующее:

Загрузите изображения на страницу с помощью php кода
В то же время загрузите кнопки / ссылки, которые выбирают каждое изображение
Для каждой кнопки добавьте атрибут data и сохраните идентификатор строки базы данных для каждой записи изображения в этом атрибуте данных (эти кнопки также настроены для открытия того же модального)
Когда пользователь нажимает кнопку, получает сохраненный идентификатор строки с нажатой кнопки
Сделать ajax-вызов другой php-страницы, передающей идентификатор строки
На другой php-странице используйте идентификатор для поиска записи и возврата всех полей
Вернитесь на первую страницу, когда возвращается вызов ajax, используйте возвращаемые данные, чтобы заполнить контент модала

Вот рабочий пример

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

Полный код для: imagesfromdb.php (главная страница):

 <?php // remove below for production ini_set('display_errors',1); ini_set('display_startup_errors',1); error_reporting(-1); // remove above for production // change these to your own database details $db = new PDO('mysql:host=sotestdbuser.db.10125908.hostedresource.com;dbname=sotestdbuser;charset=utf8', 'sotestdbuser', 'Sotestuser398!'); $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING); // later, change ERRMODE_WARNING to ERRMODE_EXCEPTION so users wont see any errors $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); $sql = 'SELECT id, url FROM imagebase ORDER BY id'; $stmt = $db->prepare($sql); $stmt->execute(); $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); $imgGroups=array(); // check for errors if($stmt->errorCode() == 0) { // no errors foreach($rows as $row) { $id = $row['id']; $url= $row['url']; $imgGrp ='<div class="col-sm-4">'. '<div class="row">'. '<div class="col-sm-12 text-center"><img src="'.$url.'" width="100" height="100" alt=""/></div>'. '<div class="col-sm-12 text-center">'. //note the addition of the "data-row-id" attribute below '<button type="button" class="btn btn-primary get-data" data-row-id="'.$id.'" data-toggle="modal" href="#my-modal">Select image</button>'. '</div>'. '</div>'. '</div>'; array_push($imgGroups,$imgGrp); } } else { // had errors $errors = $stmt->errorInfo(); return $errors[2]; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Images From Database Test</title> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style> img { display: block; margin-left: auto; margin-right: auto } </style> </head> <body> <div class="row text-center" > <h1>Image From DB Test</h1> </div> <div class="row" > <div class="col-sm-12" id="image-groups"> <?php echo join('',$imgGroups); ?> </div> </div> <!-- Modal 7 (Ajax Modal)--> <div class="modal fade" id="my-modal" > <div class="modal-dialog"> <div class="modal-content modal-shadow"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="my-modal-title" >Help</h4> </div> <div class="modal-body"> <div class="col-sm-12 text-center"><img src="" class="image" id="my-modal-image" width="100" height="100" alt=""/></div> <div class="col-sm-12 text-center description" id="my-modal-description"> </div> </div> <div class="modal-footer"> <button type="button" id="" class="btn btn-default reload" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script> $(function(){ // when the user clicks on one of the buttons, get the id from the clicked button // then make an ajax call to another php page $('#image-groups').on('click', '.get-data', function(){ var id = $(this).data('row-id'); var sendVars = 'id='+encodeURIComponent(id); $.ajax({ type: "POST", url: "getimagedetails.php", data: sendVars, success: function(rtnData) { rtnData = $.parseJSON(rtnData) $('#my-modal-title').html(rtnData.title); $('#my-modal-image').attr('src', rtnData.url); $('#my-modal-description').html(rtnData.description); } }); }); }); </script> </body> </html>

Полный код для: getimagedetails.php (страница, на которую мы делаем вызов ajax)

  <?php // remove below for production ini_set('display_errors',1); ini_set('display_startup_errors',1); error_reporting(-1); // remove above for production // change these to your own database details $db = new PDO('mysql:host=sotestdbuser.db.10125908.hostedresource.com;dbname=sotestdbuser;charset=utf8', 'sotestdbuser', 'Sotestuser398!'); $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING); // later, change ERRMODE_WARNING to ERRMODE_EXCEPTION so users wont see any errors $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); if(isset($_POST['id'])){ $sql = 'SELECT url, title, description FROM imagebase WHERE id=? LIMIT 1'; // "?"s here will get replaced with the array elements belowlinkslinks $stmt = $db->prepare($sql); $stmt->execute(array($_POST['id'])); // these array elements will replace the above "?"s in this same order $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); // check for errors if($stmt->errorCode() == 0) { // no errors $rowdata = 'test'; foreach($rows as $row) { $rowdata = array('url' =>$row['url'], 'title' =>$row['title'], 'description' =>$row['description']); } echo json_encode($rowdata); } else { // had errors $errors = $stmt->errorInfo(); echo $errors[2]; } } ?>

Попробуйте сделать ajax-вызов onClick элемента

 <?php $i = 0; while ($row = mysqli_fetch_assoc($data)) { print '<li>'; print '<a class="pass_href btn btn-default" data-toggle="modal" data-href="test/path/to-the-image.jpg" data-target=".bs-example-modal-lg"><img src="'.$row["image"].'" /></a><br>'; print '<a class="pass_href btn btn-default" data-toggle="modal" data-href="test/path/to-the-image-2.jpg" data-target=".bs-example-modal-lg"><h4>'.$row['name'].'</h4></a>'; print '</li>'; } ?>

Теперь jQuery

 $(function(){ $('.pass_href').click(function(){ var href = $(this).attr('data-href'); $.post( "test.php", { href:href } ); }); });

Чтобы показать подробную информацию о модальности, вам нужно отправить форму с помощью ajax.Here я даю вам решение. Сначала добавьте атрибут data-id в обе кнопки, а также вызовите function в событии onclick .

 print '<li>'; print '<a class="btn btn-default" data-id='.$row['id'].' onclick="show(this);" data-toggle="modal" data-target=".bs-example-modal-lg"><img src="'.$row["image"].'" /></a><br>'; print '<a class="btn btn-default" data-id='.$row['id'].' onclick="show(this);" data-toggle="modal" data-target=".bs-example-modal-lg"><h4>'.$row['name'].'</h4></a>'; print '</li>';

а затем отправить форму с помощью ajax для этой функции call.like-

 <script> function show(x){ var id = $(x).data('id'); $.ajax({ type: "POST", url: "your/url", data: { id: id}, success: function(data) { //parse your json data var obj = $.parseJSON(data); if (obj != null){ //append/show your data in your modal body } } }); } </script>

и в вашей php-функции получите ваш отправленный идентификатор и найдите данные для этого идентификатора из базы данных или где угодно. а затем верните свои данные как json тип, используя функцию php json_encode() .