I made a global modal with this
<div id="GlobalModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<style>
#GlobalModal .modal-body .body-content {
margin:0;
width: 100%;
}
</style>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background:#337ab7;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:white">Not set...</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
and this is my button for calling the modal
<button id="new-communication" type="button" class="btn btn-info btn-sm">NEW <i class="glyphicon glyphicon-plus"></i></button>
and this is the content
<div class="hidden">
<div id="mc-communication">
<form id="loginForm" class="form-horizontal" role="form" method="POST" action="" >
<div class="form-group">
<label class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<select class="form-control selectpicker show-tick" name="SingleSelectFieldType">
<option></option>
<option>Mobile - Private</option>
<option>Mobile - Office</option>
<option>Others</option>
</select>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Value</label>
<div class="col-sm-10 col-md-10">
<input class="form-control" type="tel" id="input-mobile-number" placeholder="" name="MobileNumberFieldType">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div class="[ form-group ]">
<input type="checkbox" checked />
<span></span><span> </span></label>
<label>Primary</label>
</div>
</div>
</div>
</form>
</div>
</div>
and this is my jQuery of calling the content to get into the modal
class.modal.js
var Modal = {
Me: $('#GlobalModal'),
Title: 'Undefined Title',
Width: { xs: '25%', sm: '40%', md: '55%', lg: '70%', xl: '85%', full: '95%' },
Show: function (params) {
this.Me.find('.modal-body').empty();
this.Me.find('.modal-title').text((this.Title == null) ? this.Title : params.Title);
if(params.Content.substr(0, 1) == '#') { //To Check if content may come from a view or a div
this.Me.find('.modal-body').append($(params.Content).clone());
} else {
this.Me.find('.modal-body').load(params.URI);
}
this.Me.find('.modal-dialog').css('width', this.Width[params.Width]);
this.Me.modal('show');
}
}
and the script to call in my view
$(document).ready(function(){
$('#new-communication').on('click', function(){
Modal.Show({
Title: 'Communication',
Content: '#mc-communication',
Width: 'sm'
});
});
});
The thing is I can see the contents inside my select, but I can't select it and I also got a checkbox there and I can't check it. I tried making a new modal that is not global, but just for the communication, and it worked, I don't know what's wrong with my code.
You will have to reinitialize the selectpicker after appending the html
if(params.Content.substr(0, 1) == '#') { //To Check if content may come from a view or a div
this.Me.find('.modal-body').append($(params.Content).clone());
// This will reinitialize selectpicker. You may need to revalidate this logic since you are appending data and not replacing.
$('.selectpicker').selectpicker();
} else {
this.Me.find('.modal-body').load(params.URI, function() {
// Initialize the selectpicker after loading the data
$('.selectpicker').selectpicker();
});
}
The reason y this is happening is, the html data is dynamic and selectpicker is not initialized in newly added html elements
Related
I'm trying to make a "Create project" modal. At first i created it inside a partial view but i found it difficult to populate it with data from other models, so instead i decided to move the partial view content inside my actual razor page.
All works as it should but when I press the button to launch the modal, the current page is loaded in the background as well.
Here is the html for the modal code:
<div class="modal fade" id="add-project" tabindex="-1" role="dialog" aria-labelledby="addProjectLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addContactLabel">Create Project</h5>
</div>
<div class="modal-body">
<form asp-page-handler="ProjectModalPartial">
#*numele metodei*#
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()" />
<div class="form-group">
<label asp-for="ProjectsModel.ProjectName">Title</label>
<input asp-for="ProjectsModel.ProjectName" class="form-control" placeholder="MyProject1" />
<span asp-validation-for="ProjectsModel.ProjectName" class="text-danger"></span>
</div>
<br />
<div class="form-group">
<label asp-for="ProjectsModel.ProjectDescription">Description</label>
<textarea asp-for="ProjectsModel.ProjectDescription" class="form-control" rows="3" placeholder="This is my first project"></textarea>
<span asp-validation-for="ProjectsModel.ProjectDescription" class="text-danger"></span>
</div>
<br />
<div class="center" style="padding-bottom:0px;">
<p style=" margin: 2px">Project Participants</p>
<select multiple id="TicketType" class="form-control dropdown-toggle" asp-for="ProjectsModel.ProjectParticipants" asp-items="new SelectList(Model.UserList)" style="width: 470px;"></select>
</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" data-save="modal">Save</button>
</div>
</div>
</div>
And here is the jquery code,without the logic for saving:
$(function () {
var placeholderElement = $('#modal-placeholder');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
//$(document.body).html(data).find('.modal').modal('show');
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});});
Is there another way of loading the modal, without the additional content?
Here is a photo so you better see what's happening
I managed to solve the problem.
Since I no longer have a partial view I don't need the placeholderElement anymore, so I can get rid of .find(modal) all together.
The code now looks like this:
$(function() {
var placeholderElement = $('#modal-placeholder');
$('button[data-toggle="ajax-modal"]').click(function(event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
$('#add-project').modal('show');
});
});
});
I got problem.
Every time when I click on button Close I get error in console : Appointment:103 Uncaught ReferenceError: onCloseModal is not defined
at HTMLButtonElement.onclick
What I doing wrong? I tried to add Id="Closebtn" and add script like this :
<script>
$(document).ready(function(){
// Open modal on page load
$("#appointmentInput").modal('show');
// Close modal on button click
$("#Closebtn").click(function(){
$("#appointmentInput").modal('hide');
});
});
</script>
Tried to add ";" after onclick methods.
Modal code :
<div class="modal fade" role="dialog" id="appointmentInput" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<form id="appointmentForm" autocomplete="off" novalidate="novalidate">
<div class="modal-header">
<h4 class="modal-title">Add/Edit Appointment</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title">Title</label>
<input type="text" maxlength="100" class="form-control" id="title" />
</div>
<div class="form-group">
<label for="description">Descriptions</label>
<textarea type="text" class="form-control" id="title"></textarea>
</div>
<div class="form-group">
<label for="title">Select Patient</label>
<select id="patientId" asp-items="#(new SelectList(ViewBag.PatientList, "Id","Name"))" class="form-control"></select>
</div>
<div class="form-group">
<label for="title">Duration</label>
<select id="duration" asp-items="ViewBag.Duration" class="form-control"></select>
</div>
<input type="hidden" id="id" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="onCloseModal()">Close</button>
<button type="button" id="btnSubmit" class="btn btn-success" onclick="onSubmitForm();">Submit</button>
</div>
</form>
</div>
</div>
</div>`
And JS code :
$(document).ready(function () {
InitializeCalendar();
});
function InitializeCalendar() {
try {
$('#calendar').fullCalendar({
timezone: false,
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
editable: false,
select: function (event) {
onShowModal(event, null);
}
});
}
catch (e) {
alert(e);
}
}
function onShowModal(obj, isEventDetail) {
$("#appointmentInuput").modal("show");
}
function onCloseModal() {
$("#appointmentInuput").modal("hide");
}
Your functions for onShowModal and onCloseModal both reference an element with the ID of #appointmentInuput but your modal uses an ID of #appointmentInput
Correcting this typo allows the modal to open (and close) as expected. I would also note that Bootstrap's built-in close action for the Modal component is also fully functional:
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
The data-dismiss="modal" being the attribute that would trigger the modal closing. In Bootstrap 5.x this would be data-bs-dismiss="modal"
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?
A Full calendar Script in one of my project in which i added a Bootstrap modal. I am making it to popup on submit of a Button in my page.But the elements inside the modal are not visible clearly. where am i making the mistake?.
I do have a datepicker in my code, but it is also not displayed with proper 'prev','next' buttons. I have added a sample pic too.Kindly help me..
The following is my code:-
<div class="modal fade in" id="modal_calendar" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<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">Add Event </h4>
</div>
<div class="modal-body">
<form id="event_frm" class="form-horizontal">
<div class="form-group">
<div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventsubject">calendar_eventsubject</label><div class="col-sm-8"><input type="text" name="calendar_eventsubject" value="" id="calendar_eventsubject" placeholder="calendar_eventsubject" data-validation-required-message="Enter the calendar_eventsubject" class="form-control" required="">
</div></div> </div>
<div class="form-group">
<div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventbody">calendar_eventbody</label><div class="col-sm-8"><textarea name="calendar_eventbody" cols="40" rows="3" id="calendar_eventbody" placeholder="calendar_eventbody" data-validation-required-message="Enter the calendar_eventbody" class="form-control" required=""></textarea>
</div></div>
</div>
<div class="row">
<div class="form-group "><label class="control-label col-sm-3 " for="lbl_disp_code">common_date</label><div class="col-sm-8"><input type="text" name="lbl_disp_code" value="" id="lbl_disp_code" placeholder="common_date" data-validation-required-message="Enter the common_date" class="mts_date form-control" data-format="DD-MM-YYYY" data-single-date-picker="true" data-show-dropdowns="true" required="">
</div></div> <div class="control-label col-sm-3">
<label for="start_date">Start Date</label>
</div>
<div class="col-sm-7">
<input type="text" class="form-control hasDatepicker" id="event_start_date" placeholder="Start Date">
</div>
</div>
</form>
</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_event">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
customButtons: {
EventButton: {
text:'Add Event',
click:function(event, jsEvent, view){
$('#modal_calendar').modal('show');
}
}
},
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
});
$('#event_start_date').datepicker();
$('#save_event').click(function() {
var subject =$('#calendar_eventsubject').val();
var body =$('#calendar_eventbody').val();
var start_date = $('#event_start_date').val();
if($('#calendar_event_subject').val() =='') {
alert('subject required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
if($('#calendar_event_body').val() == '') {
alert('Body required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
if($('#event_start_date').val() == '') {
alert('Start Date required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
$.ajax({
cache: false,
type: "POST",
url:"calendar/save_event",
data : {'subject' : subject,'body' : body,'start_date' : start_date},
dataType: 'json',
success: function(result){
if (result!=null){
}
}
});
});
});
</script>
<style>
.datepicker
{
z-index:1151 !important;}
</style>
From this my output is like this:-
I've a Bootstrap modal for changing a user's password. The problem, however, is that no matter what I try I cannot get the event to fire, be it via onclick or by attaching the button to an event using .on. It simply will not recognise it.
I've tried putting the <script> tags above the modal, below the modal, and even inside the modal, only to always have onclick return Uncaught ReferenceError: updatePassword is not defined. I then removed the onclick, assigned an ID to the submit button, and tried $('#update-password').on('click', function() { ... }); but this wasn't recognised at all.
The culprit in all of this is almost definitely the Bootstrap modal, and I'm guessing it's got something to do with how the browser handles it upon page load.
--
Modal
<!-- Modal -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="changePassModalLabel" 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>
<h4 class="modal-title" id="changePassModalLabel">Change Password</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="alert alert-password" style="display: none;">
<p></p>
</div>
</div>
<form role="form" action="#" method="post">
<div class="form-group">
<label for="password-current">Current Password<span>*</span></label>
<input type="password" class="form-control" id="password-current" name="pass-curr" placeholder="Current password...">
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="password-new">New Password<span>*</span></label>
<input type="password" class="form-control" id="password-new" name="pass-new" placeholder="New password...">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password-new-conf">Confirm New Password<span>*</span></label>
<input type="password" class="form-control" id="password-new-conf" name="pass-new-c" placeholder="Confirm new password...">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="updatePassword()">Update Password</button>
</div>
</div>
</div>
</div>
Script
<script>
function updatePassword(){
console.log('foo');
/*$.ajax({
url: url+"ajax/update_password",
data: {pass-curr : pass-curr, pass-new : pass-new, pass-new-c : pass-new-c},
async: false,
success: function(data) {
},
error: function(data) {
$('#alert-password').removeClass('alert-success').addClass('alert-danger').html('<p><strong>Sorry, an error occurred!</strong></p><p>'+data.additional+'</p>').slideDown(200, function() {
$('#alert-password').delay(4000).slideUp(200);
});
}
})*/
};
</script>
My apologies if this has been asked before. The only questions I could seem to find were those asking how to launch a modal through onclick.
The problem is that your event is not getting binded with button
Please find the JSFIDDLE here
In your HTML - do the following in the script tag
<head>
<script>
function updatePassword(){
console.log('updatePassword');
}
$(document).ready(function(){
// $('.btn-primary').on('click',function(){ - This too works
// console.log('foo');
//});
$('.btn-primary').on('click',updatePassword);
});
</script>
</head>