dongqian6554
2018-04-09 07:01
浏览 108
已采纳

如何使用GET方法将id传递给同一页面中的模态?

I have a following link:

<a type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#product_view" href="?id='.$row['upcoming_event_id'].'">
                                    <i class="fa fa-search"></i> Read more</a>

The read more looks like this:

enter image description here

When I press the read more button, a modal will pop up like this:

enter image description here

I tried the following code but it's not working:

<div class="modal fade product_view" id="product_view">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" data-dismiss="modal" class="class pull-right"><span
                            class="glyphicon glyphicon-remove"></span></a>
                <h3 class="modal-title">I want to show the event id here <?php echo $_GET['id']; ?></h3>
            </div>

            </div>
        </div>
    </div>
</div>
</div>

How to solve this? Or is there any better way to do this? I have to show the id into the modal, not on another page. Any help will be appreciated. Thanks in advance.

图片转代码服务由CSDN问答提供 功能建议

我有以下链接:

 &lt; a type  =“button”class =“btn btn-primary”data-toggle =“modal”
 data-target =“#product_view”href =“?id ='。$ row ['comingven_event_id']。'”&gt; \  n&lt; i class =“fa fa-search”&gt;&lt; / i&gt; 阅读更多&lt; / a&gt; 
   
 
 

阅读更多内容如下所示:

当我按下更多按钮时,会弹出一个模态:

我尝试了以下代码,但它无效:

 &lt; div class =“modal fade product_view”id =“product_view”  &gt; 
&lt; div class =“modal-dialog”&gt; 
&lt; div class =“modal-content”&gt; 
&lt; div class =“modal-header”&gt; 
&lt; a href  =“#”data-dismiss =“modal”class =“class pull-right”&gt;&lt; span 
 class =“glyphicon glyphicon-remove”&gt;&lt; / span&gt;&lt; / a&gt; 
&lt;  h3 class =“modal-title”&gt;我想要显示e 在这里发泄id&lt;?php echo $ _GET ['id'];  ?&gt;&lt; / h3&gt; 
&lt; / div&gt; 
 
&lt; / div&gt; 
&lt; / div&gt; 
&lt; / div&gt; 
&lt; / div&gt; 
&lt; / div&gt;  
   
 
 

如何解决这个问题? 或者有更好的方法吗? 我必须将id显示在模态中,而不是在另一页上。 任何帮助将不胜感激。 提前致谢。

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • doudao3170 2018-04-09 07:14
    已采纳

    PHP code execute first, so you can't set PHP value for $_GET dynamically. Use a javascript function.

    function setEventId(event_id){
        document.querySelector("#event_id").innerHTML = event_id;
    }
    

    Call setEventId() function from anchor tag

    <a type="button" onclick="setEventId(<?= $row['upcoming_event_id'] ?>)" class="btn btn-primary" data-toggle="modal"
                                        data-target="#product_view" href="javascript:void(0)">
                                        <i class="fa fa-search"></i> Read more</a>
    

    And use <span id="event_id"></span> to replace html value with event_id

    <div class="modal fade product_view" id="product_view">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" data-dismiss="modal" class="class pull-right"><span
                                class="glyphicon glyphicon-remove"></span></a>
                    <h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
                </div>
    
                </div>
            </div>
        </div>
    </div>
    </div>
    

    Here is demo example after getting value of $row['upcoming_event_id'] or page load.

    function setEventId(event_id){
        document.querySelector("#event_id").innerHTML = event_id;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <a type="button" onclick="setEventId(1)" class="btn btn-primary" data-toggle="modal"
                                        data-target="#product_view" href="javascript:void(0)">
                                        <i class="fa fa-search"></i> Read more</a>
                                        
    <a type="button" onclick="setEventId(2)" class="btn btn-primary" data-toggle="modal"
                                        data-target="#product_view" href="javascript:void(0)">
                                        <i class="fa fa-search"></i> Read more</a>
                                        
                                        
    <a type="button" onclick="setEventId(3)" class="btn btn-primary" data-toggle="modal"
                                        data-target="#product_view" href="javascript:void(0)">
                                        <i class="fa fa-search"></i> Read more</a>
                                        
    <div class="modal fade product_view" id="product_view">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" data-dismiss="modal" class="class pull-right"><span
                                class="glyphicon glyphicon-remove"></span></a>
                    <h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
                </div>
    
                </div>
            </div>
        </div>

    </div>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dongpin1850 2018-04-09 07:10

    On your button add a data attribute containing your id, like this :

    <a type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#product_view" data-id="'.$row['upcoming_event_id'].'" href="?id='.$row['upcoming_event_id'].'">
                                        <i class="fa fa-search"></i> Read more</a>
    

    Then in JS you need no write an event listener function automatically called when your modal is open. for your need this function seems like :

    $('#product_view').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) 
      var id = button.data('id') 
    
      var modal = $(this)
      modal.find('.modal-title').text('I want to show the event id here ' + id)
    })
    

    See official documentation here

    评论
    解决 无用
    打赏 举报
  • duanhuren5581 2018-04-09 07:13

    What you can do is to use html data attribute on your tag. let's say :

    <a href="#openModal_edit" data-idValue="<?= $row['upcoming_event_id'] ?>" ...</a>
    

    Then you need to create onclick event handler, maybe on your modal button to extract your data attribute :

    onclick="myId=this.dataset.idValue;document.querySelector('#THE_HTMLID_THAT_YOUWANT_DISPLAY_IDVALUE').value = myId;return true;"
    

    and make sure in querySelector you add the element id that you want show the value on it.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题