attached is my javascript and html.
in debug mode, I can confirm that 'display: none' changes to 'display :block'
but I don't see popupEventForm form open up.
Any ideas why?
Thanks,Peter
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show();
$('#eventTitle').focus();
}
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header">
<h3>Add new event</h3>
</div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<label>Event title</label>
<input type="text" id="eventTitle" placeholder="Title here"><br />
<label>Scheduled date</label>
<input type="text" id="eventDate"><br />
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration" placeholder="15"><br />
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
</div>
</div>
You also have the bootstrap hide class included..
<div id="popupEventForm" class="modal hide" style="display: none;">
Change your js to this:
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show().removeClass('hide');
$('#eventTitle').focus();
}
You need to remove the "hide" class from the modal. As well as you can use .modal('show') to open the modal
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').removeClass('hide');
$('#popupEventForm').modal('show');
$('#eventTitle').focus();
}
Instead of using style "display:none" use $('#popupEventForm').hide();
and $('#popupEventForm').show();
Or you can use $('#popupEventForm').attr("display","block").
Related
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?
As the title already says, I'd like to have a button that will open a modal and call a controller method at the same time. The method will return a JSON object.
How can I link the button so it will call the method and display the modal? Subsequently, I'd like to use the object returned by the function to populate the modal.
<i data-toggle="modal" data-target="#modal-default" class="fa fa-pencil-square-o"></i>
Modal:
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<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">Default Modal</h4>
</div>
<div class="modal-body">
<form class="form-group">
<div class="row">
<label class="col-xs-2" for="first">First Name: </label>
<input type="text" class="form-control col-md-2" id="first" name="" value="">
</div>
<div class="row">
<label class="col-xs-2" for="last">Last Name: </label>
<input type="text" class="form-control col-md-2" id="last" name="" value="">
</div>
<div class="row">
<label class="col-xs-2" for="email">Email: </label>
<input type="text" class="form-control col-md-2" id="email" name="" value="">
</div>
<div class="row">
<label class="col-xs-2" for="phone">Phone: </label>
<input type="text" class="form-control col-md-2" id="phone" name="" value="">
</div>
<div class="row">
<label class="col-xs-2" for="status">Status: </label>
<input type="text" class="form-control col-md-2" id="status" name="" value="">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You should bind the open modal event to another function that makes an asynchronous call to your server in order to retrieve the data
You can use jquery the show event:
$('#modal-default').on('shown', function (){
//use $.get('path/to/controller').done(function(resp){
console.log(resp); })
//|| $.ajax() || $.post()
})
or you can bind an id:
<i data-toggle="modal" data-target="#modal-default" class="fa fa-pencil-square-o" id="async_id"></i>
And use a listener:
$('#async_id').on('click', function(){
//use $.get('path/to/controller').done(function(resp){
console.log(resp); })
//|| $.ajax() || $.post()
})
EDIT:
use
$('#modal-default').on('shown.bs.modal', function (e) {...
for bootstrap 3
use $ .ajax first you make the request and then use .done to call the modal with setTimeout
In my modal popup code , I am trying to disable a button if a text box is empty or nothing is entered in it .
<div id="add_account_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ModalForAddAccount" aria-hidden="true">
<div class="modal-body">
<h3>Add a new Account</h3>
<form class=" " name="addAccountForm">
<div class="control-group">
<div class="controls">
<label class="control-label" style="display: inline">
Account Name
<span class="controls" style="display: inline;color:red;">*</span>
</label>
<div class="controls" style="display: inline">
<input type="text" class="input-large" ng-model="vm.addedAccount" style="margin-top: 5px;margin-left:7px;">
</div>
</div>
</div>
<div class="control-group">
<div class="btn-group">
<button class="btn btn-primary " ng-class="{'disabled':vm.addedAccount === ''}" ng-click="vm.submitAddAccount()">Submit</button>
<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</form>
</div>
</div>
But the submit button on modal popup load is not disabled.
I also tried :
<button class="btn btn-primary " ng-disabled="vm.addedAccount === ''" ng-click="vm.submitAddAccount()">Submit</button>
But that also did not work.
What am I doing wrong ?
ng-click fires even if ng-disabled is true
use ng-submit with ng-disabled instead.
<form class=" " name="addAccountForm" ng-submit="vm.submitAddAccount()">
<div class="control-group">
<div class="controls">
<label class="control-label" style="display: inline">
Account Name
<span class="controls" style="display: inline;color:red;">*</span>
</label>
<div class="controls" style="display: inline">
<input type="text" class="input-large" ng-model="vm.addedAccount" style="margin-top: 5px;margin-left:7px;">
</div>
</div>
</div>
<div class="control-group">
<div class="btn-group">
<button type="submit" class="btn btn-primary " ng-disabled="vm.addedAccount === ''">Submit</button>
<button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</form>
You could use this way:
<button class="btn btn-primary " ng-disabled="!vm.addedAccount.length" ng-click="vm.submitAddAccount()">Submit</button>
ng-disabled works well: http://codepen.io/DaniloPolani/pen/wgOpPa
Maybe vm.addedAccount is not an empty string? Try with a console log to print vm.addedaccount === '' or inside the angular brackets.
I wrote a code for pop up form for submitting data when clicked on Edit link in a bootstrap website:
Code is:
<script type="text/javascript">
$(document).ready(function(){
$("#modal-body").modal('show');
});
</script>
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<label class="label" for="name">Your Name</label><br>
<input type="text" name="name" class="input-xlarge"><br>
<label class="label" for="email">Your E-mail</label><br>
<input type="email" name="email" class="input-xlarge"><br>
<label class="label" for="message">Enter a Message</label><br>
<textarea name="message" class="input-xlarge"></textarea>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
Nah.
</div>
</div>
<div id="thanks"><p><a data-toggle="modal" href="#form-content">Edit!</a></p></div>
But pop up form isn't appearing. Where is the mistake?
Two things:
1) Remove the "hide" class from your modal html:
<div id="form-content" class="modal fade in" style="display: none;">
2) Target the actual modal with your jQuery instead of the modal-body:
$(document).ready(function () {
$("#form-content").modal('show');
});
This seems to work for me, as shown here. Let me know if this is not the effect you are looking for. Good luck!
modal-body is a class, but you're treating it like an id in the script.
You should change the class to an id, or amend the script.
Change this $("#modal-body").modal('show'); to $(".modal-body").modal('show');
I am trying to point my scripts to two different buttons in my html. The scripts both send an email of what the customer entered however both belong to two separate modal forms.
The first form is:
!-- Beginning of Pop-up Device Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-1"></div>
<div class="modal fade" id="modal-1" 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">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Device Testing</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Device and Meter Testing" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
The script that I have associated with this modal form is:
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').on('submit', function(event) {
event.preventDefault();
if( ! $("form")[0].checkValidity() ) {
return false;
}
// Disable the submit button
$('#contactSubmit').attr("disabled", "disabled");
$('#contactSpinner').css('display', 'inline-block');
$.ajax({
type : "POST", cache: false,
url : "#controllers.routes.Application.contactSend()",
data : {
contactName: $("#contactName").val(),
contactEmail: $("#contactEmail").val(),
contactMessage: encodeURIComponent( $("#contactMessage").val() ),
contactType: $("#contactType").val()
},
success : function(msg) {
// Check to see if the mail was successfully sent
if (msg == 'OK_SO_UPDATE') {
$("#messageSuccess").css("display", "block");
}
},
error : function(ob, errStr) {
$("#messageError").css("display", "block");
$("#messageError span.message").text(ob.responseText);
},
complete: function() {
$('#contactSubmit').removeAttr("disabled");
$('#contactSpinner').css('display', 'none');
}
});
return false;
});
});
</script>
This is referencing the scripts by giving the my form an id of "emailForm". However, if I wanted to add a second modal form such as:
<!-- Beginning of Pop-up Professional Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-2"></div>
<div class="modal fade" id="modal-2" 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">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Professional</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Professional" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
This references the same script since I gave this form the id of emailForm as well. However, for some reason the alerts that are suppose to appear for the second form are not showing up. Any idea what this could be? Will I need to create a unique script for each form?
Duplicate ID's violate the specifications and are problematic, but here's a way around that to temporarily repair this code.
$(event.target).find("#messageError").css("display", "block");
The FORM tag is also malformed. I moved it up to match the bottom form tag (to after the fourth DIV).
(There are many duplicate ID problems yet unresolved, but the above specifies to the program within the event listener which element to reveal.)
The solution is to use class and name attributes where appropriate.
JSFiddle: http://jsfiddle.net/BloodyKnuckles/s7D98/