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');
Related
I have used CKEditor django plugin in my form modal. But when i try to show ADD button below the CKEditor, the button doesn't appear in the UI at all.
As shown in the below image, I have currently kept the Add button on the top of the CKEditor text box as its not appearing when placed at the bottom.
Below is the HTML code snippet
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input type="text" class="form-control" name="dn" id="dnn" required="True" />
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
Can someone please suggest how to make the add button make it appear below ckeditor.
If you are using Bootstrap 4, You can use the Order feature if your elements are wrapped inside a flex container.
Your code should look similar to this:
<div class="row">
<div class="d-flex">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input
type="text"
class="form-control"
name="dn"
id="dnn"
required="True"
/>
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace("editor1");
</script>
</div>
<div class="modal-footer order-1">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
I have 2 buttons for which I want to call same modal but the text on the modal should be changed depending on which button was clicked. How do I do that please?
<div>
<a class="button" data-open="new-modal"
(click)="confirmModal(studentInfo)>Edit</a>
<a class="button" data-open="new-modal"
(click)="confirmModal(studentInfo.id)>Delete</a>
</div>
Modal
<div class="reveal" data-reveal id="new-modal">
<h5>Edit Student Info?</h5> // I want to add "Delete student info
here too"
<div class="secondary button-group">
<a class="button" href="#">Yes</a>
<a class="button" href="#">No</a>
</div>
</div>
pass a second parameter to your confirmModal() function, and store the content in a variable accessible by the modal within your ts or js code, and use this variable to load relevant configuration in your modal
I have done bootstrap modal in different page means modal in another page(modal.html) and button in different page(career.php) it's working but same modal i want to link for multiple buttons. How to do that i am not getting
<script>
$(document).ready(function(e){
$('#btnModal') .click(function(){
//using ajaz post
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx) //fill div tmpmodal with modal.html content..!!
//calling modal
$('#testModal').modal('show');
})
})
});
</script>
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
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").
Need to create food ordering system.
I'm quite stuck, where I would like to summarized the user's choice in modal form before storing in my database. It is said that modal is recommended inorder not to restart all over again using other page.
Its in wizard template where clicking NEXT $('.buttonNext').addClass('btn btn-success');, it works fine and the choices doesn't reset if I go back to the first step:
Here's what I've got so far.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
<div id="step-11"><fieldset>
<input type="radio" id="food1" name="burger" value="bigburger"/> BB
<input type="radio" id="food2" name="burger" value="reg_burger"/> RB </fieldset> </div>
<div id="step-22"> <fieldset>
<input type="radio" id="drink1" name="drink" value="coca-cola"/> CC
<input type="radio" id="drink2" name="drink" value="juice"/> J </fieldset> </div>
<div id="step-33"><input type="text" id="other_food" name="other"/> </div>
</form>
<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" />
<!-- pop out modal -->
<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Confirm Order</div>
<div class="modal-body">
<p> Your Burger: <span id="burger_type"></span> </p>
<p> Your Drinks: <span id="drink_type"></span> </p>
<p> Others: <span id="otherfood"> </span></p></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> Submit </div>
</div>
</div>
</div>
this is my JS, which in same file HTML:
<script type="text/javascript">
$('#review').click(function () {
$('#burger_type').html($('#burger').val());
$('#drink_type').html($('#drink').val());
$('#otherfood').html($('#other_food').val());
}); </script>
So only my "other_food" does displays what text you've input, others won't. I don't know how to check in radio mode.
Thank you in advance, I'm no expert in JS or javascript.
try $('#burger_type').html($('input[name="burger"]:checked').val());
basicly javascript doesn't read the value of radio buttons in a simple way.
what we're doing is getting all the inputs named burger and filtering (: pseudo class) only the one who is checked - i.e the selected option.
I have a code in java script for disabling a button until the checkbox is checked. It doesn't grey this out in bootstrap. It just shows the button.
https://jsfiddle.net/soljohnston777/wg00ymg8/
Bootstrap attempt to make this work:
Modal / Html:
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Terms and Conditions</h3>
</div>
<div class="modal-body">
<h4>Text in a modal <input type="checkbox" required="required" id="myCheck"></h4>
<p>You can add some text here.</p>
<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="check">Some Text Here</label>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="" class="btn" id="btncheck" value="I Agree" />
Close
</div>
</div>
Without the Modal classes:
http://www.bootply.com/nV8ShsZUH5
What am I doing wrong?
You want to use attributes instead of properties.
http://api.jquery.com/prop/
Instead of:
btn.prop("disabled", !this.checked);
You can directly access the disabled attribute from the checkbox object and modify it.
this.disabled = !this.checked;
In case anyone else has this issue, I had to upgrade to bootstrap 3, then this code worked great
http://www.bootply.com/AlUZOz0zXB