We Keep Coding

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}

Show multiple images in bootstrapp model pop-up

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!

jQuery - Modal Does not display

I want to append some data to a table in a boostrap modal, which is returned from PHP and displayed using jQuery. But it is not working properly.
When I put an alert, it shows the data returned from PHP, but the data is not appending or displaying modal.
$(document).on('click', '.btn-info', function() {
var row = $(this).closest("tr"); // Find the row
var text = row.find(".book_id").text();
$.ajax({
async: false,
url: "../../svr/lib/view-book-details.php",
method: "POST",
data: {
text1: text
},
dataType: "text",
success: function(data) {
//alert(data);
$('#view-table').append(data);
$('#viewModal').modal("show");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Publisher</h4>
</div>
<div class="modal-body modal-heigt">
<table class="table table-bordered" id="view-table">
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You can add an hidden button in the html:
<button type="button" data-toggle="modal" data-target="#viewModal" style="display:none;" id="modalHiddenCallBtn"></button>
Then you can call the click event on this button:
success: function (data) {
$('#view-table').append(data);
$('#modalHiddenCallBtn').click();
}

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

How to Open Modal from Function Call Jquery

I have this Modal from Bootstrap
When I add
button To call it it open successfully,
but what I really need is to open this modal from function calling automatically
my Experiment is:
<button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline;
padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();">renew</button>
MY JavaScript is
function RenewCollectorDatePeriod() {
// AreYOuSureRenew();
var EmpID = $("#<%=ddlFilterCollector.ClientID%>").val();
if (EmpID == -1) {
alert("please select one ")
}
else {
alert(EmpID);
GetCollectorInfo(EmpID);
}
}
then:
function GetCollectorInfo(EmpID) {
// AreYOuSureRenew();
$.ajax({
type: "POST",
url: "UnloadingCalendar.aspx/GetCollectorInfo",
data: JSON.stringify({ EmpID: EmpID }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(result.d);
AreYOuSureRenew();
},
error: function (msg) {
alert(msg.d);
},
complete: function () {
}
})
}
function AreYOuSureRenew() {
alert("opened");
$('#EnsureModal').modal('show');
}
and here my modal
<div class=" modal fade" id="EnSureModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do ypu need change </h4>
</div>
<div class="modal-body">
<p>Are u sure from </p>
<label id="FromDate"></label>
<p>To</p>
<label id="ToDate"></label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
Notice: when I add $("#EnSureModal").modal('show'); in Document.Ready it appeasrs on page load and appears again on function call , how can I make it appears only in function call

I read your code and I found out that you didn't use bootstrap correctly and the also the script you wrote is not correct. Check this out. This might help you.
Script:
$(document).ready(function(){
$("#fireme").click(function(){
$("#EnSureModal").modal();
});
});
HTML:
<button id="fireme" class="btn btn-default">Fire me up!</button>
<div class="modal fade" id="EnSureModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do ypu need change </h4>
</div>
<div class="modal-body">
<p>Are u sure from </p>
<label id="FromDate"></label>
<p>To</p>
<label id="ToDate"></label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">no</button>
<button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
The fiddle