Currently I have working save data using ajax and laravel. But when I tried to add image field on saving it doesn't work properly now.
First I can pass variables with values using ajax to my controller.
these are my variables name, type, select_file, steps, step_no
If I didn't fill up one of those fields it will prompt an error message.
I can get the file name of the select_file field and validate it on my controller.
How ever when I'm trying save and all fields are filled up this gives me an error like this
The select_file must be an image
Error prompts even though it has an image png file.
Here's my HTML
<div class="modal fade" id="modalRecipes" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Recipes</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="container">
<form>
{{ csrf_field() }}
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
<div class="col-md-6">
<input type="text" class="form-control name" name="name" id="name">
</div>
</div>
<div class="form-group row">
<label for="type" class="col-md-4 col-form-label text-md-right">Type</label>
<div class="col-md-6">
<select class="form-control type" name="type" id="type">
</select>
</div>
</div>
<div class="form-group row">
<label for="select_file" class="col-md-4 col-form-label text-md-right">Select Image</label>
<div class="col-md-6">
<input type="file" name="select_file" id="select_file" />
</div>
</div>
<div class="optionBox">
<div class="block step">
<div class="form-group">
<label for="step1">Step 1</label>
<textarea name="steps" data-steps="1" class="form-control rounded-0 steps" id="step1" rows="10"></textarea>
</div>
</div>
</div>
<div class="">
<span class="add">Add Option</span>
</div>
</form>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-outline-success" data-dismiss="modal">Close</button>
<button type="button" name="submit" class="btn btn-success waves-effect" id="btnSubmit">Submit</button>
</form>
</div>
</div>
and here's my AJAX
$(document).ready(function () {
$("#btnSubmit").click(function () {
var name = $("#name").val();
var type = $("#type").val();
var select_file = $("#select_file").val();
var steps = [],
step_no = [];
$('textarea[name="steps"]').each(function() {
steps.push($(this).val());
step_no.push($(this).attr('data-steps'));
});
var x = document.getElementById("btnSubmit");
x.innerHTML = "Loading...";
document.getElementById("btnSubmit").disabled = true;
$.ajax({
headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
url: "{{ route('insert') }}",
method: "POST",
data:{
name:name,
type:type,
steps:steps,
step_no:step_no,
select_file:select_file
},
dataType: "json",
success:function(data)
{
if (data.success.length > 0) {
location.reload();
} else {
toastr.error(data.error[0]);
var x = document.getElementById("btnSubmit");
x.innerHTML = "Submit";
document.getElementById("btnSubmit").disabled = false;
}
},
error: function(xhr, ajaxOptions, thrownError){
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
});
And here's my Controller
public function insert(Request $request)
{
$message = "";
$output = array();
$error = array();
$success = array();
$validator = Validator::make($request->all(), [
'select_file'=>'image',
'name' => 'required',
'type' => 'required',
'steps' => 'required',
'step_no' => 'required'
]);
if ($validator->fails()) {
$messages = $validator->errors()->all();
$error[] = $messages;
} else {
$dateTime = date('Ymd_His');
$image = $request->select_file;
$new_name = $dateTime . '.' . $image->getClientOriginalExtension();
$image->move(public_path('img'), $new_name);
// Code for saving data.....
$messages = "Successfully Saved!";
$success[] = $messages;
}
$output = array(
'error'=>$error,
'success'=>$success
);
echo json_encode($output);
}
Related
I want to get data from a controller and display it in a html pop-up when a button is clicked.
At this point the POPUP is showing when the button is clicked but the data isn't loaded
At this point I need that onclick the values get loaded and show them in the popup.
index.blade.php
<button data-toggle="modal" data-target="#edit" id ="uid" name="uid" value="<?php echo $user->id ?>">
</button>
<div class="modal fade" id="edit" tabindex="-1" role="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<div class="card-header card-header-primary text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="card-title">Editar</h4>
</div>
</div>
<div class="modal-body">
<form class="form" method="POST" action = "{{ route('/alteruser') }}" name = 'user'>
#csrf
<div class="card-body">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="material-icons"></i>
</div>
</div>
<input name = 'name' type="text" class="form-control" placeholder="<?php echo $seluser->id ?? ''?>" id='id' disabled>
<input name = 'name' type="text" class="form-control" "<?php echo $seluser->name ?? ''?>" id='name'>
<input type="text" class="form-control" placeholder="<?php echo $seluser->email ?? ''?>" id = 'email'>
<input type="password" placeholder="<?php echo $seluser->password ?? ''?>" class="form-control" id = 'password'>
<input type="text" placeholder="<?php echo $seluser->nif ?? ''?>" class="form-control" id = 'nif'>
<input type="text" placeholder="<?php echo $seluser->contacto ?? ''?>" class="form-control" id = 'contact'>
<input type="text" placeholder="Grupo" class="form-control" id = 'grupo'>
</div>
</div>
<button type="submit" class="btn btn-primary btn-link btn-wd btn-lg" name = 'uid'>Confirmar</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
UserController#GetUser:
public function getUser() {
$id = $_POST['uid'];
$seluser = DB::table('users') -> where('id', $id) -> first();
$view = view('/users/index',compact('seluser'))->render();
return response(['status'=> 1, 'data' => $view]);
}
Ajax code in index.blade.php:
$(document).ready(function(){
$("#uid").click(function (e){
e.preventDefault();
$.ajax({
type: 'POST',
url: baseUrl+"/getUser",
data:{uid: $("#uid").val()},
dataType: 'json',
success: function(data) {
$('#edit').html(data.html);
}
});
});
});
I'm new at AJAX so i assume the error is in it
Here is an example for what you're trying to do :
Controller for GET request :
$users = \App\User::all();
return view('users', ['users' => $users]);
View users :
<div class="container">
#foreach ($users as $user)
<button class="btn btn-primary" data-toggle="modal" data-target="#edit" id ="uid" data-id="{{$user->id}}">
click here
</button>
#endforeach
#csrf
<div class="modal fade" id="edit" tabindex="-1" role="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<div class="card-header card-header-primary text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="card-title">Editar</h4>
</div>
</div>
<div class="modal-body">
<div id="user">
<h1 id="name"></h1>
<p id="email"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS code :
<script>
/* eslint disabled */
$(
() => {
$('#uid').click(
(e) => {
var uid = $(event.target).data('id');
$.ajax({
type: 'POST',
url: 'users/' + uid,
data: {'_token': $("input[name='_token']").val()},
success: function(data){
// or use : $('#user').html(data);
$('#user #name').text(data.name);
$('#user #email').text(data.email);
}
});
}
);
}
);
</script>
Controller (Route) POST request :
Route::post('users/{id}', function ($id) {
$data = \DB::table('users')->where('id', $id)->first();
return response()->json($data, 200);
});
This code allow to the client , for each user in db there're modal button to open popup , and after clicking on user's button i get a pop up with mail and name for this user
Can someone help, I cant seem to get the data colleted from the form to be sent to the mysql database.
I am very new to coding and I cant seem to figure out why the form data is not being sent to the mysql database table.
Please any help would be muchly appricated.
once I press submit the page closes than refreshs without any errors, but the data has not been sent to the database table.
Please see code below.
<?php include'inc/header.php'; ?>
<div class="container">
<center>
<h2 style="color: #odc16f">Shipped</h2>
<hr>
</center>
<center>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addEmpModal">
Add Order
</button>
</center>
<!-- Modal -->
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="" method="post">
<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">Add New Order</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Enter Name</label>
<input class="form-control" type="text" name="customer" id="customer" placeholder="Enter Name">
<label id="lbcustomer" style="color:red"></label>
</div>
<div class="form-group">
<label>Enter Date</label>
<input class="form-control" type="date" name="date" id="date" placeholder="Enter Date">
<label id="lbdate" style="color:red"></label>
</div>
<div class="form-group">
<label>Enter Invoice</label>
<input class="form-control" type="number" name="invoice" id="invoice" placeholder="Enter Invoice">
<label id="lbinvoice" style="color:red"></label>
</div>
<div class="form-group">
<label>Enter eBay</label>
<input class="form-control" type="number" name="ebay" id="ebay" placeholder="Enter eBay">
<label id="lbebay" style="color:red"></label>
</div>
<div class="form-group">
<label>Enter Shipped</label>
<input class="form-control" type="text" name="shipper" id="shipper" placeholder="Enter Shipped">
<label id="lbshipper" style="color:red"></label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div><!-- /.container ends here -->
<?php
include'inc/footer.php';
?>
<script>
$(document).ready(function() {
$(document).on('click', '#save', function() {
var customer = $("#customer").val();
var date = $("#date").val();
var invoice = $("#invoice").val();
var ebay = $("#ebay").val();
var shipper = $("#shipper").val();
if (customer == "") {
$("#lbcustomer").html("Enter Name");
} else if (date == "") {
$("#lbdate").html("Enter Date");
} else if (invoice == "") {
$("#lbinvoice").html("Enter Invoice");
} else if (ebay == "") {
$("#lbebay").html("Enter eBay");
} else if (shipper == "") {
$("#lbshipper").html("Enter Shipper");
} else {
$.ajax({
url: "save_data.php",
type: "post",
data: {
customer: customer,
date: date,
invoice: invoice,
ebay: ebay,
shipper: shipper
},
success: function(data) {
alert("Order Has Been Successful");
$("#addEmpModal").modal('hide');
location.reload();
}
});
}
});
});
</script>
Please see below the save_data.php code
<$php
include 'config/config.php';
global $con;
$customer = $_POST['customer'];
$date = $_POST['date'];
$invoice = $_POST['invoice'];
$ebay = $_POST['ebay'];
$shipper = $_POST['shipper'];
$save_data = "INSERT INTO orders(customer, date, invoice, ebay, shipper)VALUES('$customer','$date','$invoice','$ebay','$shipper')";
$result = mysqli_query($con, $save_data);
and below is the config.php code.
<?php
$con = mysqli_connect("localhost","root","Password","shippedorders");
if (!$con) {
echo "Failed to connect to MySQL: ".mysqli_connect_error($con);
}
you are missing
action in :
<form action="save_data.php" method="post">
or are you running your php in same page as html ? or you
Hi my bootstrap edit modal is not getting two values it should be getting from the database.It should be getting Last Name and License Number Values and place it as a default value when I open the edit modal. Same as the other four. Refer to this image... Here are the codes..
index.php
<!-- edit modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="editMemberModal">
<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"><span class="glyphicon glyphicon-edit"></span> Edit Member</h4>
</div>
<form class="form-horizontal" action="php_action/update.php" method="POST" id="updateMemberForm">
<div class="modal-body">
<div class="edit-messages"></div>
<div class="form-group">
<label for="editName" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editName" name="editName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="editLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editlName" name="editlName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="editLicenseNumber" class="col-sm-3 control-label">License Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editlNumber" name="editlNumber" placeholder="License Number">
</div>
</div>
<div class="form-group">
<label for="editAddress" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editAddress" name="editAddress" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="editContact" class="col-sm-3 control-label">Contact</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editContact" name="editContact" placeholder="Contact">
</div>
</div>
<div class="form-group">
<label for="editActive" class="col-sm-3 control-label">Paid</label>
<div class="col-sm-9">
<select class="form-control" name="editActive" id="editActive">
<option value="">~~SELECT~~</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</div>
</div>
<div class="modal-footer editMemberModal">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /edit modal -->
getSelectedMember.php
$memberId = $_POST['member_id'];
$sql = "SELECT * FROM members WHERE id = $memberId";
$query = $connect->query($sql);
$result = $query->fetch_assoc();
$connect->close();
echo json_encode($result);
index.js
function editMember(id = null) {
if(id) {
// remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
$(".text-danger").remove();
// empty the message div
$(".edit-messages").html("");
// remove the id
$("#member_id").remove();
// fetch the member data
$.ajax({
url: 'php_action/getSelectedMember.php',
type: 'post',
data: {member_id : id},
dataType: 'json',
success:function(response) {
$("#editName").val(response.name);
$("#editlName").val(response.lname);
$("#editlNumber").val(response.lnumber);
$("#editAddress").val(response.address);
$("#editContact").val(response.contact);
$("#editPaid").val(response.paid);
// mmeber id
$(".editMemberModal").append('<input type="hidden" name="member_id" id="member_id" value="'+response.id+'"/>');
// here update the member data
$("#updateMemberForm").unbind('submit').bind('submit', function() {
// remove error messages
$(".text-danger").remove();
var form = $(this);
// validation
var editName = $("#editName").val();
var editlName = $("#editlName").val();
var editlNumber = $("#editlNumber").val();
var editAddress = $("#editAddress").val();
var editContact = $("#editContact").val();
var editPaid = $("#editPaid").val();
if(editName == "") {
$("#editName").closest('.form-group').addClass('has-error');
$("#editName").after('<p class="text-danger">The Name field is required</p>');
} else {
$("#editName").closest('.form-group').removeClass('has-error');
$("#editName").closest('.form-group').addClass('has-success');
}
if(editlName == "") {
$("#editlName").closest('.form-group').addClass('has-error');
$("#editlName").after('<p class="text-danger">The LastName field is required</p>');
} else {
$("#editlName").closest('.form-group').removeClass('has-error');
$("#editlName").closest('.form-group').addClass('has-success');
}
if(editlNumber == "") {
$("#editlNumber").closest('.form-group').addClass('has-error');
$("#editlNumber").after('<p class="text-danger">The License Number field is required</p>');
} else {
$("#editlNumber").closest('.form-group').removeClass('has-error');
$("#editlNumber").closest('.form-group').addClass('has-success');
}
if(editAddress == "") {
$("#editAddress").closest('.form-group').addClass('has-error');
$("#editAddress").after('<p class="text-danger">The Address field is required</p>');
} else {
$("#editAddress").closest('.form-group').removeClass('has-error');
$("#editAddress").closest('.form-group').addClass('has-success');
}
if(editContact == "") {
$("#editContact").closest('.form-group').addClass('has-error');
$("#editContact").after('<p class="text-danger">The Contact field is required</p>');
} else {
$("#editContact").closest('.form-group').removeClass('has-error');
$("#editContact").closest('.form-group').addClass('has-success');
}
if(editPaid == "") {
$("#editPaid").closest('.form-group').addClass('has-error');
$("#editPaid").after('<p class="text-danger">The Paid field is required</p>');
} else {
$("#editPaid").closest('.form-group').removeClass('has-error');
$("#editPaid").closest('.form-group').addClass('has-success');
}
if(editName && editlName && editlNumber && editAddress && editContact && editPaid) {
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
dataType: 'json',
success:function(response) {
if(response.success == true) {
$(".edit-messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// reload the datatables
manageMemberTable.ajax.reload(null, false);
// this function is built in function of datatables;
// remove the error
$(".form-group").removeClass('has-success').removeClass('has-error');
$(".text-danger").remove();
} else {
$(".edit-messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>')
}
} // /success
}); // /ajax
} // /if
return false;
});
} // /success
}); // /fetch selected member info
I have this modal view :
<div class="modal fade" id ="myModal" tabindex="-1" role="dialog">
<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">Delta Rom insert missed entries</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Event:</label>
<div class="col-sm-10">
<select id="eventData" name="type" data-placeholder="Select"
class="form-control chosen-select">
<option value="Harvest">
Harvest Product Machine
</option>
<option value="Tara">
Tara Machine
</option>
</select>
</div>
</div>
<div id ="producttab" class="form-group">
<label class="col-sm-2 control-label">Product:</label>
<div class="col-sm-10">
<select name="harvest" id ="harvestData" data-placeholder="Select"
class="form-control chosen-select">
<?php
foreach ($this->datamodal['products'] as $value) {
echo '<option value = "' . $value->name . '">' . $value->name . '</option>';
}
?>
</select>
</div>
</div>
<div id ="tabmachines" class="form-group">
<label class="col-sm-2 control-label">Machine:</label>
<div class="col-sm-10">
<select name="machine" id ="machineData" data-placeholder="Select"
class="form-control chosen-select">
<?php
foreach ($this->datamodal['machines'] as $value) {
echo '<option value = "' . $value->name . '">' . $value->name . '</option>';
}
?>
</select>
</div>
</div>
<div id="impuritytab" class="form-group">
<label class="col-sm-2 control-label">Impurity:</label>
<div class="col-sm-10">
<input name="impurities" type="text" class="form-control" id="inputimpuritiesData"
placeholder="Impurities">
</div>
</div>
<div id ="humiditytab" class="form-group">
<label class="col-sm-2 control-label">Humidity:</label>
<div class="col-sm-10">
<input name="humidity" type="text" class="form-control" id="humidityAData"
placeholder="Humidity">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="saveModal" type="button" value="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And I got 2 types of events with value Harvest or Tara, depending on the event selected I show some particular div's like this:
$('#eventData').change(function() {
opt = $(this).val();
if (opt=="Tara") {
$("#producttab").hide();
$("#impuritytab").hide();
$("#humiditytab").hide();
}else if (opt == "Harvest") {
$("#producttab").show();
$("#impuritytab").show();
$("#humiditytab").show();
}
});
I have a ajax that will submit that form:
function onAddMissedEntryInfoClicked(entryId) {
var currentEntryId = entryId;
$('#myModal').modal('show'); //this load modal view
$("#saveModal").unbind( "click");
$('#saveModal').bind('click', function(){
var event = $('#eventData').val();
var product = $('#harvestData').val();
var machine = $('#machineData').val();
var impurities = $("#inputimpuritiesData").val();
var humidity = $("#humidityData").val();
var dataJson = {
"eventid":currentEntryId,
"event": event,
"product": product,
"machine": machine,
"impurities": impurities,
"humidity":humidity
};
$.ajax({
type: 'POST',
url: "Monitor/thisUpdate",
data: dataJson,
success: function (data) {
console.log(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
$('#myModal').modal('hide');
});
}
My problem is that when I'm on the Machine option, I will see only the tabmachines id field (that is good) but when I submit I will send all form values including the fields that I was hiding in my jQuery. I want to only send the forms on the select option, in my case only send machine values. How I can make my ajax data in a dynamic way? Thank you!
You can add an if clause in your onAddMissedEntryInfoClicked and create a different json object according to the event data.
if (event==="Harvest") {
var dataJson = {
"eventid":currentEntryId,
"event": event,
"machine": machine
};
}
else if (event==="Tara") {
var dataJson = {
"eventid":currentEntryId,
"event": event,
"product": product
"impurities": impurities,
"humidity":humidity
};
}
I have this modal
<!-- Modal -->
<div id="normale" class="modal fade" role="dialog">
<div class="modal-dialog" style="background-color:white">
<!-- Modal content-->
<div class="modal-content" style="background-color:white">
<div class="modal-header" style="background-color:white">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Aggiungi al carrello</h4>
</div>
<div class="modal-body" id="mod_carrello" style="background-color:white">
<div class="hidden">
<input type="text" id="id_tariffa" name="id_tariffa" value="id_tariffa" readonly class="form-control hidethis" style="display:none" >
</div>
<div class="form-group hidethis " style="display:none" >
<label for="Id" class=" control-label col-md-4 text-left"> Id </label>
<div class="col-md-6">
<input type="text" id="id" name="id">
</div>
<div class="col-md-2">
</div>
</div>
<div class="form-group hidethis " style="display:none">
<label for="Cod Carrello" class=" control-label col-md-4 text-left"> Cod Carrello </label>
<div class="col-md-6">
<?php
$persistent = DB::table('carrello')->where('entry_by', \Session::get('uid'))->first();
if (empty($persistent)) {
$chars = "abcdefghijkmnopqrstuvwxyz023456789";
srand((double)microtime()*1000000);
$i = 0;
$code = '' ;
while ($i <= 20) {
$num = rand() % 33;
$tmp = substr($chars, $num, 1);
$code = $code . $tmp;
$i++; } ?>
<input type="text" name="cod_carrello" value="{{ $code }}" id="cod_carrello">
<?php } else {
$cod_carrello = $persistent->cod_carrello; ?>
<input type="text" name="cod_carrello" value="{{ $cod_carrello }}" id="cod_carrello">
<?php } ?>
</div>
<div class="col-md-2">
</div>
</div>
<div class="form-group " >
<label for="Quantita" class=" control-label col-md-4 text-left"> Quantita </label>
<div class="col-md-6">
<input type="text" class="form-control" id="quantita" name="quantita">
</div>
<div class="col-md-2">
</div>
</div>
</fieldset>
</div>
<div class="modal-footer" style="background-color:white">
<button type="submit" id="add_to_cart" class="btn btn-assertive">Aggiungi</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
That is an Ajax cart.
This is the Jquery script:
$('#add_to_cart').click(function(){
var button = $(event.relatedTarget) // Button that triggered the modal
var id_tariffa = button.data('tariffa')
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.hidden input').val(id_tariffa);
var cod_carrello = document.getElementById("cod_carrello").value;
var quantita = document.getElementById("quantita").value;
$.ajax({
url: 'carrello-ajax',
type: "post",
data: {'id_tariffa':id_tariffa, 'cod_carrello':cod_carrello, 'quantita':quantita, '_token': $('input[name=_token]').val()},
success: function(data){
if ( data.OK == 1 ) {
var mod_carrello_original = $("#mod_carrello").html();
$('#mod_carrello').html('<h1 align="center" style="color:green; font-size: 21.5em;"><i class="fa fa-smile-o"></i></h1><br><br><h3 align="center">Servizio aggiunto correttamente al carrello</h3>');
$("#normale").on("hidden.bs.modal", function(){
$('#mod_carrello').html(mod_carrello_original);
});
} else {
$('#mod_carrello').html('<h1 style="color:green"><i class="fa fa-error"></i><br>Si è verificato un errore</h2>');
}
}
});
});
});
My problem is that after 2 times that I input and add to cart some product without any problem the modal no longer updates content nor shows every time the success message.
I hope that someone can help me.
Solved using a fresh div with the same content bu different id