jquery chosen update not working after ajax response - javascript

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.

Related

jQuery modal not showing after submitting form

I am trying to show a message after a user clicks on a button to submit a form but my modal is not getting displayed. don't know why this is happening.
My html code:
<form method="POST" class="course-save-form">
{% csrf_token %}
<button class="small btn no-border dropdown-item save-course" type="button" data-url="{% url 'home:course-save' course.id %}"><i class="mr-1 m fas fa-bookmark"></i>Save</button>
</form>
my modal:
<div class="modal fade" id="modal-save-course">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="moda-body">
<div class="modal-header text-center">
<h5 class="modal-title col-12 text-center">Save Course
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</h5>
</div>
<h6 class="text-message"></h6>
</div>
<div class="modal-footer col-12">
<button type="button" class="btn btn-seconday" style="border-radius: 20px; width: 100%;">Close</button>
</div>
</div>
</div>
</div>
and my jQuery:
$(document).ready(function (e) {
$('.course-save-form').on("click", ".save-course", function (e) {
var btn = $(this)
e.preventDefault();
e.stopImmediatePropagation();
$.ajax({
type: "POST",
url: $(this).attr("data-url"),
dataType: 'json',
data: $(this).closest("form").serialize(),
success: function (data){
$('#modal-save-course').show();
$('#modal-save-course.modal-content.modal-body.text-message').html(data.message);
},
error: function(rs, e){
console.log(rs.responeText);
},
});
});
})
My button works but my modal is not getting displayed with the message.
Use $('#modal-save-course').modal('show');
Also, text wasn't displaying with .html , so use .text :
$('#modal-save-course .text-message').text(data.message);
$('#modal-save-course').modal('show');
See screenshot:

jQuery plugin not working inside a .vue component

I'm working in a vue component for my application in Laravel 5.3, I try to integrate the Laravel File Manager in a standalone button, but this not working, nothing happend when I clic on the button for choose an image, this component required a jQuery init setup, like the following line:
$('.lfm-img').filemanager('image');
I checked the component outside the .vue file and its working fine, only inside the .vue file is not working.
This is the vue component
<template>
<div class="modal fade"
id="section-{{ section.id }}"
tabindex="-1"
role="dialog"
aria-labelledby="sectionLabel-{{ section.id }}">
<div class="modal-dialog modal-lg" 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="sectionLabel-{{ section.id }}">
{{ section.name }}
</h4>
</div>
<div class="modal-body">
<!-- Field List -->
<div v-if="editing != true">
<ul class="list-group">
<li class="list-group-item" v-for="field in fields">
<div class="clearfix">
<div class="pull-left">
<span>
{{ field.name }}
</span>
</div>
<div class="pull-right">
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
title="Editar valor"
#click="setField(field)">
<i class="fa fa-pencil-square fa-lg"
aria-hidden="true"></i>
</button>
</div>
</div>
</li>
</ul>
</div>
<!-- / Field List -->
<!-- Save value form -->
<div v-else>
<form #submit.prevent="updateFieldValue()">
<!-- Fields types -->
<div v-if="field.fieldtype_id === 1">
<div class="form-group vertical-align">
<label class="col-md-2 text-right">
Texto
</label>
<div class="col-md-10">
<input type="text"
v-model="value"
placeholder="Ingrese el valor"
class="form-control"
required="required">
</div>
</div>
<p><br></p>
</div>
<div v-if="field.fieldtype_id === 2">
<div class="form-group">
<textarea v-model="value"
placeholder="Ingrese texto"
class="form-control"
rows="5"
required="required">
</textarea>
</div>
<p><br></p>
</div>
<div v-if="field.fieldtype_id === 3">
<div class="form-group vertical-align">
<label class="col-md-3 text-right">
Seleccione una imagen
</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-btn">
<a data-input="value"
data-preview="holder"
class="btn btn-primary lfm-img">
<i class="fa fa-picture-o"
aria-hidden="true"></i> Seleccionar
</a>
</span>
<input id="value"
v-model="value"
class="form-control"
type="text"
name="value"
required="required">
</div>
</div>
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">
<p><br></p>
</div>
<!-- Actions -->
<div class="clearfix">
<div class="pull-right">
<button type="button"
class="btn btn-default"
data-dismiss="modal"
#click="finishEdit()">
Cancelar
</button>
<button type="submit"
class="btn btn-primary">
Guardar
</button>
</div>
</div>
</form>
</div>
<!-- / Save value form -->
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
#click="finishEdit()"
data-dismiss="modal">
Cerrar
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['section'],
data()
{
return {
fields: [],
field: [],
value: '',
loading: true, // start the spin loader
editing: false // show field list
}
},
ready()
{
this.loading = false; // stop the spin loader
this.getSectionFields();
},
methods:
{
startEdit()
{
this.editing = true;
},
finishEdit()
{
this.field = [];
this.value = '';
this.editing = false;
},
setField(field) {
this.field = field;
if (this.field.pivot.value !== null) {
this.value = this.field.pivot.value;
}
this.startEdit();
},
getSectionFields()
{
var self = this; // store "this." scope
// GET request
this.$http.get('/api/getSectionFields/' + this.section.id )
.then((response) => {
// sucess callback
var json = JSON.parse(response.body); // json parse
self.fields = json.fields;
this.loading = false; // stop the spin loader
}, function(response) {
// error callback
console.log(response);
});
},
updateFieldValue()
{
this.loading = true // start the spin loader
var params = { section : this.section.id,
field : this.field.id,
value : this.value
};
// POST request
this.$http.post('/api/update-value', params)
.then((response) => {
// sucess callback
this.getSectionFields();
this.finishEdit();
}, function(response) {
// error callback
console.log(response);
this.getSectionFields();
});
}
}
}
</script>
I solved the problem using Vue.nextTick, running the following code before the file manager be shown to ensure the initialization of the plugins in the latest DOOM update.
initFilemanager()
{
this.$nextTick(function() {
$('.lfm-img').filemanager('image');
});
},

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

