通过调用JQuery不显示Bootstrap模型窗口 [英] Bootstrap Model Window Not Showing by Calling Through JQuery

问题描述

我想要做的是通过使用jquery调用弹出一个bootstrap js模型

What I am trying to do is that pop up a bootstrap js model by using jquery call that is

$("#id").modal("show")

但它在任何情况下都不起作用，这里提到了几种情况链接，但没有一个在我的情况下工作。

but it's not working in any case, there are several cases mentioned in this link but none is working in my case.

我也经历了以下链接

引导模型无效

Bootstrap模态窗口未显示

调用bootstrap模型获取链接

Bootstrap模式 - 弹出窗口未显示

https://getbootstrap.com/docs/4.0/components/modal/

但我无法获得任何帮助，我可以通过额外的按钮触发模型并通过jquery调用按钮的click（）函数，这样可以正常但不是模态的情况。

but I am not able to get any help, I can trigger the model by having an extra button and calling click() function of button by jquery, this works fine but not modal case.

我的模态代码在这里

<div class="modal fade" id="addLocationTagModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabelLocation">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" id="idButtonCloseLocation" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabelLocation">Enter Location</h4>
        </div>

        <div class="modal-body">

            <div class="row">
                <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">                                          
                    <div class="form-group">

                        <?php
                        $preferredLocation = "";
                        if (strtolower(getUserPreferredLocation($row_user, $conn)) !== "no") {
                            $preferredLocation = getUserPreferredLocation($row_user, $conn);
                        }
                        ?>
                        <input type="text" class="form-control" value="<?php echo $preferredLocation; ?>" placeholder="Location" id ="locationSuggested" name="locationSuggested" />
                        <span>
                            <span id="suggesstionBoxLocation" ></span>            
                        </span> 

                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">                                           
                    <div class="pLace-order">
                        <button type="button" name="buttonLocation" onclick="getTagSelected();" class="btn btn-success" value="submit">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Jquery call is here

Jquery call is here

<script>


function detachStore(url){

//alert(url);
//document.getElementById("buttonDeleteStore").click(); // Click on the checkbox
// For Testing Purpose to set the data-target

jQuery.noConflict();
$(document).ready(function () {

  $("#addLocationTagModel").modal("toggle");  
alert("Hello");
    //$("#buttonDeleteStore").click();


  // $('#addLocationTagModel').appendTo("body").modal('show');

});

}

HTML和混合的PHP代码如下所示，我在元素调用上有onclick函数，它运行正常。

And HTML and mixed PHP code is here below, I have onclick function on the element call that is working perfectly.

<td>
                                <?php
                                $i = 1;
                                foreach (unserialize($row['store_id']) as $store_id) {

                                    $stores = $conn->query("select * from tb_stores where ID = " . $store_id);

                                    while ($stores_row = $stores->fetch_assoc()) {
                                        $store_price = $conn->query("select * from tb_add_price_of_products where product_id=" . $row["ID"] . " and store_id=" . $stores_row["ID"]);
                                        $store_price_row = $store_price->fetch_assoc();
                                        //echo $store_price_row["price"];

                                        if ($i == 1) {
                                            echo "<a href='#' data-toggle='modal' title='$"
                                            . $store_price_row["price"] . "-" . $stores_row["location"] . "'"
                                            . " onclick=\"detachStore('" . $url . "product-registry?action=delete-store&product_id=". $row["ID"] . "&store_id=" . $stores_row["ID"] . "');\" >" 
                                            . $stores_row['name'] . "</a>";
                                        } else {
                                            echo ", <a href='#' data-toggle='modal' title='$"
                                            . $store_price_row["price"] . "-" . $stores_row["location"] . "'"
                                            . " onclick=\"detachStore('" . $url . "product-registry?action=delete-store&product_id=". $row["ID"] . "&store_id=" . $stores_row["ID"] . "');\" >" 
                                            . $stores_row['name'] . "</a>";
                                        }
                                        $i++;
                                    }
                                }
                                ?>
                                <button type="button" id="buttonDeleteStore" data-toggle="modal" data-target="#add_price_modal">Button</button>
                            </td>

我花了好几个小时，甚至没有JavaScript错误，可能是我在某些方面做错了地方，如果有人可以把它拉出来，那将是值得赞赏的。

I have spent hours on it, even no JavaScript error, May be I am doing something wrong at some place, if anybody can pull it out that would be appreciated.

推荐答案

我正在经历其他一些帖子

I was going through some other post

TypeError：$（ ...）。modal不是一个带有bootstrap模态的函数

我替换了

 $("#id").modal("show")

with

jQuery("#id").modal("show") 

这个技巧在这里工作，它开始工作。我仍然不知道为什么它不能使用$。

and this trick worked here and it started working. Still I don't know the reason like why it wasn't working with $.

还有一件事，我们需要包含jQuery.noConflict（）;以上是避免重复的陈述。

One more thing, we need to include the jQuery.noConflict(); above then the statement to avoid repetitions.

这篇关于通过调用JQuery不显示Bootstrap模型窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！