I have a bootstrap modal with handlebar script-
<script id="data-template" type="x-handlebars-template">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Add Data</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" enctype="multipart/form-data" action="upload.php" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Message</label>
<div class="controls">
<textarea class="input-xlarge" id="input01" name="text" value="{{value}}"></textarea>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="submit" value="submit">
Save
</button>
<button name="cancel" value="cancel" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</script>
now on a button click I am opening the modal as well as onClick method is calling getDataWithId() method to fill data in the modal-
<b>+</b> Add
and this my getDataWithId() method.
function getDataWithId(id){
var newData;
var theTemplateScript = $("#data-template").html();
var theTemplate = Handlebars.compile (theTemplateScript);
$.get("http://localhost:8092/data_service.php?method=news&id="+id,
function(data, textStatus, jqXHR) {
newData= $.parseJSON(JSON.stringify(data.data.posts));
$(".modal").append (theTemplate(newData));
}).fail(function(jqXHR, textStatus, errorThrown) {
});
}
Data is not showing on the input field though modal is opening perfectly.
Related
I have this form in html:
<form action='#Url.Action("ExportExcel", "Banks")' method="post" target="_blank" id="myForm">
#Html.AntiForgeryToken()
<input type="hidden" name="typeDetails" id="typeDetails" value="typeDetails.value" />
<input type="hidden" name="filteredBanksIds" id="filteredBanksIds" value="" />
<input id="btnExportExcel" type="hidden" value="submit" data-toggle="modal" data-target="#ExportExcelModal" />
</form>
and the modal is:
<div class="modal fade" id="ExportExcelModal" tabindex="-1" role="dialog" aria-labelledby="ExportExcelModalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ExportExcelModalTitle">Banks</h5>
<button type="button" class="close" id="ExportExcelModalClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Would you like to export this banks with details?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-target="#myModal" value="1" onclick="exportExcel(this.value)">yes</button>
<button type="button" class="btn btn-primary" data-target="#myModal" value="0" onclick="exportExcel(this.value)">no</button>
</div>
</div>
</div>
</div>
and I have this in JS:
function exportExcel(typeDetails) {
$('#ExportExcelModalClose').click();
$('#filteredBanksIds').val(filteredBanks.map(function (bank) { return bank.Id }));
$('#typeDetails').val(typeDetails);
$("#myForm").submit;
return true;
}
I would like that in addition to what happens on the server side (Excel export and download),
also a message will be returned to the user after the Excel export ends, with custom message from the server.
How can I add this?
For example there are three inputed sample and when I try to delete the second inputed sample it won't be deleted instead the third one will be the one is deleted. Another error is that if there will be one inputed sample left and I try to delete it then code will be error.
Modal Code
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title text-center" id="myModalLabel">Delete Confirmation</h1>
</div>
<form class ="delete" action="{{ action('ReservationController#destroy', ['id' => $reservation->id])}}" method="post">
{{ method_field('DELETE')}}
{{ csrf_field() }}
<div class="modal-body">
<p class="text-center">Are you sure you want to delete?
</p>
<input type="hidden" name="reservation_id" id="resid" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">No, Close</button>
<button type="submit" class="btn btn-danger">Yes, Delete</button>
</div>
</form>
</div>
</div>
Script Code
<script>
$('#delete').on('show.bs.modal',function(event){
var button = $(event.relatedTarget)
var resid = button.data('deleteid')
var modal = $(this)
modal.find('.modal-body #resid').val(resid)
})
</script>
Button code
<button type="submit" class="btn btn-danger" data-deleteid="{{$reservation->id}}" data-toggle="modal" data-target="#delete" >Delete</button>
Controller
$reservation = PropertyReservation::findOrFail($id);
$reservation->delete();
return redirect('/reservations')->with('success','Successfully Deleted');
Try this
<script>
$(document).on('show.bs.modal','#delete',function(event){
var resid = $(this).find('button[type="submit"]').attr('data-deleteid')
var modal = $(this);
modal.find('.modal-body #resid').val(resid);
})
</script>
My goal is to display a fresh modal every time it is opened. Currently, that is only true when the modal window is first displayed after refreshing the page. For the subsequent closing/opening of the modal, it just appends the current content to the end of the previous content, which is still displayed.
It may be worth noting that with this particular configuration of the countless efforts tried, I get an
Uncaught ReferenceError: $ is not defined
in my Javascript console for the line
$(document).ready(function() {
but I'm not sure why. The jQuery library (3.2.1) is initialized for the script type it's being used with after all. Any clue?
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').append("$0 per month.");
}
else {
$('.modal-body').append(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" 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>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->
You should use .html or .text instead of .append
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" 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>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->
Try doing $('modal-body').empty() instead of clear
I want to make a form preview from form1 into another modal via jquery. I built the form in modal1 and trying to pass its data into modal2. But it's not working in the next modal.
Cannot pass the data from modal1 - formData is not defined
I need the modal2 to get data from submitted
HTML
<!-- Modal -->
<div class="modal fade" id="xModal" tabindex="-1" role="dialog" aria-labelledby="xModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="submit" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="xModalLabel"><em class="fa fa-spinner fa-spin"></em> form1</h4>
</div>
<div class="modal-body">
<form id="form1">
<input type="text" class="form-control" id="fname" value="hello" />
<input type="text" class="form-control" id="lname" value="kitty" />
<button type="submit" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">
preview
</button>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<!-- preview Modal -->
<div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel">
<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="prvwModalLabel"><em class="fa fa-spinner fa-spin"></em>prvw loading...</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
JQUERY
$('#xModal').modal('show');
$('#xModal').on('shown.bs.modal', function() {
$('#form1').on('submit', function(e) {
e.preventDefault();
console.log('xModal sumitted');
var formData = $(this).serialize();
$('#prvwModal').find('.modal-body').text(formData);
$('#prvwModal').find('.modal-title').text('#form1 Preview');
});
console.log('xModal loaded');
});
$('#prvwModal').on('shown.bs.modal', function() {
console.log('prvwModal loaded'+formData);
})
Jsfiddle : https://jsfiddle.net/yfpruygs/7/
Your inputs need a name field in order to get form data:
<input type="text" class="form-control" id="fname" name="fname" value="hello" />
<input type="text" class="form-control" id="lname" name="lname" value="kitty" />
You will also need to change the button type to "button" if you don't plan for the preview button to actually submit the form.
<button type="button" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">
Then you can use a click event...
$('#form1').on('click', function(e) {
console.log('xModal sumitted');
var formData = $(this).serialize();
$('#prvwModal').find('.modal-body').text(formData);
$('#prvwModal').find('.modal-title').text('#form1 Preview');
});
https://jsfiddle.net/yfpruygs/9/
I have a bootstrap button (I used bootstrap 4) that open a modal and transfer the data that in the button to the form in the modal by the function:
$('#exampleModal').on('show.bs.modal', function (event).
the button is in a div (parent).
when I click on the button the parent event called before the child.
I don't want the parent event to be run.
I need only the popup modal to open.
when I try to open the button by onclick its call first but the data is not transfer.
this is my code example: codepen
this is the html
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
this is the script
<script>
$(".parent").click(function(event){
alert("Parent event");
})
/*
if I add this function I cant transfer the data that in the button
$(".child").click(function(event){
alert("Child event");
event.stopPropagation();
$('#exampleModal').modal('show');
})*/
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
</script>
Quite simple in the parent click , check if target is different to the button with data-target='#exampleModal' or not , all that using the .is() jquery function like below :
//get reference to the button
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) { // be sur button was'nt clicked
alert("Parent event");
}
})
Updated Pen
See below working snippet :
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) {
alert("Parent event");
}
})
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
body {
background-color: #a3d5d3;
}
.col-12{ background:red; height:100px;}
.child{background:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>