어떻게 링크에서 $ _GET 변수를 부트 스트랩 모달로 전달할 수 있습니까?

내 HTML 코드 스 니펫.

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-book-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

링크를 클릭 할 때 열리는 모듈 :

<!-- Modal -->
    <div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <?php var_dump($_GET)?>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

내 이드를 모달로 전달하는 적절한 방법이 있습니까?

해결법

==============================

1.id를 전달하는 단순한 해결책은 데이터베이스에서 전달 된 ID와 모달로 표시되는 레코드를 가져 오는 것입니다.

id를 전달하는 단순한 해결책은 데이터베이스에서 전달 된 ID와 모달로 표시되는 레코드를 가져 오는 것입니다.

간단한 솔루션

모달 호출 버튼

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

모달 HTML

위의 호출 단추가있는 페이지의 while 루프 외부에 다음 모달 HTML 넣기 (페이지 하단에있는 것이 좋음)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          //Content Will show Here
        </div>
    </div>
</div>

이제 PHP 파일을 만들고 이름을 file.php로 지정하십시오.

이 파일은 모달 호출 버튼과 함께 호출됩니다. href = "file.php? id = id;?>"

<?php
//Include database connection here
$Id = $_GET["id"]; //escape the string if you like
// Run the Query
?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><center>Heading</center></h4>
</div>
<div class="modal-body">
    //Show records fetched from database against $Id
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default">Submit</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

모달 내부의 데이터를 제거하거나 페이지 새로 고침없이 다음 레코드를 열 때 모달을 새로 고치려면 다음 스크립트를 사용하십시오

jQuery 및 부트 스트랩 라이브러리 (jQuery 및 부트 스트랩 라이브러리가 항상 먼저 온다는 것을 기억하십시오)

<script>
$( document ).ready(function() {
    $('#editBox').on('hidden.bs.modal', function () {
          $(this).removeData('bs.modal');
    });
});
</script>

Ajax 및 부트 스트랩 모달 이벤트 리스너의 대체 솔루션

Modal Call 버튼에서 데이터 속성 data-id = " id;?>"로 href = "file.php? id = id;?> 부트 스트랩 모달 이벤트를 사용하는 행의 ID입니다.

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

모달 HTML

위의 호출 단추가있는 페이지의 while 루프 외부에 다음 모달 HTML 넣기 (페이지 하단에있는 것이 좋음)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><center>Heading</center></h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

이제 같은 페이지에 다음 스크립트를 추가하십시오.

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() {       
    $('#myModal').on('show.bs.modal', function (e) { //Modal Event
        var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button
    $.ajax({
      type : 'post',
       url : 'file.php', //Here you will fetch records 
      data :  'post_id='+ id, //Pass $id
      success : function(data){
         $('.form-data').html(data);//Show fetched data from database
       }
    });
    });
});
</script>

이제 PHP 파일을 만들고 file.php로 이름을 지정하십시오 (Ajax 메서드에서 사용하는 것과 동일).

<?php
//Include database connection here
if($_POST['id']) {
    $id = $_POST['id'];
    // Run the Query
    // Fetch Records
    // Echo the data you want to show in modal
 }
?>

이 솔루션에서는 모달 안의 데이터를 제거하거나 모달을 새로 고침하기 위해 다음과 같은 스크립트가 필요하지 않습니다.

$('#editBox').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
});

Ajax 및 jQuery Click 기능을 사용한 대체 솔루션

모달 호출 버튼

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" class="open-modal" href="" id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

위의 모달 호출 버튼이있는 페이지에 다음 모달 HTML을 넣으십시오 (페이지 맨 아래에있는 것이 좋음)

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

모달 HTML 및 모달 호출 버튼이있는 동일한 페이지에서 Ajax 메소드 코드를 따르십시오.

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() { 
  $('.open-modal').click(function(){
    var id = $(this).attr('id');
    $.ajax({
      type : 'post',
       url : 'file.php', //Here you should run query to fetch records
      data : 'post_id='+ id, //Here pass id via 
      success : function(data){
          $('#editBox').show('show'); //Show Modal
          $('.form-data').html(data); //Show Data
       }
    });
  });
});
</script>

그리고 PHP 파일 file.php는 부트 스트랩 모달 이벤트가있는 위의 솔루션과 같습니다.

Modal에 페이지 정보 전달

어떤 경우에는 페이지에서 이미 사용 가능한 모달에 최소한의 정보 만 전달 (표시)해야하며, Ajax없이 부트 스트랩 모달 이벤트만으로 수행 할 수 있습니다. 데이터 속성이있는 메소드

<td>
  <span data-placement="top" data-toggle="tooltip" title="Show">
    <a data-book-id="<?php echo $obj->id;?>" data-name="<?php echo $obj->name;?>" data-email="<?php echo $obj->email;?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
    <span class="glyphicon glyphicon-pencil"></span>
    </a>
  </span>
</td>

모달 이벤트

$(document).ready(function(){
    $('#editBox').on('show.bs.modal', function (e) {
        var bookid = $(e.relatedTarget).data('book-id');
        var name = $(e.relatedTarget).data('name');
        var email = $(e.relatedTarget).data('email');
        //Can pass as many onpage values or information to modal  
     });
});

from https://stackoverflow.com/questions/32433765/how-to-pass-get-variables-from-a-link-to-a-bootstrapmodal by cc-by-sa and MIT license

'PHP' 카테고리의 다른 글

require_once를 사용하는 것이 왜 그렇게 나쁜가요? (0)	2018.09.18
PHP에서 파일 확장자를 얻는 방법? [복제] (0)	2018.09.18
2 개의 mysqli 쿼리 (0)	2018.09.18
로그인 스크립트에 password_verify를 넣을 위치는 어디입니까? (0)	2018.09.18
멀티 바이트 문자열을 n 개의 문자로 잘림 (0)	2018.09.18

복붙노트

어떻게 링크에서 $ _GET 변수를 부트 스트랩 모달로 전달할 수 있습니까?

어떻게 링크에서 $ _GET 변수를 부트 스트랩 모달로 전달할 수 있습니까?

해결법

1.id를 전달하는 단순한 해결책은 데이터베이스에서 전달 된 ID와 모달로 표시되는 레코드를 가져 오는 것입니다.

'PHP' 카테고리의 다른 글

티스토리툴바