I have created a dynamic table and in that table I have a link which should trigger a popup modal.
And I have tried to pass the value to modal popup with "onclick", but the value still didn't show in the modal popup
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css">
<link href="../libraries/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="../libraries/css/jquery-ui.css">
<script src="../libraries/js/jquery-1.10.2.js"></script>
</head>
<?php
$sql="select * from tbl_company";
$query=mysql_query($sql);
while($row=mysql_fetch_assoc($query)){
$code=$row['code'];
$name=$row['name'];
?>
<span id="myBtn" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="getCompanyCode('<?php echo $code;?>','<?php echo $name;?>')"><img src="../images/edit.png" style="width:20px;"></span>
<?php
}
?>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">X</span>
<input id="company" name="company" type="text" value="" readonly></td>
<input id="codes" name="codes" type="text" value="">
</div>
</div>
<script>
function getCompanyCode(str,nm) {
alert(str,nm);
var val_name = nm;
var val_code = str;
document.getElementById("company").value = val_name;
document.getElementById("codes").value = val_code;
}
</script>
<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
To open a modal window, you should use data-toggle="modal" and href. If it's not <a>, you can use data-target instead:
data-toggle="modal" data-target="#exampleModal"
To pass a unique value to the modal, you need to use data-* attributes. This can be given to the modal handler like this:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fat">Open modal for #fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
The next thing is that, you need to handle the custom input. Once the modal window is shown, you need to execute some stuff. For that, you need to assign an event handler, once the modal window is shown:
// Execute something when the modal window is shown.
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});
The issues with your code:
Assigning multiple elements with same id is a crime. Do not reuse id as they are unique.
You need to assign the data-toggle to the <a> tag.
You should pass the attributes through data-* attributes.
Working Snippet
$(function () {
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var code = button.data('code'); // Extract info from data-* attributes
var company = button.data('company'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('#code').val(code);
modal.find('#company').val(company);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#myModal" class="btn btn-info btn-lg" data-toggle="modal" data-code="code" data-company="company name">
<img src="../images/edit.png" style="width:20px;">
</a>
<div class="modal fade bs-example-modal-sm" tabindex="-1" id="myModal">
<div class="modal-dialog modal-sm">
<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="mySmallModalLabel">Codes & Company</h4>
</div>
<div class="modal-body">
<input type="text" id="code" readonly />
<input type="text" id="company" readonly />
</div>
</div>
</div>
</div>
Please map your code with the above code. You don't need to change any other values. Just the way <span> is done.
Related
I'm kind of stuck at the moment. Would really appreciate if someone can help me with this.
First time asking a question, so please bear with me :)
I have a main page with a few buttons. Each button opens a bootstrap modal. I am able to load dynamic content into the modal. Also inserting external HTML works, but here's the catch.... The HTML content I insert also has some 'fancy' features like my main page has (ex. animated progress bar/skills) For the external HTML to work I need to reference the same script as my main page has, but if so, things on my main page gets broken.
My question is, is there any way that I can insert HTML into my modal and have the inserted HTML be able to use the existing functions on my main page?
var iModal = document.getElementById('iModal');
iModal.addEventListener('show.bs.modal', function handler() {
// Button that triggered the modal
var button = event.relatedTarget;
var modalTitleArg = button.getAttribute('data-bs-title');
var modalId = button.getAttribute('data-bs-id');
var modalTitle = iModal.querySelector('.modal-title');
var modalBody = iModal.querySelector('.modal-body');
modalTitle.textContent = modalTitleArg;
if (modalId == 1) {
$('.modal-body').load('Content1.html', function() {
$.getScript("js/functions.js") //get script, modal works, broken mainpage.
});
} else if (modalId == 2) {
$('.modal-body').load('Content2.html', function() {
//$.getScript("js/functions.js") //script reference in html, modal works broken mainpage
});
} else {
$('.modal-body').load('Content3.html', function() {
//$.getScript("js/functions.js") // no script at all, broken modal, mainpage works fine
});
}
this.removeEventListener('show.bs.modal', handler);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="1" data-bs-title="Title1">Click me 1</button>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="2" data-bs-title="Title2">Click me 2</button>
<button type="button" class="btn btn-outline-light mt-2" data-bs-toggle="modal" data-bs-target="#iModal" data-bs-id="3" data-bs-title="Title3">Click me 3</button>
<!-- modal -->
<div class="modal fade" id="iModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="myModalLabel">Title</h3>
<!-- data-bs-title -->
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="modal-body">
<!-- external html content -->
</div>
<div class="modal-footer">
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
</div>
</div>
</div>
<script src="js/functions.js"></script>
If in your "Content1.html", "Content2.html" etc. there is already an attached <script src="js/functions.js"></script> (as in a simple web page), then you can add content simply through an iframe tag (via the src attribute). Sample part of the code from your example:
...
<div class="modal-body">
<iframe class="modal-body-frame"></iframe>
</div>
...
<script>
...
const modalFrame = document.querySelector('.modal-body-frame');
if (modalId === 1) modalFrame.src = 'Content1.html';
...
</script>
...
But if you need to embed the script into the content every time, then you can use the srcdoc attribute of the iframe tag. Example below:
...
<div class="modal-body">
<iframe class="modal-body-frame" srcdoc=""></iframe>
</div>
...
<script>
...
const modalFrame = document.querySelector('.modal-body-frame');
if (modalId === 1) {
$.get('Content1.html', function(data) {
modalFrame.srcdoc = data.replace('</head>', '<script src="js/functions.js"></script></head>');
})
}
...
</script>
...
When using frame, it is important not to forget about Feature Policy and the ability to add permission via the allow attribute (Example: <iframe srcdoc="<p>Example test page</p>" allow="fullscreen"></iframe>).
Im using HTML and have this javascript modal for a custom popup in my site.
my only issue is that the modal works if you click on the button and on the background.
I want the modal to work only if the button is clicked.
(code will return error if you click on modal A or B option as the rest of the code is unrelated.)
I have tried adding modal buttons and main button the same ids + adding the data-backdrop="static" but its not what im looking for.
$(document).on('click','#select',function(){
$('#myModal').modal();
});
$(document).on('click','.option',function(){
var option_text = $(this).text();
$('#selected').text(option_text).val(option_text);
//alert(option_text);
document.getElementById("reason").value = option_text;
$( "#connection_form" ).submit();
$('#myModal').modal('hide');
});
<button class="button button" onclick="openNav()">button</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="select" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Connection Reason</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary option">B</button>
<button type="button" class="btn btn-primary option">A</button>
</div>
</div>
</div>
</div>
EDIT:
I used to have this code which didn't made an auto submit issue:
function myFunction() {
var txt;
var reason = prompt("Please enter case number:");
if (reason == null || reason == "") {
txt = "User cancelled the prompt.";
} else {
txt = reason ;
}
var txt = reason;
document.getElementById("myField").value = txt;
return txt
}
function myFunction(frm) {
var txt;
var reason = prompt("Please number:");
if (reason == null || reason == "") {
txt = "CANCEL";
} else {
txt = reason;
}
frm.reason.value = txt; // 1st option
return txt
}
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
<html>
<body>
<form target="_blank" method="get" action="connection" id="connection_form">
<button name="thing" value=button class="button button" onclick="myFunction(form);openNav()"> button </button>
<input type="hidden" name="reason" id="myField" value=""/>
</form>
</body>
</html>
When i first click the button it is auto-submitting with the new modal.
even if i tried #Arun K example with submit button. as i clicked the first button called button before modal pops up it is auto-submit.
Problem is your button is not working, because you given the event
on '#select' which is the id of 'div' not the button you are clicking
add a new id to your button element like below
<button class="button button" onclick="openNav()" id="newselect">button</button>
to work this button , add the click event like below
$(document).on('click','#newselect',function(){
$("#myModal").modal({
backdrop: 'static',
keyboard: false
});
});
For closing the model just change the button A/B like below
<button type="button" class="btn btn-primary option" data-dismiss="modal">Close</button>
then for submitting
<button type="button" class="btn btn-primary option" id="submission">Submit</button>
and in your code please change like below('.option' changed to '#submission')
$(document).on('click','#submission',function(){
var option_text = $(this).text();
$('#selected').text(option_text).val(option_text);
//alert(option_text);
document.getElementById("reason").value = option_text;
$( "#connection_form" ).submit();
$('#myModal').modal('hide');//if you dont want to hide remove this line
});
What solved my auto-submit issue was turning button from :
<button class="button button" id="newselect">button</button>
to:
<button class="button button" id="newselect" type="button">button</button>
Adding type="button"
I'm looking to invoke an ajax function after clicking an option from a bootstrap confirmation modal. the confirmation modal will be open through function remove(parameter)
Any help will be appreciated
function remove(parameter){
// $("#remove-modal").modal('show');
/*
if( modal clicked Yes){
..perform ajax call using 'parameter'
}
*/
}
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="remove-modal">
<div class="modal-dialog modal-sm">
<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">Do you want to remove this item?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="modal-btn-si">Yes</button>
<button type="button" class="btn btn-primary" id="modal-btn-no" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
You could just add an event listener for the yes button.
As the event varies every time the modal is shown you remove it before adding the new one.
remove(parameter) {
var yesButton = $("#modal-button-si");
yesButton.off("click");
yesButton.click(function(){
//perform ajax here
});
}
I would assume adding a click handler to the "Yes" button, after the modal is shown, should work. Something like:
function remove(parameter){
// show the dialog
var m = $("#remove-modal").modal('show');
// find the button in your modal, and attach an event
// handler to it's click event
m.on('shown.bs.modal', function(){
m.find('#modal-btn-si').on('click', function(e){
// do something here...
// When you're ready to dismiss the modal, call:
//
// m.modal('hide');
//
// Make sure this is in the callback for your
// AJAX event, unless you want the modal dismissed
// as soon as the button is clicked
});
});
}
I have read the Bootsrap documentation and even tested their "Varying modal content based on trigger button" example, but that doesn't work.
Any idea on how can I pass a data to a modal so that I will not create multiple modals in my page.
Here is the button that triggers the modal:
<a class="btn btn-danger" data-toggle="modal" data-target="#deleteSubject" data-whatever="<?= $subj_id ?>" role="button" title="Delete Subject"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
And here is the modal:
<div class="modal fade" id="deleteSubject" tabindex="-1" role="dialog" aria-labelledby="deleteSubjectLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="#" method="post">
<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="deleteSubjectLabel">Delete Subject</h4>
</div>
<div class="modal-body">
<h4>Do you want to delete this subject?</h4>
<input type="text" id="subjid" name="subjid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
And here is the javascript:
<script>
$('#deleteSubject').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var subjId = button.data('whatever')
var modal = $(this)
modal.find('.modal-body input').val(subjId)
})
</script>
I also tried the show.bs.modal but nothing happens. I tried to create a separate script to test if the $subj_id is being read through the use of alert but it works.
Any ideas?
you need to wrap the code in a document ready and since your input is named and has an id - target it directly and then you wont need the find either:
<script>
$(document).ready(function(){
$('#deleteSubject').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var subjId = button.data('whatever');
$('#subjid').val(subjId);
})
})
</script>
I think you forgot the $ on your modal instance , it should be $modal
<script>
$('#deleteSubject').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var subjId = button.data('whatever')
var $modal = $(this)
$modal.find('.modal-body input').val(subjId)
})
</script>
Simply set the value of input subjid using JavaScript / jQuery during the on click event.
$('#subjid').val(*value*);
My problem is when clicking OK in the modal window, which goes to javascript function in the modal will reload or clear the parent fields ?
Here is the use case:
1. enter name string into parent name form input
2. click on Test Modal Button
3. a modal window appears
4. click on the modal window "OK" button. (with the cancel button its not a problem)
5. parent name input was cleared. Possibly the parent was reloaded.
I'ved created a simple rails project with a generated scaffold Post name:string. Nothing special but I just enabled bootstrap js and css.
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/javascripts/application.js
https://github.com/axilaris/bootstrapmodal/blob/master/app/assets/stylesheets/application.css
And then, I inserted this code into _form.html.erb, you can view it here:
https://github.com/axilaris/bootstrapmodal/blob/master/app/views/posts/_form.html.erb
<div id="windowCreateInvoiceProductDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
×
<h3>Please enter a new product</h3>
</div>
<div class="modal-body">
<div class="divDialogElements">
Code:<input class="xlarge" id="xlInput" name="modal_code" type="text" />
<br>
Name:<input class="xlarge" id="xlInput" name="modal_name" type="text" />
<br>
Description:<input class="xlarge" id="xlInput" name="modal_desc" type="text" />
<br>
Price:<input class="xlarge" id="xlInput" name="modal_price" type="text" />
</div>
</div>
<div class="modal-footer">
Cancel
OK
</div>
</div>
<div class="divButtons">
<a data-toggle="modal" href="#windowCreateInvoiceProductDialog" class="btn btn-primary btn-large">Test Modal Button</a>
</div>
<script>
$(document).ready(function() {
$('#windowCreateInvoiceProductDialog').bind('show', function () {
// document.getElementById ("xlInput").value = document.title;
});
});
function okClicked () {
$('#windowCreateInvoiceProductDialog').modal('hide');
// document.title = document.getElementById ("xlInput").value;
// closeDialog ();
};
</script>
found the answer!
instead of this
<a href="#" class="btn btn-primary" >OK</a>
replace with this
<button type="button" class="btn btn-primary" onclick="okClicked ();">Save changes</button>
and thats all to it, and its flexible, i could hide, not hide and do something.