I have been stuck on this issue since a week. I am not able to validate bootstrap modal using jQuery validator function. I have searched lots of stuff, also I have used exactly the same method as mentioned in here: How to correctly validate a modal form . I have been using django framework. Here is my HTML code:
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<form class="form-horizontal" id="myForm" role="form" action="{% url 'apply:add' %}" method="POST">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Apply Leave
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3" for="e_id">Employee-Id</label>
<div class="col-sm-9">
<select class="form-control" id="e_id" name="e_id" class="required">
{% for entry in emp_data %}
<option value="{{ entry.emp_id }}">{{ entry.emp_id }} - {{ entry.emp_name}} </option>
{% endfor %}
</select>
</div>
</div>
<style>
.datepicker {
z-index: 1600 !important;
border-color: black;
}
</style>
<div class="form-group">
<label class=" control-label col-sm-3" for="s_dt">Start Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="s_dt" placeholder="Start Date" name="s_dt"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="e_dt">End Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="e_dt" placeholder="End Date" name="e_dt" require/>
</div>
</div>
<p class="col-sm-9 col-sm-offset-3" > Enter Start Date = End Date if leave is applied for a single day </br></p>
<div class="form-group">
<label class="col-sm-3 control-label" for="l_type">Leave Type</label>
<div class="col-sm-9">
<select class="form-control" id="l_type" name="l_type">
<option value="S">Sick Leave</option>
<option value="V">Vacation Leave</option>
<option value="M">Maternity Leave</option>
<option value="P">Paternity Leave</option>
<option value="C">Casual Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="desc">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="desc" rows="3"></textarea>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" name="save" id="save" value="Save changes" data-dismiss="modal">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Here is my javascript:
$(function() {
$("#myForm").validate({
rules: {
s_dt: "required",
e_dt: "required"
},
messages: {
s_dt: "Please provide a date",
e_dt: "Please provide a date"
}
});
});
Thanks in advance..
Related
I'm running a laravel server and am trying to setup a bootstrap modal, i've JSFiddled the exact code and it works like a charm, however on the laravel app, it seems to be stopping mid-load.
In inspect element, I can see when the button is pressed that opens the modal, the class changes from 'modal fade' to 'modal fade in' and a couple seconds later it returns back to 'modal fade'
Could this be an issue with loading such items in my dashboard layout blade view?
If I manually change the class to 'modal panel show' It shows properly.
layouts/dash.blade.php - File
<!-- LAYOUT CODE IS HERE -->
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script>
$('#modal-create').on('show.bs.modal', function(event) {
console.log('modal open')
var button = $(event.relatedTarget)
var modal = $(this)
});
</script>
my_folder/a_view/test.blade.php
CREATE USER
<!-- MODAL START -->
<div class="modal fade" id="modal-create" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" style="padding-right: 17px; display: none;" aria-modal="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="{{ route('staff.user.create') }}">
#csrf
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="floating-label" for="name">Username</label>
<input type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" id="name" name="name" placeholder="" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="floating-label" for="email">Email</label>
<input type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" id="email" name="email" placeholder="" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="floating-label" for="password">Password</label>
<input type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" id="password" name="password" placeholder="" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="floating-label" for="password-confirm">Confirm Password</label>
<input type="password" class="form-control" id="password-confirm" name="password-confirm" placeholder="" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="floating-label" for="usergroup">Select Usergroup</label>
<select class="form-control" id="usergroup" name="usergroup" required>
<option value="user">User</option>
<option value="tester">Tester</option>
<option value="admin">Admin</option>
<option value="manager">Manager</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group fill">
<label class="floating-label" for="image">Profie Image</label>
<input type="file" class="form-control" id="image" placeholder="matty">
</div>
</div>
<div class="col-sm-12">
<button class="btn btn-success">Create</button>
<button class="btn btn-danger">Clear</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?
I trying to find in my database an order via a webservice integrated in the order controller like below :
#GetMapping("/view" )
#ResponseBody
public Optional<Ordre> view(String id) {
return ordreRepository.findById(id) ;
}
Then display the details of the order in a modal by using a javascript code like below :
$('.view').on('click', function(e) {
e.preventDefault();
var href2 = $(this).attr('href2');
$.get(href2, function(ordre, status) {
$('#Modalview #num_ord').val(ordre.num_ord);
$('#Modalview #dte_ord').val(ordre.dte_ord);
$('#Modalview #dir_ord').val(ordre.dir_ord);
$('#Modalview #ref_ord').val(ordre.ref_ord);
$('#Modalview #pap_ord').val(ordre.pap_ord);
$('#Modalview #boss_ord').val(ordre.boss_ord);
$('#Modalview #suj_ord').val(ordre.suj_ord);
});
$('#Modalview').modal();
});
<div class="modal fade" id="Modalview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="padding-left: 10px;">×</button>
</div>
<div class="modal-body" style="padding-bottom: 50px;">
<form class="form-horizontal" id="formview">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="num_ord" name="num_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input class="form-control pull-right" type="date" id="dte_ord" name="dte_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="dir_ord" name="dir_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="ref_ord" name="ref_ord" />
</div>
</div>
<div class="form-inline">
<div class="form-group pull-right">
</div>
</div>
<br/>
<br/>
<div class="form-group " id="pap">
<div class="col-sm-6 col-sm-push-3">
<select class="form-control" id="pap_ord">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<br/>
<div class="form-group" id="boss">
<div class="col-sm-8 col-sm-push-1">
<input class="form-control pull-right" type="text" id="boss_ord" name="boss_ord" />
</div>
</div>
<div class="form-group" id="suj" style="padding-top: 10px;">
<div class="col-sm-10">
<textarea class="form-control pull-right" id="suj_ord" name="suj_ord"></textarea>
</div>
</div>
<div class="modal-footer" style="margin-right: -15px;">
<button type="button" class="btn btn-default" data-dismiss="modal">Return Back</button>
</div>
</form>
<!--/modal-body-collapse -->
<!--/modal-footer-collapse -->
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
But nothing displayed in the modal i don't know and there is no error or crash in the console in my editor . any one can help me and thanks .
Have a try like below and bind your form object using th:field or th:value
$('.view').on('click', function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: /*[[ #{'/view'} ]]*/,
success: function(returnedData){
$('#formview').html(returnedData)
$('#Modalview').modal('show');
},
error: function(xhr, exception) {
console.log(xhr);
}
});
});
my contact us page, a pop up is meant to show and disappear when i send a message,but nothing happens. please help
the contact us page and pop up modal
<!-- The Contact Us Page -->
<div class="jumbotron jumbotron-sm">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 header"></div>
</div>
</div>
</div>
<div class="container card">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">Contact us <span class="fa fa-envelope"></span> <!--<small class="col-xs-12" style="padding-left: 0">We will get back to You</small>--></h1>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="cardStyle">
<form name="contact" id="form" data-toggle="validator">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
<div class="form-group">
<label for="subject">
Subject</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="none" selected="" disabled>Choose One:</option>
<option value="general">General Customer Service</option>
<option value="collaborate">Collaborate with Us</option>
<option value="bug">Found a Bug/Issue</option>
<option value="other">Any other Queries</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-success pull-right" id="btnContactUs">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
this is the pop up modal that is supposed to appear
<!-- Form submitted Thank You Modal -->
<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 text-center" id="myModalLabel">Contact</h4>
</div>
<div class="modal-body">
<h3 class="h3 text-center">Thank you for your feedback! We will get back to you.</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
the JavaScript file
$(document).ready(function() {
$('#form').validator().on('submit', function(e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
$('#myModal').modal('hide');
} else {
// everything looks good!
$('#myModal').modal('show');
}
})
});
Since you try to show the modal only when preventDefault() has NOT been called, the form's default action will take place, which is to submit the form. This causes a page load and since you haven't specified an action attribute on the form, it will submit to the same page. In other words, the page just reloads.
If you don't want to cause a page reload, you have to always call preventDefault() and then submit the data with AJAX.
Says, i write this code :
<div class="modal fade" id="addnewevent">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">
New Event
</h4>
</div>
<div class="modal-body">
<form name="newevent" id="newevent" action="" method="post">
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=date("d-m-Y",$now)?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option value="1">Normal</option>
<option value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" type="button">Add</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">close</button>
</div>
</div>
</div>
</div>
This will gave me result like this picture :
http://imageshack.com/a/img542/7466/okj7.png
Then, i use :
function change(id) {
$.post('ajax/change.php', {
data: id,
rand: Math.random()
},
function (html) {
$('#changeform').html(html);
$("#modalchange").modal('show');
});
}
triggered from this button :
<a class="table-actions" href="#" onClick="change('<?=$tm['id']?>');return false;"><i class="icon-pencil"></i></a>
The code for html (from change.php) is like this :
<?php
if(isset($_POST['data'])) {
$id = $_POST['data'];
$evt = mysql_query("select * from cal_event where id = '$id'");
$evt = mysql_fetch_array($evt);
$dt = explode(",",$evt['date']);
?>
<input type="hidden" value="<?=$id?>" name="uid" />
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text" value="<?=$evt['title']?>">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=$dt[2]."-".($dt[1]+1)."-".$dt[0]?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option <?=($evt['level']==1)?"selected":""?> value="1">Normal</option>
<option <?=($evt['level']==2)?"selected":""?> value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"><?=$evt['deskripsi']?></textarea>
</div>
<?php
}
?>
this is modal change
<div class="modal fade" id="modalchange">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Change Event</h4>
</div>
<div class="modal-body" >
<form name="changeform" id="changeform" action="" method="post">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="change" type="button">Change</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
but the result is different, it's give me like this :
http://imageshack.com/a/img89/3892/tpo5.png
So, how can i solve this problem?
and sorry for my bad in english.
From the picture you posted, the select element should not be just styled with css, there should be some javascript magic (which transform the select element to something else and hide the select element).
So you have to apply the javascript to the new html content again.