We Keep Coding

bootstrap modal can't call function

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)
}
});
});

Cant insert into table using modal and ajax in laravel

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}

prevent page to reload jquery

The code is working fine for me if the page is completely loaded But the issue is if the page is in loading mode I click on the link it reloads again how I prevent it from reloading.
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
e.preventDefault();
var key = $(e.relatedTarget).data('id');
$('#loadingmessage').show();
$.ajax({
type : 'post',
url : 'test.php',
data : 'key='+ key,
success : function(data) {
$('.modal-body').html(data);
},
complete: function() {
$('#loadingmessage').hide();
}
});
return false;
});
});
My Html is here
<a href='' data-toggle='modal' data-target='#myModal' data-id='1:2:3:4'>UP</a>
If page is completey loaded and i click on this the ajax call is works fine but when page is loading if i clcik the page starts reloading again how i prevent it to reload.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Check Server Status</h4>
</div>
<div class="modal-body">
<div id="loadingmessage">Checking...</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<a href='#' data-toggle='modal' data-target='#myModal' data-id='1:2:3:4'>UP</a>

Pass values to bootstrap modal in jQuery success function

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

Open a popup box after receiving result from ajax

i have a ajax code that works properly and gives the desired result. I want to modify this code and want that when a reply is received from ajax a popup/modal box should get opened.
I am able to open popup/modal box on a click of a button
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#bsModal3">
Small Modal
</button>
<!-- Modal -->
<div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="mySmallModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Your content goes here...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
but don't know how to open it automatically within ajax.
here is my ajax code
$.ajax({
type: 'post',
url: 'test2.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function (returndata) {
if (returndata[4] === 1) {
// want to load a popup box here
} else {
// other code
}
},
error: function () {
console.error('Failed to process ajax !');
}
});
can anyone please tell me how it can be done

You can use $("#bsModal3").modal('show'); inside your result.
See more about modal methods
$.ajax({
type: 'post',
url: 'test2.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function(returndata) {
if (returndata[4] === 1) {
$("#bsModal3").modal('show');
} else {
// other code
}
},
error: function() {
console.error('Failed to process ajax !');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="mySmallModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Your content goes here...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Try put this inside success callback :
success: function (returndata) {
if (returndata[4] === 1) {
$('#bsModal3').modal(); // this
} else {
// other code
}
},

Please do with the Ajax Call,modal is call in ajax response
$.ajax({
type: 'post',
url: 'test2.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function (returndata) {
if (returndata[4] === 1) {
$('#bsModal3').modal(); // Please right this in your Code
} else {
// other code
}
},
error: function () {
console.error('Failed to process ajax !');
}
});

$.ajax({
type: 'post',
url: 'test2.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function(returndata) {
if (returndata[4] === 1) {
$("#bsModal3").modal('show');
} else {
// other code
}
},
error: function() {
console.error('Failed to process ajax !');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="bsModal3" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="mySmallModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Your content goes here...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>