I am making a Django application and using Twitter bootstrap carousel template for making a my site. I am planning to provide the sign up and sign in feature to the users through Twitter boostrap 3 modal.
and When I test modal simple with my external templates (not included in Django). My Modal runs well.
Here is my Modal code
<ul class="nav navbar-nav pull-right">
<!-- calling sign up modal -->
<li><a data-toggle="modal" href="#signup"><b>Sign Up</b></a></li>
<!-- calling sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
</ul>
Correct results
See image below
But when I run this modal from Django application templates. the modal loads but one grey transparent screen also loads over it and it makes the whole page disabled.
See image below
What would be the problem
I solved this issue by defining my modal code outside the ul tags, I put my modal code just after start of the body tag and it worked for me.
This is my code
<!-- Modal 1 -->
<!-- define the sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<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">TrackLeech Sign Up</h4>
</div>
<div class="modal-body">
<form class="navbar-form form-inline" align="left">
<input type="text" placeholder="username" class="form-control" style="width: 200px;">
<!-- Fb Login --> <div class="fb-login-button pull-right" data-width="400">Login with Facebook</div><!-- Add FB Button Here --> <br><br>
<input type="text" placeholder="email" class="form-control" style="width: 200px;"> <!-- Add Google Button Here --> <br><br>
<input type="password" placeholder="password" class="form-control" style="width: 200px;"> <!-- Add Twitter Button Here --><br><br>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button><br><br>
<a data-toggle="modal" data-dismiss="modal" href="#signin" >Already a member ? Sign In</a>
</form>
<div class="pull-right">
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button>
<a data-toggle="modal" href="#signin" >Already a member ? Sign In</a> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
This has resolved my issue now.
Related
I have Problem when trying to make Bootstrap Modals to show PDF Document using <embed src="./pdfFiles.pdf"></embed> Tag. I am using Bootstrap Version 4.5
When user click the button to trigger the modals, Bootstrap modals normally displays PDF document. But, The problem appear when user close the modals and show it again. instead of displaying PDF Document, modals displays blank document.
EDITED
My Code Shown below.
Bootstrap CDN
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<title>PDF Show</title>
Show the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">PDF Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.13/pdfFile.pdf"></embed>
</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>
I already contained the issue, The PDF Failed to display only when I use the IP address (or base_url() in Codeigniter) to fill pdf link in src="http://192.168.0.1/pdfFile.pdf"
No problem appear when I use http://localhost/pdfFile.pdf
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.1/pdfFile.pdf"></embed>
I need some help connecting a button which pops up a modal to submit form.
this is my html before the modal (works fine and another page is rendered after button is clicked)
<div class="container my-container">
<h3>
Let's get started
</h3>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data">
{%csrf_token%}
<input type="file" name="document"><br>
<button type="submit"> Submit</button>
</form>
</div>
</div>
I have added the modal but I now have a couple of issues
<div class="container my-container">
<div class="row my-row">
<h3>
Let's get started
</h3>
</div>
<div class="modal fade" id="demo123">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">
<span>
×
</span>
</button>
<div class="modal-header">
<h2 class="modal-title">
Confirm upload
</h2>
</div>
<div class="modal-body">
<p>this is the file name</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Confirm
</button>
</div>
</div>
</div>
</div>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns titled</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data">
{%csrf_token%}
<input type="file" name="document"><br>
<button class="btn btn-primary" data-toggle="modal" data-target="#demo123">
Submit
</button>
</form>
</div>
</div>
First issue I have is the "submit" button automatically makes the upload(renders to another page). How can I make so only if "confirm" button is the one which actually submits the form (if "x" then pop-up closes). Also how can I display the filename in the pop-up?
I use django with bootstrap 4
You have to use Javascript and since Bootstrap uses jQuery, you'll have to create that logic using Javascript and jQuery.
Handle the dialog confirm button click and only then trigger a form submit event.
Handle modal show event show.bs.modal and set the dialog filename element if there is a file selected and enable the confirm button; if there is no file selected, message the user about it using the same filename element and disable the confirm button so the user can't click it.
You can run the code snippet and test the whole functionality. On form submission we cancel the event and print a message in the console just for demonstration.
Please read inline comments
jQuery(function($) {
// Handle form submit.
// This won't be necessary unless you want some custom behavior.
// Here we just cancel the form submission and just display a message for demonstration
$('#uploadForm').on('submit', function(e) {
console.log('The form is submitting; preventing event for demonstration');
e.preventDefault();
});
// Handle dialog confirm button click.
$('#confirmUpload').on('click', function(e) {
// Submit the form and hide the dialog when confirm clicked
$('#demoModal123').modal('hide');
$('#uploadForm').submit();
});
// When the dialog is about to show, check if the user has selected a file.
// If they have, update dialog filename element and enabled the confirm button,
// else message user that there is no file and disable the confirm button
$('#demoModal123').on('show.bs.modal', function() {
let files = document.getElementById('documentFile').files;
let fileSelected = files && files[0];
if (fileSelected) {
$('#demoModal123 .filename').text(fileSelected.name);
$('#confirmUpload').prop('disabled', false);
} else {
$('#demoModal123 .filename').text('No file selected');
$('#confirmUpload').prop('disabled', true);
}
});
// Update file input group control label on file selection
$('#documentFile').on('change', function() {
$('#documentFileName').text(this.files[0].name);
});
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container my-container">
<h3>Let's get started</h3>
<div class="row my-row">
<h4>1. CSV file</h4>
</div>
<div class="row my-row">
<h4>2. There should be only two columns</h4>
</div>
<div class="row my-row">
<form method="post" enctype="multipart/form-data" id="uploadForm">
<!-- {%csrf_token%} -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="documentFile" id="documentFile">
<label class="custom-file-label" id="documentFileName" for="documentFile">Choose file</label>
</div>
</div>
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#demoModal123">Submit</button>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="demoModal123">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">Confirm upload</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="filename">this is the file name</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="confirmUpload">Confirm</button>
</div>
</div>
</div>
</div>
To be able to act Confirm button as only submission, you'll have to add type="submit" in Confirm button and type="button" in Submit button. Like this:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo123">
Submit
</button>
<button type="submit" class="btn btn-secondary" data-dismiss="modal">
Confirm
</button>
I created a modal in my form which has a bunch of images for the use to select. However i have no idea on how to select the image as in after I click on it , the modal would close and the image name be shown alongside the modal launch button. This is code I have for now:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click to launch Image Gallery...
</button>
<!-- 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
{% for image in images %}
<input type="image" src="{{ image.url }}" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;">
{% endfor %}
</div>
</div>
</div>
</div>
Add a class for image (just for identification and doing some trick)
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click to launch Image Gallery...
</button>
<div id='div_img_name'> </div>
<!-- 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<!-- images added for example purpose-->
<input type="image" src="https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;" class="img">
<input type="image" src="https://pennyandjohninoz.files.wordpress.com/2011/10/icons-of-australia-3-sydney-opera-house.jpg" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;" class="img">
</div>
</div>
</div>
</div>
JavaScript to add
$(".img").click(function(){
$("#div_img_name").text($(this).attr('src'));
$('#myModal').modal('hide') ;
})
I am having two Bootstrap modal. On returning back to previous modal from second modal it is not visible.Second modal has a file field. On changing the value of file field the second modal should hide and the first modal should be displayed. Can anyone help me out? Following is my try:
<html lang="en">
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal123" data-dismiss="modal">Open Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal123" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.123</p>
<form action="demo_form.asp">
Select a file: <input type="file" name="img" id="File">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$("#File").change(function(){
$("#myModal123").hide();
$("#myModal").show();
alert("Hello");
})
</script>
</body>
</html>
Thank you in advance.
Please replace your JQuery code to below
$("#File").change(function () {
$("#myModal123").modal("hide");
$("#myModal").modal("show");
})
HTML:
<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal" class="quickview">
OPEN MODAL
</a>
<!-- 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" id="myModalLabel">BX Slider</h4>
</div>
<div class="modal-body">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
slider.destroySlider();
//$('#myModal').modal('show');
slider.reloadSlider();
}
$(".quickview").on("click", quickView);
I have a Bootstrap modal which I'm injecting dynamic image galleries into. So fx. I have 10 links on a page, each link is containing unique data-attributes with image URLs. I am then sending these URLs into my click event, so I can use them with BXslider, but it doesn't seem to be working.
I'm reloading the BXslider within my click event, but the "mainimage" is not showing.
However, if I move the code out of the click event, it seems like it's working.
Any suggestions here?
Codepen:
http://codepen.io/marting/pen/dYNabj?editors=101
I changed your code to this, and it works like a charm
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
setTimeout(function() {
slider.reloadSlider();}, 200);
}
$(".quickview").on("click", quickView);
See it works here: http://codepen.io/anon/pen/JYgxOE?editors=101