Information not refreshing after updating it in database

I am attempting to set up modal using bootstrap for a project in which a client would be able to update their favorite team, city of birth and their size. Once the information is updated in the database I would like to update it in its respective field.
my modal code:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="cityIn">You live in:</label>
<input type="text" class="form-control" id="cityIn" placeholder="city">
</div>
<div class="form-group">
<label for="favoriteTeam">Favorite Team:</label>
<input type="text" class="form-control" id="favoriteTeam" placeholder="favoriteTeam">
</div>
<div class="form-group">
<label for="size">Size:</label>
<input type="text" class="form-control" id="size" placeholder="size">
</div>
<div class="form-group">
<input type="hidden" class="form-control" id="usernameSubmitting" value="<?php echo $u; ?>">
</div>
<div class="alert alert-success" id="successAlert" role="alert" style="display: none"></div>
<div class="alert alert-danger" id="updateFail" style="display:none"> </div>
</form>
</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="saveBtn" onClick="Changes()">Save changes</button>
</div>
</div>
</div>
</div>
my script:
function Changes() {
var updateCity = $("#cityIn").val();
$.ajax({
url: "../php_parsers/update_parse.php",
type: "POST",
data: {
cityIn: $("#cityIn").val(),
favoriteTeam: $("#favoriteTeam").val(),
size: $("#size").val(),
usernameSubmitting: $("#usernameSubmitting").val()
}
}).done(function(result) {
if (result == "success") {
$("#successAlert").html("Update successful").show();
} else {
$("#updateFail").html(result).show();
}
})
$('#myModal').on('hide.bs.modal', function(e) {
$("#cityDisplayed").html(updateCity);
$("#updateFail, #successAlert").hide();
});
}
nvm my code was proper just forgot to save it.
function Changes() {
var updateCity = $("#cityIn").val();
$.ajax({
url: "../php_parsers/update_parse.php",
type: "POST",
data: {
cityIn: $("#cityIn").val(),
favoriteTeam: $("#favoriteTeam").val(),
size: $("#size").val(),
usernameSubmitting: $("#usernameSubmitting").val()
}
}).done(function(result) {
if (result == "success") {
$("#successAlert").html("Update successful").show();
} else {
$("#updateFail").html(result).show();
}
})
$('#myModal').on('hide.bs.modal', function(e) {
$("#cityDisplayed").html(updateCity);
$("#updateFail, #successAlert").hide();
});
}

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

Categories