In index.html i have used this jQuery
$(document).ready(function(e){
$('#btnModal').click(function(){
$.post('Lab6.html',function(xx){
$('#tmpModal').html(xx)
$('#myModal').modal('show');
})
})
});
i've used ajax to call Modal to use it in various pages now date picker is not working in it
This is my Lab6.html
<style>
</style> <!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input id="datepicker" type="text" class="form-control" name="fname" placeholder="Select Date" required >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Date picker is not working here
used jquery script date picker function
Related
I am developing a Flask web app and I need to setup a scenario with bootstrap modals. I need to open a modal according to the radio button my user checked. My user will check a radio button then click 'OK' and I need a certain modal to pop. How can I handle this ? I used data-target for the moment.
My html code :
<div class="container">
<!-- Modal -->
<div class="modal fade" id="modalchoix" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Souhaitez-vous mettre à jour :</h4>
</div>
<div class="modal-body">
<input type="radio" id="referentiel" name="choixmaj" value="referentiel">
<label for="referentiel"> CHOIX A</label><br>
<input type="radio" id="transco" name="choixmaj" value="transco">
<label for="transco"> CHOIX B</label><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalrefmodeles">OK</button>
</div>
</div>
</div>
</div>
</div>
Thank you
With the code below you will be able to switch the modal according to the radio button value. This will be fully dynamic, even ids of modals are dynamic. Of course if you know Jquery well, you can do further stuff.
By default, I have removed the id from modal and set it dynamic with each click.
For now this code is working with radio button click. You can do it with another button as well.
In this situation the modal is only one, but you can set it different for each radio button value before appearing the modal. And you can set it according to your needs.
$('input[type=radio]').on('click', function() {
var val = $(this, ':checked').val();
$('div.modal.fade').attr('id', val);
$('#' + val).find('.modal-body').text(val);
$('#' + val).modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container">
<!-- Modal -->
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Souhaitez-vous mettre à jour :</h4>
</div>
<div class="modal-body">
Hello
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default">OK</button>
</div>
</div>
</div>
</div>
<input type="radio" id="referentiel" name="choixmaj" value="referentiel">
<label for="referentiel"> CHOIX A</label><br>
<input type="radio" id="transco" name="choixmaj" value="transco">
<label for="transco"> CHOIX B</label><br>
</div>
You can do it with Javascript.
Here I have two modals, with different id's.
The first modal id is yesModal and The second modal id is noModal.
Whenever you change your radio, JS is switch data-target from yesModal to noModal and visa versa.
document.querySelectorAll('input[name="radio"]').forEach(cur => {
cur.addEventListener('change', e => {
const value = document.querySelector('input[name="radio"]:checked').value;
if (value === 'yes') {
document.querySelector('#reactAccRadio').setAttribute('data-target', '#yesModal');
} else if (value === 'no') {
document.querySelector('#reactAccRadio').setAttribute('data-target', '#noModal');
}
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<form id="formSubmit" action="#" method="POST">
<div class="form-group">
<input type="radio" name="radio" value="yes" checked> Open Yes Modal
<input type="radio" name="radio" value="no"> Open No Modal
</div>
<button id="reactAccRadio" type="button" class="btn btn-primary" data-toggle="modal" data-target="#yesModal">Submit</button>
</form>
<!-- Modal -->
<div class="modal fade" id="yesModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">If yes</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="noModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">If no</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I made a bootstrap modal that will open when a button is clicked. A popup window will appear when the button is clicked. I want to shift the button to top right corner of the screen. I also want to change the colour of the button. How can I do so?
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#logIn">Log in</button>
<!-- Modal -->
<div class="modal fade" id="logIn" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title1">Log in</h4>
</div>
<div class="modal-body">
<form class="sing_in_form">
<input type="text" placeholder="Email">
<input type="text" placeholder="password">
<p class="message"> Forgot password?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Log in</button>
</div>
</div>
</div>
</div>
Add a class to the button and then target it in CSS.
See Codepen: https://codepen.io/manaskhandelwal1/pen/ZEGLvaz
HTML
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-lg btnStyle" data-toggle="modal" data-target="#logIn">Log in</button>
<!-- Modal -->
<div class="modal fade" id="logIn" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title1">Log in</h4>
</div>
<div class="modal-body">
<form class="sing_in_form">
<input type="text" placeholder="Email">
<input type="text" placeholder="password">
<p class="message"> Forgot password?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Log in</button>
</div>
</div>
</div>
CSS
button.btnStyle {
background-color: blue;
color: white;
position: absolute;
top: 10px;
right: 10px;
}
Hi everyone just want you guys to check out and see what is wrong with my form tag. What I'm trying to do here is to submit values from 2 main divs, I'm using bootstrap.
This one doesn't work:
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
But when I do this
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
EDITED
I'm using ENTER button as submit. so if I click on the edit span the MODAL div would show and I can enter a value on the textbox of that div. after clicking the add button I put on what I want to search on the txtSearch of the input-group then press enter. The second form structure works but I want the value from the text box in the MODAL div to be submitted to. Does this make sense?
Check this .. i think this will help you ..
$(document).on('click','#add-qty-btn',function(){
var qty = $('#addtoQuantity').val();
var txtsearch = $('#txtSearch').val();
alert('TextSearch is: ' + txtsearch + ' - Quantity: ' + qty);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br /><br />
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" name="addtoQuantity" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button id="add-qty-btn" type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
If you want the text box from modal to be included so put the end that of the form after the end of the modal div
Else if you want to remove it and you don't want to include it value so remove it on submit with this jquery function
$("form").submit(function() {
$(this).children('#your input id').remove();
});
With CSS give display none to the modal
Then with the button edit modal click event set the modal display to block
I would like to ask how I can stretch the width throughout the modal form.
Here is my code:
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and it shows like this:
input text problem
Is there any way that I could fix this problem.
I think it has something to do with the bootstrap library but I don't know where it is located.
You have to use bootstrap grid system.
#inpt {
width: 100%;
}
.modal-body {
height: 200px;}
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
button
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group col-xs-12">
<input id="inpt" type="text" class="form-control"/>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try this:
<form asp-controller="Employee" asp-action="Create" method="post" class="form-inline" role="form">
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Employee</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/KyleMit/0fscmf3L/
Credits: Kyle Mitofsky
I have a delete link , for that I am using bootstrap modal window . Here window appearing fine When I click yes button of window the record should be delete. So I have to call servlet in yes button along with a parameter Id here I am able to call servlet but parameter is not passing. How can I pass parameter to yes button of modal window. Here is code for it.
The bootstrap modal where I am calling,
<td>Edit
</td>
<td> Delete
</td>
in the same jsp page the markup of modal is,
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Delete Teacher Record</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
<a href="<%=request.getContextPath()%>/controller/TeacherManagementController?flowName=DELETE_TEACHER_INFO&teacherId=${teacherId.getTeacherId()}"
class="btn btn-primary">Yes</a>
</div>
</div>
</div>
</div>
The problem I am facing is the modal is appearing but record is not delete because of not able to pass the teacherId. Please any one help me in this.
I am using like this call function and assign value to hidden fields
Html:
<div id="add_button" >
<a data-toggle="modal" href="#myModal_new" onClick="pop_up('<?php echo $section_value['subject_name']; ?>','<?php echo $section_value['section_id']; ?>')">Add Subjects</a>
</div>
<script>
function pop_up(name,id){
var standard = document.getElementById("standard");
var standard_id = document.getElementById("standard_id");
var standard_id_new = document.getElementById("standard_id_new");
standard.value = name;
standard_id.value = id;
standard_id_new.value = id;
}
</script>
<div id="myModal_new" class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Create Sections</h3>
</div><br><br>
<div id="errorContainers">
<p>Please correct the errors and try again:</p>
<ul />
</div>
<div class="modal-body" style="margin-left: 17%;">
<!-- Modal Form Starts Here -->
<form name="modalForm" id="formss" method="post">
<input type="hidden" name="standard" id="standard">
<input type="hidden" name="standard_id" id="standard_id">
<input type="hidden" name="standard_id_new" id="standard_id_new">
<fieldset>
<div class="division_center"><div class="division_left"><label class="form-signin-signup" for="input1">Sections </label> </div>
<div class="division_right">
<input type="text" name="standard_new" id="standard_new"> </div></div>
</fieldset>
<!-- Modal Form Ends Here -->
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" >Close</a>
<input type="submit" name="newsubmit" class="btn btn-primary btn-large" value="Create">
</div>
</form>
</div>
</div>
</div>