For a school project's sake, I created a modal using bootstrap in html, inside of it there is a prompt that I must check from javascript, how do I close the Modal from javascript, so that in case the prompt is valid I can just save the changes and if it isn't I throw an exception?
small note (Please without jQuery, I've seen a similar thread that had as a reply using this library, it's forbidden for the assignment)
this is my html code :
<div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="bidModalLabel">Bid amount</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="text" id="prompted">How much do you want to bet?</p>
<div class="input-group mb-2">
<input id="bAmount" type="text" class="form-control text" aria-label="Amount of bet">
<span class="input-group-text">€</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel bid</button>
<button type="button" onClick="bid()" class="btn btn-success">Save bid</button>
</div>
</div>
</div>
</div>
this is my javascript code :
function bid(){
let valueOfBid = document.getElementById("bAmount").value;
if(isNaN(valueOfBid)){
//Cancel the prompt
}
players[realPlayer].bet=valueOfBid;
changeButtonState(false);
theTimer();
}
Please try like this. I suggest that you change isNaN(valueOfBid) to valueOfBid == "" before you add my code on your codebase.
function bid(){
let valueOfBid = document.getElementById("bAmount").value;
if(valueOfBid == ""){
alert(1)
//Cancel the prompt
var myModalEl = document.getElementById('bidModal');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.hide();
}
// players[realPlayer].bet=valueOfBid;
// changeButtonState(false);
}
you can add this to the element that should close the modal...
data-bs-dismiss="modal"
the following modal generates a list of links based off of a search term and user matches.
when they click one of the router links it will close the modal because of the line
<router-link :to="{ name: 'user', params: {user: user }}"
data-bs-dismiss="modal"
>{{ user }}
</router-link
>
the above code is generated INSIDE the modal -> here is the entire thing
<div class="full-page">
<div
class="modal fade"
id="findUser"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Find User</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<label for="recipient-name" class="col-form-label"
>Steem Username:</label
>
<input
type="text"
v-model="userField"
class="form-control"
id="recipient-name"
/>
</div>
<div v-if="userField"></div>
<ul v-for="(user, index) in userMatches" :key="index">
<li>
<router-link
:to="{ name: 'user', params: { user: user } }"
data-bs-dismiss="modal"
>{{ user }}</router-link
>
</li>
</ul>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
Related
I have a series of multiple modals in which there are some forms.
I want to be able to click the "Go Back" button and be on the previous modal. How can this be done without data target?
I would like to create a function as I have way more modals than in the example code below. I tried the back() function, but it only works for the browser and not the last modal.
There are supposed to be more modals (services) to choose from the first modal but i deleted them, as it is for a school project and I can't share the full code.
Code:
<!-- Modal 1 -->
<div class="modal fade" id="modalChoice" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Choose a service: </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body btn-group btn-block">
<div class="md-form" style="margin-left: 70px;margin-top: 20px;">
<button data-target="#modal1" data-toggle="modal" data-dismiss="modal" class="button button-form">Service 1</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal 1 -->
<!-- Modal 2 -->
<div id="Forms" ng-controller="AllForms">
<form id="Form1" name="Form1" class="form">
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Serv1</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body btn-group btn-block">
<div class="modal-body mx-3">
<h5 class="font-weight-bold w-100">Owner Info </h5>
<div class="md-form mb-3">
<i class="fas fa-user prefix grey-text"></i><label data-error="wrong" data-success="right" for="FormVax1.name" style="padding-left: 5px">Name: </label>
<input id="FormVax1.name" name="name" ng-model="FormVax1.name" class="form-control" required />
</div>
<div class="md-form mb-3">
<i class="fas fa-location-arrow prefix grey-text"></i><label data-error="wrong" data-success="right" for="FormVax1.address" style="padding-left: 5px">Phone: </label>
<input id="FormVax1.address" name="address" ng-model="FormVax1.address" class="form-control" required />
</div>
<div class="justify-content-center text-center">
<button data-toggle="modal" data-dismiss="modal" class="button button-form" style="margin:auto;display: inline-block;">Back</button>
<button data-target="#" data-toggle="modal" class="button button-form" style="margin:auto;display: inline-block;">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
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 implement the swagger-editor from npm swagger-editor-dist two times on the same html in Angular 6+. I have displayed swagger-editor on expand button in a modal and also below the expand button. However, it displays swagger only in the expanded modal and not in the div below it.
How can I display the same Swagger both the times?
Front -page ui-
Swagger in Modal -
code -
app.component.html
<div class="form-group">
<i class="fa fa-expand" data-toggle="modal" data-target="#exampleModalCenter">
</i>
<!-- 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">Swagger of </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-12">
<div id="swagger-editorInbox" style="height:500px">
</div>
</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>
<div class="row" style="border:solid 1px gray">
<div id="swagger-editorInbox" style="height:500px"></div>
</div>
</div>
app.component.ts
declare const SwaggerEditorBundle: any
export class swaggerComponent implements OnInit{
editorInbox :any
ngOnInit(){
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox"
})
mySwagger = '....//my swagger// ...';
this.editorInbox.specActions.updateSpec(mySwagger);
}
}
Create 2 ids. you may need to do styling. very hard to do styling. I will recommend show only one at a time. Toggle content only
Id:
<div id="swagger_editorInbox1" style="height:500px"></div>
</div>
<div id="swagger_editorInbox2" style="height:500px"></div>
</div>
//JS
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox1"
})
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox2"
})
app.component.html
<div class="form-group">
<i class="fa fa-expand" (click)="showSwaggerModalFunction(); showSwaggerModal= 'true'" data-toggle="modal" data-target="#exampleModalCenter">
</i>
<!-- 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">Swagger of </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" [hidden]="showSwaggerModal !== 'true'">
<div class="col-12">
<div id="swagger-editorInboxDummy" style="height:500px">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" (click)="onSaveModal()" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="row" style="border:solid 1px gray">
<div id="swagger-editorInbox" style="height:500px"></div>
</div>
</div>
app.component.ts
showSwaggerModal : string = 'false'
showSwaggerModalFunction(){
this.showSwaggerModal = 'true';
var editorInboxDummy = SwaggerEditorBundle({
dom_id : "#swagger-editorInboxDummy"
})
editorInboxDummy.specActions.updateSpec(mySwagger)
}
onSaveModal(){
this.showSwaggerModal = 'false';
}
i have a modal and i try to implement nested comments
now i want to send the parent comment id to child comment in modal
button that show modal:
<button class="btn btn-xs btn-light" data-target="#commentModal" data-toggle="modal" data-parent="3">پاسخ</button>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true" dir="rtl">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="modal-label-3" class="modal-title">ارسال نظر</h4>
</div>
<div class="modal-body">
<div class="respond-form" id="respond" style="padding-top: 0">
<form action="/comment" class="form-gray-fields">
{{ csrf_field() }}
<input type="hidden" name="parent_id" value="0">
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<button class="btn btn-block" type="submit">ثبت دیدگاه</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i want to send value of data-parent in button, to "vlaue" attribute of input in modal
i see this for bootstrap modals:
$('#commentModal').on('show.bs.modal' , function (event) {
let button = $(event.relatedTarget);
let parentId = button.data('parent');
let modal = $(this);
modal.find("[name='parent_id']").val(parentId);
});
but i do not use bootstrap and following code not working for me!
How about something like this?
$(".btn").on("click", function(){
$(".modal-body").find("[name=parent_id]").val($(this).data("parent"));
// Code to show modal
});
I made an article scraper using handlebars. For each article link, I create a modal (using Bootstrap 4), however, the first modal generated for the first article doesn't generate the element so, the notes for the first modal don't get posted since it has no reference to a POST route.
I'm not sure what the issue is. Any input on what could be happening?
Here is my code below:
{{#each article}}
<div class="article">
<h3>
{{this.title}}
<button type="button" class="btn-default float-right" data-toggle="modal" data-target="#newNote{{this._id}}">Note</button>
</h3>
</div>
{{/each}}
<!-- Modal for NOTE -->
{{#each article}}
<div class="modal fade" id="newNote{{this._id}}" tabindex="-1" role="dialog" aria-labelledby="newAppt" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="welcome">Note for {{this.title}}</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{!-- FORM HERE (doesn't generate for first modal created) --}}
<form class="noteModal" action="/articles/{{this._id}}" method="POST">
<div class="form-group">
<label for="apptNotes">Notes</label>
<textarea class="form-control placeholder" rows="5" id="apptNotes" name="body" placeholder="Notes"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancelButton" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-secondary regButton">Submit</button>
</div>
</form>
</div>
</div>
</div>
{{/each}}