IDを持つこのモーダル内に.phpファイルを表示するには？

私のコードは、それがリンクに行くとポストを示しIDを持つこのモーダル内に.phpファイルを表示するには？

posts.php?id=<?php echo $post_id?; ?>

この方法で正常に動作します。

私はそのリンクに入るのをやめて、モーダル内部にそのことを示す必要があります。どうすればいいのですか？

注：私は単にそれをモーダル内に含めることはできますが、idを渡すことはできません。

<li data-toggle="modal" data-target="#myModal"><a href="posts.php?id=<?php echo $post_id; ?>" >See post</a></li> 
 

 
<div id="myModal" class="modal fade" role="dialog"> 
 
<div class="modal-dialog"> 
 
<!-- Modal content--> 
 
<div class="modal-content"> 
 
<div class="modal-header"> 
 
<button type="button" class="close" data-dismiss="modal">&times;</button> 
 
<h4 class="modal-title">Post</h4> 
 
</div> 
 
<div class="modal-body"> 
 
      
 
// include the posts.php here 
 
    \t \t 
 
</div> 
 
<div class="modal-footer"> 
 
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
</div> 
 
</div> 
 

 
</div> 
 
</div>

出典

2017-01-28 True speaker

リンクにコンテンツを読み込み、ロードされたコンテンツをモーダルに追加するためにajaxコールを行う必要があります。 – Mickey

こちらをご覧くださいhttps://plnkr.co/edit/ibatAAwAYsIT9et2NMtC?p=preview – Mickey

我々は

$("#dynamicdata").click(function(){ 
 
     var dyid=$(this).attr("posts_id"); 
 
     $.ajax({ 
 
       url:"posts.php", 
 
       type:"post", 
 
       dsta:{'id':dyid}, 
 
       success:function(data){ 
 
        $('#myModalbody').html(''); 
 
        $("#mymodelbody").html(data); 
 
       } 
 
      }); 
 
    });

<li data-toggle="modal" data-target="#myModal" posts_id="<?php echo $post_id; ?>" id="dynamicdata"><a href="#" >See post</a></li> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
    <h4 class="modal-title">Post</h4> 
 
    </div> 
 
    <div class="modal-body" id="mymodelbody"> 
 
       
 
    // include the posts.php here 
 
     \t \t 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

を表示するにはどのようなコンテンツを書くPHPファイルに以下のコード

を参照してください、この使用してAJAXを行うことができます

出典

2017-01-28 09:29:27

あなたのhtmlファイルのHTML内または1つのファイルに含めると、あなたがBootBoxを使用していないのはなぜこの

$(document).on("click", "[name=btnPreview]", function (event) { 
 
     event.preventDefault(); 
 
     var id = $(this).parent().attr('id') 
 
     $.get("post.php?id=" + id, function (data) { 
 
      if (data.desc == 'ok') { 
 
       var datas = data.content; 
 
       document.getElementById('contentBody').innerHTML += datas; 
 
       $('#myModal').modal('show') 
 

 
      } 
 
     }); 
 
    });

<li data-toggle="modal" data-target="#myModal" data-id="<?php echo $post_id; ?>"> 
 
<a href="#" name="btnPreview">See post</a></li> 
 

 

 
---------- 
 
<div class="modal-body" id="contentBody"> 
 
     
 
//after your click See post, post will show in here 
 
\t \t 
 
</div>

出典

2017-01-28 10:17:38 Gangga

のようないくつかのあなたのコードのHTMLを変更する最初のあなたは、JSを追加する必要があり、このコードを試してみてください？それはシンプルで、非常に便利です、あなたのニーズのための簡単な例はここにあります。私はちょうど作成しました：

<?php // fake modal output handler 
if (isset($_GET['fakeit'])){ 
    $random_robot = md5(rand()); 
    die("<img src='https://robohash.org/$random_robot.png'>"); 
} 
?><!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My page</title> 

    <!-- CSS dependencies --> 
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
</head> 
<body> 

<p> 
<ul id="my_list" > 
    <?php foreach (range(1,5) as $post_id) { // this is just to fake some post links ?> 
     <li><a href="javascript:showModal(<?php echo $post_id; ?>);" >See post <?php echo $post_id; ?></a></li> 
    <?php } ?> 
</ul> 
</p> 

<!-- JS dependencies --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<!-- bootbox code --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> 
</html> 
<?php 
$SITE_URL = '?fakeit#'; // change this to your real site url 
?> 
<script> 
    function showModal(id) { 
     $.ajax({ // regular jQuery ajax call 
      type: 'GET', 
      url: '<?php echo $SITE_URL; ?>/posts.php?id=' + id, 
      success: function (data) { 
       bootbox.dialog({ 
        message: data, 
        title: "Robot number :" + id, 
        buttons: { // here you can define your modal's buttons 
         button1: { 
          label: "Got it !", 
          className: "btn-default", 
          callback: function() { 
           console.log("Button 1 clicked !"); 
           // code de be executed before closing the modal (when the user clicks the button) 
          } 
         } 
        }, 
        size: "large" 
       }); 
      } 
     }); 
    } 
</script> 
</body>

出典

2017-01-28 10:46:06 mrbm

IDを持つこのモーダル内に.phpファイルを表示するには？

答えて

関連する問題