We Keep Coding

jquery chosen update not working after ajax response

I have some issue with jquery chosen (ver 1.5.1). In my laravel project I have view with modal. In view is select with alreay some list. User using modal with form, can add position to the table from which I wanna update select list and update chosen. My code:
View:
<div class="form-group row">
<label class="col-3 text-right" for="car">Klient: (Add car)</label>
<div class="col-9">
{!! Form::select('cari', $car, null, ['class'=>'form-control form-control-sm form-control-chosen', 'id' => 'client', 'placeholder' => 'Chose car']) !!}
{!! $errors->first('cari', '<strong><p style="color:red;" class="help-block">:message</p></strong>') !!}
<script type="text/javascript">
$("#client").chosen({
no_results_text: 'Missing sorry.',
});
</script>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">add new car:</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col response-client">
</div>
</div>
#csrf
<div class="form-group {{ $errors->has('car') ? 'has-error' : ''}}">
<label for="exampleFormControlFile1">car danem: </label>
<input class="form-control form-control-sm" name="car" type="text" id="newcar">
{!! $errors->first('car', '<strong><p style="color:red;" class="help-block">:message</p></strong>') !!}
</div>
</div>
<button type="submit" id="add-car" class="btn btn-primary btn-sm">{{ __('save') }}<i class="icon-floppy"></i></button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
script code
$('#add-car').click(function(){
var car = $('#newcar').val();
$.ajax({
url:"{{ url('cars/carNew') }}",
method:"POST",
data:{car:car, _token:"{{ csrf_token() }}"},
success:function(result)
{
if(result.result > 0)
{
NewCar();
}
else
{
$("#msg").html("Error can't add new car!");
$("#msg").fadeOut(2000);
}
},
error:function(xhr)
{
console.log(xhr.responseText);
}
})
});
function NewCar()
{
$('#myModal').modal('hide');
$('.modal-backdrop').remove();
$('#client').empty();
$.ajax({
url:"{{ url('umowy/klienci') }}",
method:"POST",
data:{ _token:"{{ csrf_token() }}"},
success:function(result)
{
$("#client").append('<option>Chose car</option>');
if(result)
{
$.each(result,function(key,value){
$('#client').append($("<option/>", {
value: key,
text: value
}));
});
}
$('#client').trigger('chosen:updated');
},
error:function(xhr)
{
console.log(xhr.responseText);
}
});
}
});
Everything works very well except that $('#client').trigger('chosen:updated');. Nothing happen no errors. I'm not sure if I'm doing everything right? Sorry for my english.

How to reload page after form submission?

