I was trying to load dynamic data on my bootstrap modal. But button can't call the javascript function so instead of loading dynamic data it only loads the on page modal. What could be possible error of the following code?
</i>
Bootstrap Modal:
<div id="cart-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Warehouse Products</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body cart p-4">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div><!-- /.modal -->
Javascript Part:
$("#cart-modal").on("show.bs.modal", function(e) {
var product_id = $(e.relatedTarget).attr('data-id');
var url = '{{ url('product-details') }}';
$.ajax({
url:url,
method:'POST',
data:{ product_id: product_id },
success:function(response){
if(response.success){
$(".modal-body cart").html(response.html);
}else{
console.log(error)
}
},
error:function(error){
console.log(error)
}
});
});
Related
I tried to make a modal. I use AJAX to show the modal but the modal is invisible. When I use the button's trigger with data-toggle and data-target, the modal is showing up visible.
This is what I have tried to do
Check that all script is correctly loaded
Tried to reorder script
Delete fade class in modal and the modal visible but with bad UI
Change bootstrap version but result is same
This is my code
AJAX
$("body").on("click", ".btn-show", function (event) {
event.preventDefault();
var me = $(this),
url = me.attr("href"),
title = me.attr("title");
$("#modal-title").text(title);
$.ajax({
url: url,
dataType: "html",
success: function (response) {
$("#modal-body").html(response);
$("#modal").modal("show");
},
});
});
HTML Modal
<div class="modal fade" id="modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-title">Form Input</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="modal-btn-save">Save
changes
</button>
</div>
</div>
</div>
</div>
SS modal exists but is not visible:
There are no errors with the modal, and the $("#modal").modal("show"); displays the modal just fine (see code snippet below),
Since the code snippet below works fine, it seems clear that the original code's "success" function is never called:
success: function (response) {
$("#modal-body").html(response);
$("#modal").modal("show");
}
I suggest adding an error function to the ajax parameters:
error: function (jsXHR, textStatus, errorThrown) {
// handle error here
}
From the jQuery docs:
error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
A function to be called if the request fails.
function showModal() {
$("#modal-title").text('Sample Title');
$("#modal-body").html('Sample Response');
$("#modal").modal("show");
}
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- scripts needed by Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<body class="p-2">
<button onclick="showModal()">Show Modal</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-title">Form Input</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="modal-btn-save">Save
changes
</button>
</div>
</div>
</div>
</div>
</body>
I just fix this problem on Laravel Voyager Admin.
This is because I just declare two times bootstrap scripts.
I cant insert a into my database using bootstrap modal and some ajax. Can someone help me. I recieved an error of Uncaught SyntaxError: Invalid shorthand property initializer. I've been looking for some similar problems with this but I cant find it. Im new to AJAX by the way so im sorry. Does anyone know how to fix this. TIA
Modal
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Supplier</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p style="font-weight: bold;">Name </p>
<input style="text-transform:uppercase" type="text" class="form-control" id="supplier"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="add_supplier">Add</button>
</div>
</div>
</div>
</div>
Ajax
<script type="text/javascript">
$(document).ready(function(){
$('#add_supplier').click(function(e){
e.preventDefault();
var input = $('#supplier').val();
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ url('/supplier') }}",
method: 'post',
data: {
name = input
},
success: function (res){
console.log(res);
window.location.href = '{{route("supplier.index")}}';
}
});
});
});
</script>
Controller
public function store(Request $request)
{
$data = $request->all();
$data['name'] = ($data['name']);
Supplier::create($data);
return response()->json($data);
}
route
Route::resource('supplier', 'SupplierController');
Your data must be sent as a javascript object, so the correct syntax would be
data: {name: input}
I have a logic to show single image in model pop-up, but now I'm trying to show list multiple images the same model pop-up. How can I achieve that?
Here is my working code for single image.
$(document).on("click", "a[name='lnkViews']", function() {
var myImageId = $(this).attr('id');
$.ajax({
url: "#Url.Action("
ImagesView ", "
Controller ")",
type: "GET",
data: {
Id: myImageId
},
dataType: "json",
success: function(data) {
document.getElementById("ItemPreview").src = "data:image/jpg;base64," + data.data;
$('#gardenImage').modal('show');
},
error: function() {
alert("Error");
}
});
});
<!-- Modal -->
<div class="modal fade" id="gardenImage" tabindex="-1" role="dialog" aria-labelledby="gardenImageLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="border-color:transparent !important">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" style="border-color:transparent !important">
<img class="center-block" id="ItemPreview" src="" alt="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger center-block" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thanks in advance!
I have a Bootstrap modal inside a jQuery success function. I want to show
some value in the model.
My model:
<div class="modal fade" id="REQModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header btn-danger">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error Message</h4>
</div>
<div class="modal-body">
<div id="num"></div>
<p>Error has occured!.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My function:
$.ajax({
url: $('#addRequest').val(),
type: "POST",
data: { Request: Request },
dataType: "json",
success: function (refNo) { // refNo comes here.
$("#num").val(refNo);
$("#REQModal").modal('show'); // modal popup's but refNo doesn't show.
}
});
try:
$("#num").html(refNo);
instead of
$("#num").val(refNo);
Try this
$("#num").html(refNo);
Demo and Full Code is like this : https://jsfiddle.net/oscar11/xzxrp7nn/2/
My HTML Code is like this :
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg check_session" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<label for="idTourDateDetails">Tour Start Date:</label>
<div class="form-group">
<div class="input-group">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
My Javascript Code is like this :
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
}
}
})
});
When response != 'exist_session', I want the system display alert message without display modal. So only display alert message.
Any solution to solve my problem?
Thank you
You remove data-toggle and data-target in button
<button class="btn btn-primary btn-lg check_session">Launch demo modal</button>
then you can call it in javascript.
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
} else {
$('#myModal').modal()
}
}
})
});
Working Demo
https://jsfiddle.net/xzxrp7nn/4/