首页 文章

通过调用JQuery不显示Bootstrap模型窗口

提问于
浏览
1

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

$(“#id”) . modal(“show”)

但它在任何情况下都不起作用,这个_26276中提到了几个案例,但没有一个在我的案例中起作用 .

我也经历了以下链接

bootstrap model is not working

Bootstrap modal window not showing

calling to bootstrap model for a link

Bootstrap modal - popup window not showing

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

但我无法得到任何帮助,我可以通过一个额外的按钮触发模型,并通过jquery调用按钮的click()函数,这工作正常,但不是模态的情况 .

我的模态代码在这里

<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电话就在这里

<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函数 .

<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错误,可能是我在某个地方做错了,如果有人可以把它拉出来,那将是值得赞赏的 .

1 回答

  • 0

    我正在经历其他一些帖子

    TypeError: $(...).modal is not a function with bootstrap Modal

    我换了

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

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

    这个技巧在这里工作,它开始工作 . 我仍然不知道为什么它不能与$合作的原因 .

    还有一件事,我们需要包含jQuery.noConflict();以上是避免重复的陈述 .

相关问题