$('form').submit(function () {
value = true;
var schoolName = $('#addSchoolName').val();
if (schoolName.trim() == '') {
$('#addSchoolName').addClass('border border-danger');
value = false;
}
if (value) {
return true;
}
else { return false;}
});
$("form").bind('ajax:complete', function () {
window.location.reload();
});
$('#close').on('click', function () {
$('#addSchoolName').removeClass('border border-danger');
$('#addSchoolName').val('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="addSchool" tabindex="-1" role="dialog" aria-labelledby="addSchoolTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered cls" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title" id="addSchoolTitle">Add School Details</label>
</div>
<form asp-action="AddNewSchool" asp-controller="School" asp-antiforgery="true" method="post">
<div class="modal-body form-group row align-items-center">
<div class="col-md-4">
<label for="Name">School Name</label>
</div>
<div class="col-md-8">
<input class="form-control" name="Name" id="addSchoolName" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary " id="close" data-dismiss="modal">Close</button>
<button type="submit" id="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
I am using form inside modal and submitting that form. I want to reload my page So that after form submission the list behind that modal will update. I do not want to use Ajax call for form submission.
<div class="modal fade" id="addSchool" tabindex="-1" role="dialog" aria-labelledby="addSchoolTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered cls" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title" id="addSchoolTitle">Add School Details</label>
</div>
<form asp-action="AddNewSchool" asp-controller="School" asp-antiforgery="true" method="post">
<div class="modal-body form-group row align-items-center">
<div class="col-md-4">
<label for="Name">School Name</label>
</div>
<div class="col-md-8">
<input class="form-control" name="Name" id="addSchoolName" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary " id="close" data-dismiss="modal">Close</button>
<button type="submit" id="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
and write now I am applying this validation on the form.
#section scripts{
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$('form').submit(function () {
value = true;
var schoolName = $('#addSchoolName').val();
if (schoolName.trim() == '') {
$('#addSchoolName').addClass('border border-danger');
value = false;
}
if (value) {
return true;
}
else { return false;}
});
$("form").bind('ajax:complete', function () {
window.location.reload();
});
$('#close').on('click', function () {
$('#addSchoolName').removeClass('border border-danger');
$('#addSchoolName').val('');
});
</script>
I do not wants to use ajax call for form submission, I want to reload the page after submitting the form inside modal so that the list behind that modal will be updated.

I'm a bit confused because by default it should be reloading on the submit function. This is why we use event.preventDefault at the end. but if you want there is always location.reload
https://www.w3schools.com/jsref/met_loc_reload.asp

Display success modal after form submit

I created a form inside has username and id textbox, I want to display
a success modal that contains the value of username and id after form submit
to let the user see his username and id, And also i have an validation on my form , Now my problem is when i click submit
button with empty textfields the validation appear also the success modal also appear.
here is my sample code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" class="btn" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal1" style=" color:#fff; background:#00bcd4" onClick="incrementValue()" value="Increment Value">No</button>
<div class="modal fade right" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-full-height modal-right" role="document">
<div class="modal-content">
<div class="modal-header blue accent-1">
<h3 class="mt-2" style="color:white;"><i class="fa fa-user-circle"></i> New User :</h3>
<a href="test1.php" button type="btn" class="close" aria-label="Close">
<span aria-hidden="true">×</span></a> </div>
<div class="modal-body" style="height:300px">
<form class="needs-validation " method="post" novalidate >
<div class="row">
<div class="col">
<div class="md-form mt-0">
<input type="text" class="form-control" name="id" placeholder="ID" style="margin-top:-10px" id="id" required >
<div class="invalid-feedback">
Enter ID </div>
</div>
</div>
<div class="col">
<div class="md-form mt-0">
<input type="text" class="form-control" placeholder="Username" name="username" style="margin-top:-10px" id="username" required >
<div class="invalid-feedback">
Enter Username </div>
</div>
</div>
</div>
<div class="text-center mt-2" style="bottom:0; margin-bottom:10px;">
<button type="submit" id="submit" class="btn btn-info" style="width:95%;"
>Log in <i class="fa fa-sign-in ml-1"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document" style="width:85%" >
<div class="modal-content">
<div class="modal-header blue accent-1">
<h4 class="modal-title" id="myModalLabel" style="color:white;"><i class="fa fa-lock"> Info:</i></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
display user's username and id here.
</div>
<div class="modal-footer">
<a class="btn btn-primary" href="test1.php" > Confirm</a>
</div>
</div>
</div>
</div>
here is my validation javascript for my form:
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
here is my script for my modal:
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#modalSuccess").modal();
});
});
</script>
Advance Thanks :)

You have to check if the fields are filled in before calling
$("#modalSuccess").modal();
Also check in the validation script

<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if($('#username').val().trim().length > 0 && $('#id').val().trim().length > 0) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}
}, false);
});
}, false);
})();
</script>
And
<script>
$(document).ready(function(){
$("#submit").click(function(){
if($('#username').val().trim().length > 0 && $('#id').val().trim().length > 0) {
$("#modalSuccess").modal();
} else {
alert('Fill in both fields');
}
});
});
</script>

Date Not specifically working in laravel

