I am using modal concept of bootstrap in my html file. In modal i am entering data after clicking on save this data should be displayed in html page where modal is called. By using which function i can include or display this data in html page.
Here's a working Plunker for your reference
The basic idea is that you can pass an object from a modal back to the controller which opens the modal with close() as follows
$uibModalInstance.close($ctrl.modal);
Then in the parent controller, you can obtain the object as follows
modalInstance.result.then(function(modal) {
$ctrl.modal = modal;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
I assume bootstrap "modal" style class used in the code to show popup from parent page. Here, JavaScript /jquery would help to update the content from modal div to other div in the same page.
Ex: https://jsfiddle.net/AMVijay/f46qLn8L/1/
HTML Content with Bootstrap and JQuery:
<form>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputName" placeholder="Name" disabled>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
</div>
</div>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<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="gridSystemModalLabel">Modal Title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="modalSaveButton" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Java Script:
$(document).ready(function() {
$("#modalSaveButton").click(function() {
var fullName = $("#inputFirstName").val() + " " + $("#inputLastName").val();
console.log("Full Name :: " + fullName);
$("#inputName").val(fullName);
$('#myModal').modal('toggle');
});
});
Related
I'm using this code to implement copy into clipboard functionality:
function copyToClipboard(e, btn) {
e.preventDefault(); // prevent submit
var str = document.getElementById("forms-subscribe-email");
str.select();
document.execCommand('copy');
btn.innerHTML = "Copied!";
return false; // prevent submit
}
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required" />
</div>
<div class="input-group-btn">
<button class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
This code works fine but when I open the dialog second time I see the text button Copied. How I can reset the label of the button each time when I open the dialog?
Add this Code On model Show, Need to Reset Text to Orignal
<div class="modal fade" id="bitcoinModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="container">
<div class="offset-top-20 text-md-left">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Copy address</h3>
</div>
<div class="section-60 offset-top-35">
<div class="offset-top-20 text-md-center">
<form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
<div class="form-group form-group-outside">
<div class="input-group">
<label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="#Required" />
</div>
<div class="input-group-btn">
<button id="copyBtn" class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Reset Before Open
document.getElementById("copyBtn").innerHTML = "Copy!";
Reset Before Hiding
$("#bitcoinModal").on("hidden.bs.modal", function (e) {
document.getElementById("copyBtn").innerHTML = "Copy!";
})
Hope it Helps for Your need.
You could attach the "reseting" of the text to the closing or hidding event on the modal.
First, modify your button with an id:
<button id="btnCopyToClip" class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
Then, in your JS, add the event listener for hidden.bs.modal on the modal:
$("#bitcoinModal").on("hidden.bs.modal", function (e) {
let btnCopyToClip = document.getElementById("btnCopyToClip");
btnCopyToClip.innerText = "Copy";
});
Here is code :
https://jsfiddle.net/aviboy2006/3k7z2c64/1/
Add code in js :
function openModal(){
$("#bitcoinModal").modal();
$('.btn-width-165').html("Copy");
}
Add your open modal code :
<button type="button" class="btn btn-info btn-lg" onClick="openModal()">Open Modal</button>
I have created dynamic button in php. i need to to open new form in same homepage on that dyanamic button click event and when i am clicking on button it refresh the page. how to solve this problem
here is my code that i have tried
<?php
function dash() {
include 'config.php';
$sql = "SELECT roomno FROM roombook";
if($result = mysqli_query($db, $sql)){
$str = '';
while($row = mysqli_fetch_array($result)){
// generate array from comma delimited list
$rooms = explode(',', $row['roomno']);
//create the dynamic button and set the value
foreach ( $rooms as $k=>$v ){
$str .= '<input type="submit" class="Click" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';
}
//return $str;
}
return $str;
}else {
echo "ERROR: Could not able to execute $sql. " . mysqli_error($db);
}
mysqli_close($db);
}
?>
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>room boking</title>
<link href="css/bootstrap1.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/front.css">
</head>
<body>
<form mathod="post" action="">
<div class =" row box col-md-4" >
<div style="color:black"><?php echo dash();?></div>
</div>
<script>
function showDiv() {
document.getElementById('link').style.display = "block";
}
</script>
</form>
You can you bootstrap form so it will look effective
http://jsfiddle.net/KyleMit/0fscmf3L/
Try this one
It has html and css both code so you just need to integrate it and you can open you form on same page and in popup
HTML code
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
Launch Horizontal Form
</button>
<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label"
for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control"
id="inputEmail3" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"
for="inputPassword3" >Password</label>
<div class="col-sm-10">
<input type="password" class="form-control"
id="inputPassword3" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<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>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
Launch Normal Form
</button>
<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control"
id="exampleInputEmail1" placeholder="Enter email"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- Modal Footer -->
<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>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO Question:
<a href='http://stackoverflow.com/q/26562900/1366033'>
Twitter Bootstap - form in Modal fomatting
</a><br/>
Fork This Skeleton Here:
<a href='http://jsfiddle.net/KyleMit/kcpma/'>
Bootstrap 3 Skeleton
</a><br/>
</div>
css code
<!-- 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">
Hope this might help you
Use input type button instead of submit
$str .= '<input type="button" class="Click" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';
I want a newsletter modal to popup as soon as the page is loaded but I'm having some trouble getting my modal to load when my screen loads. Can someone help me?
<!-- Introduction Modal -->
<div id="myModal" class="modal fade">
<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">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal Popup -->
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
your code working fine, you can try to check your jquery link and bootstrap link
$(function() {
$("#myModal").modal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myModal" class="modal fade">
<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">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
I’m using BootStrap
I open a modal(the modal is inside a file).
<div id="buy-function" class="modal fade" role="dialog">
<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="gridSystemModalLabel">Achat </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form class="operation" role="form" method="post" >
<div class="form-group">
<label for="quantite" class="col-sm-3 control-label">Quantitée : </label>
<div class="col-sm-9">
<input type="number" class="form-control" id="buy_live_quantite" name="quantite" value="10" >
</div>
</div>
<div class="form-group">
<label for="justif" class="col-sm-3 control-label">Justification : </label>
<div class="col-sm-9">
<textarea rows="3" class="form-control" id="justif" name="justif"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<!--<div class="modal-footer"></div>
<div id="live_invoice"></div>-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" id="new_operation" class="btn btn-info">Acheter</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I open a modal with a button.
<div class="box-body">
<button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#buy-function">Acheter</button>
<button type="button" class="btn btn-block btn-warning btn-lg" data-toggle="modal" data-target="#sell-function">Vendre</button>
</div>
However, when I want to close this modal
(I use
$('#buy-function').modal('hide'); ),
my script :
<script>
$(document).ready(function () {
$("button#new_operation").click(function(){
$.ajax({
type: "POST",
url: "/views/composants/new_operation.php", //process
data: $('form.operation').serialize(),
success: function(msg){
//alert(msg);
$('#buy-function').modal('hide'); //hide popup
},
error: function(){
alert("failure");
}
});
});
});
</script>
it doesn’t work. Any idea ?
Check that you are not including jQuery more than once. Bootstrap will apply it to the first instance only and when jQuery gets initiated again then it will be lost.
So in bootstrap you cannot have a modal within a modal. I completely understand this. I have a modal that pops up from a button. I need a delete button inside that modal, that deletes the modal button. Any help? Any ideas? Thank you.
Here is a simple modal fiddle if needed: JSFiddle
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" />Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<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>
Try adding an id to the modal you want to remove and the delete button.
In this example I used jquery to remove the button.
$('#delete-button').click(function() {
$('#delete_this').remove();
});
Updated jsfiddle