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.
also I have gone through the following links
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/
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.
My Modal code is here
<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">×</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
<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');
});
}
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>
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.
