如何使用get方法将id传递给同一页面中的模式？

gkn4icbw 于 2021-06-21 发布在 Mysql

关注(0)|答案(3)|浏览(373)

我有以下链接：

<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>

“阅读更多”如下所示：

当我按下“阅读更多”按钮时，会弹出一个模式，如下所示：

我尝试了以下代码，但不起作用：

<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>

如何解决这个问题？还是有更好的办法？我必须在模态中显示id，而不是在另一页上。任何帮助都将不胜感激。提前谢谢。

mysql php JavaScript GET modal-dialog

来源：https://stackoverflow.com/questions/49727211/how-to-pass-id-to-a-modal-within-same-page-using-get-method

3条答案

按热度按时间

70gysomp1#

php代码首先执行，因此不能为 $_GET 动态地。使用javascript函数。

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

呼叫 setEventId() 来自锚定标记的函数

<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>

使用 <span id="event_id"></span> 将html值替换为 event_id ```

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

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

赞(0）回复(0）举报 2021-06-21

qxgroojn2#

在按钮上添加包含id的数据属性，如下所示：

<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>

然后在js中，您不需要编写一个事件侦听器函数，当您的模态打开时，它会自动调用。根据您的需要，此功能类似于：

$('#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)
})

请参阅此处的官方文档

赞(0）回复(0）举报 2021-06-21

sh7euo9m3#

您可以做的是在标记上使用html数据属性。比如说：

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

然后您需要创建onclick事件处理程序，也许可以在模式按钮上提取数据属性：

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

并确保在queryselector中添加要在其上显示值的元素id。

赞(0）回复(0）举报 2021-06-21

我来回答

如何使用get方法将id传递给同一页面中的模式？

3条答案

相关问题

热门标签

最新问答