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?
Related
I try to send an html input text value to a controller. I can't use a form post because my modal dialog is already in a form.
Here's the code :
#foreach (var annonce in Model.AnnoncesRecherchees)
{
<!-- Modal -->
<div class="modal fade" id="#("AjouterVisiteVirtuelleModal" + #annonce.Reference)" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Ajouter visite virtuelle annonce #annonce.Reference</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
<input id="visitevirtuelle" class="form-control" autocomplete="" aria-required="false" />
<label class="form-label"></label>
<span asp-validation-for="Ville" class="text-danger"></span>
</div>
</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">Understood</button>*#
<a class="btn btn-primary" asp-controller="Acheteur" asp-action="AjouterVisiteVirtuelle" asp-route-annonceId="#annonce.ID" asp-route-visiteVirtuelle="document.getElementById("visitevirtuelle").value">Ajouter une visite virtuelle</a>
</div>
</div>
</div>
</div>
I want the parameter "asp-route-visiteVirtuelle" to have the value of the input text "visite virtuelle".
But it doesn't work
PLease help me.
Tag helper in anchor link render the url in href when the page load, so you cannot use js to add the value to asp-route-visiteVirtuelle.
Here is a whole working demo:
#foreach (var annonce in Model.AnnoncesRecherchees)
{
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="##("AjouterVisiteVirtuelleModal" + #annonce.Reference)">
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="#("AjouterVisiteVirtuelleModal" + #annonce.Reference)" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Ajouter visite virtuelle annonce #annonce.Reference</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
//add event here......................
<input onchange="ChangeUrl(this)" id="visitevirtuelle" class="form-control" autocomplete="" aria-required="false" />
<label class="form-label"></label>
<span asp-validation-for="Ville" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a class="btn btn-primary" asp-controller="Acheteur" asp-action="AjouterVisiteVirtuelle" asp-route-annonceId="#annonce.ID" >Ajouter une visite virtuelle</a>
</div>
</div>
</div>
</div>
}
#section Scripts
{
<script>
function ChangeUrl(event)
{
var visiteVirtuelleVal = $(event).val();
var anchor = $(event).closest('.modal-body').siblings('.modal-footer').find('a').attr('href');
$(event).closest('.modal-body').siblings('.modal-footer').find('a').attr('href',anchor+"&visiteVirtuelle="+visiteVirtuelleVal);
}
</script>
}
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/
How can I use a dynamically generated Bootstrap-Modal multiple times with a default state?
My problem is: When I click on the button to open the modal, you can see the default values 1 und 2. Now I enter '3' in the upper input field, close the modal with "Save changes" or "Close" and press the button again. Now, there should be 1 and 2 in the input fields but it's still 3 and 2.
I tried to fix it in jquery (as you can see in the code), but it did not work:
$('#openModal1').on('click', function(){
let x = `
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-dialogLabel">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">
<!-- actual form markup -->
<div class="form-group">
<label for="field1">Example label</label>
<input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input">
</div>
<div class="form-group">
<label for="field2">Another label</label>
<input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input">
</div>
<!-- /actual form markup -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
`;
$("#modal-area").append(x);
$('#modal-form').modal({});
});
$('#modal-form').on('hidden.bs.modal', function (event) {
$("#modal-area").empty();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div id="modal-area"></div>
<button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form">
Open modal form
</button>
How can I solve this problem?
You need to use html() not append() see below
$('#openModal1').on('click', function(){
let x = `
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-dialogLabel">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">
<!-- actual form markup -->
<div class="form-group">
<label for="field1">Example label</label>
<input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input">
</div>
<div class="form-group">
<label for="field2">Another label</label>
<input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input">
</div>
<!-- /actual form markup -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
`;
$("#modal-area").html(x);
$('#modal-form').modal({});
});
$('#modal-form').on('hidden.bs.modal', function (event) {
$("#modal-area").empty();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div id="modal-area"></div>
<button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form">
Open modal form
</button>
I tried to create a form in a model window. But the form action doesn't work. This is my code so far.
HTML Code
<form action="functions/userManagement.php?id="<?php echo $id ?> name='searchdata' id="comment_box" method="get">
<div style="display: none;" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 id="myModalLabel" class="modal-title">Put the Reason for Deactivate</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="70" name="comment" form="usrform"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button onclick="form_submit()" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
</div>
</div>
</div>
</div>
</form>
Java Script code
<script type="text/javascript">
function form_submit() {
document.getElementById("comment_box").submit();
}
</script>
Can anyone help me to fix this.
1st : Your action attribute Get parameter value should be inside the double quotes .
action="functions/userManagement.php?id="<?php echo $id ?>
To
action="functions/userManagement.php?id=<?php echo $id ?>"
2nd : Simple change button type to submit
<button type="submit" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
3rd : Your form should be inside the modal .
<div style="display: none;" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<form action="functions/userManagement.php?id="<?php echo $id ?> name='searchdata' id="comment_box" method="get">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 id="myModalLabel" class="modal-title">Put the Reason for Deactivate</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="70" name="comment" form="usrform"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button onclick="form_submit()" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
</div>
</form>
</div>
</div>
</div>
Note : simple your submiting the form . so you can submit the form easily by button type="submit" .
Use this one
onclick="javascript:form_submit()"
Use this one
action="<?php echo htmlentities('functions/userManagement.php?id= echo $id');?>"
Hope it is helpful for you.
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.