I am now doing a project. In this project I am stuck in date.I have a problem in my project. In my project the user can add , edit or update his experience. For which I need date. The User can add his work experience from date to to date. But in this I can't select the previous date. I can only select from today to future day but can't select the previous date. I don't understand where the problem is.
My Code is given below
<h3 class="margin-bottom-20">Work Experience</h3>
<h4>Please list experience in chronological order, with most recent experience first.</h4><br>
<div class="margin-bottom-30">
<a href="#" data-toggle="modal" data-target="#addWorkExperience"
class="btn color-2 size-2 hover-1"><i class="fa fa-plus"></i> Add Work
Experience</a>
<div class="resume">
#if (isset($user_work_experiences))
#foreach ($user_work_experiences as $user_work_experience)
<div class="resume-list">
<div class="meta-header">
<p>{{ (!empty($user_work_experience->from_date)) ? $user_work_experience->from_date : '' }}
<i>to</i> {{ $user_work_experience->to_date }}</p>
</div>
</div>
#endforeach
#endif
</div>
</div>
After clicking the button this will work
<div class="modal fade" id="addWorkExperience" tabindex="-1" role="dialog" aria-labelledby="addExperience">
<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">Add Experience</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group focus-2">
<div class="form-label">From Date</div>
<input class="form-input datepicker" id="job_from_date" onblur="job_from_date()" onkeypress="job_from_date()" name="job_from_date" type="text" value="" placeholder="MM/DD/YYYY">
<label id="error_job_from_date" style="color:red"></label>
</div>
</div>
<div class="col-md-6">
<div class="form-group focus-2">
<div class="form-label">To Date</div>
<input class="form-input datepicker" id="job_to_date" onblur="job_to_date()" onkeypress="job_to_date()" name="job_to_date" type="text" value=""
placeholder="MM/DD/YYYY">
<div class="be-checkbox">
<label class="check-box">
<input type="checkbox" name="job_current_date" id="job_current_date" onblur="job_current_date()" onkeypress="job_current_date()" value="{{ \Carbon\Carbon::now()->format('m/d/Y') }}" class="checkbox-input">
<span class="check-box-sign"></span>
</label>
<span class="large-popup-text"> Currently Work Here </span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-lg btn-default" data-dismiss="modal">
Close
</button>
<button type="button" onclick="add_job_experience()"
class="be-popup-sign-button">Add Experience
</button>
</div>
</div>
</div>
</div>
My Javascript code is
function add_job_experience() {
if (job_title() && company_name() && job_from_date() && (job_to_date() || job_current_date()) && job_description()) {
$.ajax(
{
type: 'POST',
url: '{{ URL::to('profile/edit/work/experience') }}',
data: {
'job_title': document.getElementById('job_title').value,
'company_name': document.getElementById('company_name').value,
'from_date': document.getElementById('job_from_date').value,
'to_date': document.getElementById('job_to_date').value,
'current_date': document.getElementById('job_current_date').value,
'description': document.getElementById('job_description').value
},
cache: false,
success: function (result) {
if (result == 1) {
alert('work experience add successful');
window.location.reload();
} else {
alert(result);
}
}
}
)
} else {
}
}
Please help me solving this.

This is simply done by adding this in javascript
jQuery('.datepicker').datetimepicker({
timepicker:false,
format:'m-d-Y'
});

how can hide a popup using ajax

i have a button, when i clicks this button it will goes to ajax. In the suceess condition,it returns three values for 'data' which are 1,2,3. i want to popup a login form only when data=1.(if the user is not logged in). but popup is made by via data attributes. that is in all condition(1,2,3) the popup is showing.
i want to disable in data=2, data3. pls help me.
<button data-toggle="modal" data-target="#xmpModal" class="btn green btn-success" onclick="get('<?echo $u_id;?>','<?echo $e_id;?>')">click</button>
popup div
<div class="modal fade" id="exmpModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
ajax
function get(u_id,e_id)
{
$.ajax({
url: "<?echo base_url()?>events/xyz",
type: 'post', // HTTP METHOD
data:
{u_id:u_id,e_id:e_id },
success: function(data)
{
//alert(data);
if(data==1)
{
// add your code pls
}
else if(data==2)
{
alert("hai");
}
else if(data==3)
{
alert("hello");
}
}
});
}
my function in php controller
public function xyz()
{
$u_id=$this->input->post('u_id');
$e_id=$this->input->post('e_id');
$temp=$this->session->userdata('user');
$g=$this->xm->is_going($u_id,$e_id);
$g1=$this->xm->is_going1($u_id,$e_id);
if($temp=="")
{
$d=1;
echo $d;
}
else if($g==$u_id)
{
$d=2;
echo $d;
}
else if($g1==$u_id)
{
$d=3;
echo $d;
$this->xm->event_updation($e_id,$u_id);
}
else
{
$data=array('event_id'=>$e_id,'ev_going'=>$u_id);
$this->xm->eventgoing($data);
}
}

Just change your JavaScript a bit as shown in this code:
function get(u_id,e_id)
{
$.ajax({
url: "<?echo base_url()?>events/xyz",
type: 'post', // HTTP METHOD
data:
{u_id:u_id,e_id:e_id },
success: function(data)
{
//alert(data);
if(data==1)
{
jQuery("#exmpModal").modal('show');
}
else{
jQuery("#exmpModal").modal('hide');
}
}
});
}