I am grabbing data from a MySQL query and am now trying to display it in <input> fields in my modal by letting JS put it there , but for whatever reason I am unable to handover the variables into the modal. I frankly have no clue of Javascript, hence suspect an issue there.
PHP generated HTML button:
<td><button type=\"button\" class=\"btn btn-block btn-primary btn-xs\" data-toggle=\"modal\" data-target=\"#edit\" data-id=\"$id\" data-date=\"$date\">Edit</button></td>
Modal:
<!-- Modal -->
<div class="modal fade" id="edit" 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">Edit Details</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<?php
echo "
<td>ID No.: </td><input name=\"dataID\" value=\"\" /></td>
<td>Date: </td><input name=\"dataDate\" value=\"\" /></td>";
?>
</tr>
</table>
</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>
</div>
</div>
<!-- /.Modal -->
Javascript:
<script>
$('#edit').on('show.bs.modal', function(e) {
var dataID = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="dataID"]').val(dataID);
var dataDate = $(e.relatedTarget).data('date');
$(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
});
</script>
thanks a lot
Your javascript code works for me, please right click -> "view sourse" to make sure $id and $date are printed at:
data-id=\"$id\" data-date=\"$date\"
$('#edit').on('show.bs.modal', function(e) {
var dataID = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="dataID"]').val(dataID);
var dataDate = $(e.relatedTarget).data('date');
$(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#edit" data-id="abcabc" data-date="12-03-2014">Edit</button>
<!-- Modal -->
<div class="modal fade" id="edit" 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">Edit Details</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>ID No.: </td><input name="dataID" value="" /></td>
<td>Date: <input name="dataDate" value="" /></td>
</tr>
</table>
</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>
</div>
</div>
<!-- /.Modal -->
Related
I have the below modal and call to the modal:
<button type="button" class="btn btn-outline-primary" data-val="xxx "data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
What I am trying to do, is take the data-val element in the button and pass it into the URL of the modal (replace bxw8pq with whatever data-val is equal to)
I have used this JS to just try and pass the data to the modal & it doesn't work (doesn't do anything at all!)
<script>
$('#exampleModal').on('show.bs.modal', function(e) {
var vidid = $(e.relatedTarget).data('val');
$(this).find(".modal-body").text(vidid);
});
</script>
Do you know how I can make this JS work & also how I can pass the value to the specific part of the string in the modal?
Thanks!!!!
Demo added by community:
$('#exampleModal').on('show.bs.modal', function(e) {
var vidid = $(e.relatedTarget).data('val');
$(this).find(".modal-body").text(vidid);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha512-Dop/vW3iOtayerlYAqCgkVr2aTr2ErwwTYOvRFUpzl2VhCMJyjQF0Q9TjUXIo6JhuM/3i0vVEt2e/7QQmnHQqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button type="button" class="btn btn-outline-primary" data-val="Data value here!" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelDefault" aria-hidden="true">
<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>
<h5 class="modal-title" id="exampleModalLabelDefault">Modal title</h5>
</div>
<div class="modal-body">
<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><img src="https://via.placeholder.com/800"></div>
</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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I just copy/pasted the following code from Bootstrap while following a YouTube tutorial and it will not pop-up for me. All I did was copy/paste from the site (exactly as it is within the video) but I click the button and nothing happens.
I'd like for this code to pop-up the form for users to fill out.
Any idea what would be causing this issue?
<!-- Button trigger modal Source: https://getbootstrap.com/docs/4.0/components/modal/ -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</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>
Full Code:
{% load static %}
<html>
<head>
<title>Polling</title>
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</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>
<div class="container">
<div class="jumbotron">
<div class="card">
<div class="card-header">
Featured Item(s)
</div>
<div class="card-body">
<h1 style="font-family: Graphik Black; font-size: 20px">Apple iPhone XS (AT&T)</h1>
<p class="card-text">This is a description.</p>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-success badge-pill float-right" style="font-size: 12px; width:55px">+ New</button>
</div>
</div>
<br>
<table class="table table-hover">
<thead>
<tr style="font-family: Graphik Black; font-size: 14px">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
</tr>
</thead>
<tbody>
<tr style="font-family: Graphik; font-size: 12px">
<th scope="row" class="container">1</th>
<td>Mark</td>
<td>Otto</td>
<td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
</tr>
<tr style="font-family: Graphik; font-size: 12px">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
</tr>
<tr style="font-family: Graphik; font-size: 12px">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px">Remove</button></td>
</tr>
</tbody>
</table>
Go somewhere
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap modals work with JS. add the bootstrap.js file as stated in the documentation
<head>
[...]
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
Bootstrap-4 Modals make use of JQuery script.
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
That's why we use the below script.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
If you are using Bootstrap-4 the above ... has to be used in your HTML file.
Bootstrap-5: Bootstrap-5 has however stopped the use of JQuery. And only two scripts are overall required now:
WORKING Demo in Booststrap-5:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<title>Modal</title>
</head>
<body>
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch demo modal
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
I am working on the below code. Why am I unable to get closest paragraph .para text of each of buttons using $(event.relatedTarget)?
As you can see I am getting dummy index number for each event related buttons as well:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) ;
console.log(button.index());
console.log(button.parent().closest('.para').text());
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<div class="container"><p class="para">Winter</p></div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
First Launcegr
</button>
<div class="container"><p class="para">Summer</p></div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
Second Launcegr
</button>
<div class="container"><p class="para">Fall</p></div>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">
Third Launcegr
</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">
...
</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>
</div>
</div>
It's traversing the wrong part of the DOM. Try this:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
console.log(button.prev().find('.para').text());
});
I've been trying to implement a Bootstrap Modal for quite some time now. I've followed the instructions in the bootstrap documentation but I still can't get it right. Why doesn't this work jsfiddle
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
To run bootstrap you need to use jquery. Updated on below code and
jsfiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
I made four buttons with single bootstrap modal & a button in bootstrap modal to open pic according to click on four buttons.
Now single bootstrap modal is open on each button click & one button inside modal ("Open Document") I want to work on that like...
If anyone open modal through Open Modal2 then on click "open document" should be open pic as per modal 2
I'm unable to do this anyone can do it?
.buttons{ margin:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="buttons">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda2</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda3</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda4</button>
</div>
<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<button class="btn btn-success" onClick="window.open('https://i.stack.imgur.com/SdR1m.jpg','_self')">Open Document</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
enter image description here
Here is your Solution mate :
$(".modelButton").click(function(){
$(".modelDocButton").attr("href",$(this).data("href"));
});
.buttons{ margin:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="buttons">
<button type="button" class="btn btn-info btn-lg modelButton" data-toggle="modal" data-target="#myModal" data-href="https://i.stack.imgur.com/SdR1m.jpg">Open Modal</button>
<button type="button" class="btn btn-info btn-lg modelButton" data-toggle="modal" data-target="#myModal" data-href="https://i.imgur.com/3TWgv.jpg">Open Moda2</button>
</div>
<!-- Modal -->
<div id="myModal" 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">Modal 1</h4>
</div>
<div class="modal-body">
<a class="btn btn-success modelDocButton" href="#">Open Document</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal2" 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">Modal 2</h4>
</div>
<div class="modal-body">
<button class="btn btn-success" onClick="window.open('https://i.stack.imgur.com/SdR1m.jpg','_self')">Open Document</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end snippet -->