How to add paragraph to Bootstrap Modal body using JQuery? - javascript

I would like to update Bootstrap Modal body with some data after button is clicked but I can't add anything to it.
I have tried to use $("#queueN").append(`<p class="boardNumber">Hi</p>`); and $("#queueN").after("<p>Test</p>"); and document.getElementById("queueN").innerHTML = "<p>some text</p>"; but none of these updated my modal. Does anyone know how to properly add to modal body?
<div
class="modal fade"
id="modal"
tabindex="-1"
role="dialog"
aria-labelledby="ModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Sėkmingai užsiregistravote!
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="queueN"></div>
</div>
<div class="modal-footer">
<a
class="btn btn-dark"
href="./puslapiai/svieslente.html"
role="button"
>Uždaryti</a
>
</div>
</div>
</div>
</div>
$("#register").click(function() {
if (document.getElementById("odontologas").checked) {
data.Odontologas.push({
KlientoNr: clientId(),
EilėsNr: queueN(data.Odontologas),
Būsena: "Eilėje",
AptarnavimoLaikas: "00:00"
});
console.log(data);
$(window).load(function() {
$("#modal").modal("show");
$("#queueN").append(`<p class="boardNumber">Hi</p>`);
});
// $("#queueN").after("<p>Test</p>");
// document.getElementById("queueN").innerHTML = "<p>some text</p>";
}

Get rid of $(window).load(). It is a deprecated method for one and is not needed inside the click handler since the page will already have been loaded for the click listener to be applied.
In addition, the window load event only fires once in the page lifecycle and is different than using $(document).ready() which will fire any time it is called after the document is loaded

Related

Getting modal to show within called vue method

Not sure whats going on here but when I click the button calling a function it won't show my modal.
The function call itself works because the commented out alert will show if I uncomment it. How do I need to be showing the modal within this method?
No errors in the console either
<button #click="eventClick"></button>
<div id="example-modal">
<!-- 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">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">
hihi
</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>
eventClick: function(e) {
var eventObj = e.event;
//alert('Clicked ' + eventObj.title);
let element = this.$refs.modal.$el;
$(element).modal('show');
It's hard to tell based on the code presented. The modal ref isn't defined.
In general, you really don't want to mix JQuery into Vue - especially when JQuery is modifying the state of a component (in this case the visual state: shown/not shown).
The preferred way to render a modal is with a standard v-if, as shown in this example.

How can I change text inside a modal with jquery ?

Hello guys I tried to create a pokedex by using pokeapi.
My modal looks like this:
<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"> #1 Pokemon-Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Some information
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
and the js like this:
const button = document.createElement("BUTTON");
button.setAttribute("data-toggle","modal");
button.setAttribute("data-target","#exampleModalCenter");
And my question is how can I change the title and the description of the modal to bulbasaur ?
Full Code: https://www.codeply.com/go/qoCnPUDDxG
With plain javascript:
document.getElementById('exampleModalLongTitle').textContent = 'Bulbasaur';
With jQuery:
$('#exampleModalLongTitle').html("Bulbasaur");
Do the same for whichever element contains your description.
For the modal title:
document.getElementById("exampleModalLongTitle").innerHTML="bulbasaur"; //pure JS
$("#exampleModalLongTitle").html("bulbasaur") //with Jquery
For the description, add a id attribute to your HTML element
<div id="modalDescription" class="modal-body">
Some information
</div>
document.getElementById("modalDescription").innerHTML="bulbasaur description"; // pure JS
$("#modalDescription").html("bulbasaur description") //with Jquery
you can get reference of div using id of and set content inside it.
//In Jquery
$('#exampleModalLongTitle').html("your text");
//In js
document.getElementById('exampleModalLongTitle').textContent = 'you text';

data-target - Angular

I am displaying a dialog by using HTML directly
<!-- Dialog -->
<div class="modal fade" id="exampleModalCenter" 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">
<h3 class="modal-title" id="exampleModalLongTitle">Something went wrong</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="modal-title" id="exampleModalLongTitle">Maximum 10 messages selected</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#exampleModalCenter">RunIt</button>
but I would like to do something previously so I would like to execute data-toggle="modal" data-target="#exampleModalCenter" by javascript using (click)
So basically this would be the steps:
1- (click)="test()"
2- execute data-toggle="modal" data-target="#exampleModalCenter" by javascript in test()
to get the DIV that contains it, I have tried:
test(){
var dialog= <HTMLDivElement>document.getElementById(exampleModalCenter);
}
but I can not find the exampleModalCenter
you should be using attr.data-target
<button data-toggle="collapse"
[attr.data-target]="'#exampleModalCenter">RunIt
</button>
Firstly, you must add click method 'test' to button. Change your modal's class name as 'modal fade'. And after, your ts file must be like this:
#ViewChild('exampleModalCenter') exampleModalCenter;
test() {
this.exampleModalCenter.nativeElement.className = 'modal fade show';
}

Bootstrap 3: prevent modal inside modal to trigger (hidden.bs.modal) every time

I have one modal inside another modal and I've managed to make the inner one close without affecting the other. The problem is that when the second modal is closed it triggers the 'hidden.bs.modal' event for its self and for the first modal.
<!-- My Html -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<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">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
Upload image
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
</div>
<!-- My JS-->
$('#btnUploadCancel').click(function () {
$('#uploadImage').modal('toggle');
});
$(document).on('hidden.bs.modal', '#myModal', function () {
alert("hello");
});
$(document).on('hidden.bs.modal', '#uploadImage', function () {
alert("goodbye");
});
Here is a jsFiddle example that I made.
The reason for this question is that I need to trigger an action only when the second modal gets hidden and then something else when the first one gets hidden. Any ideas on how to fix this using the event for each of them???
Note: The second modal has to be inside the other as they are called as a partial view.
I'm guessing that these modal elements are being introduced to the page asynchronously, and that's why you're using a delegated event listener bound to the document rather than binding hidden.bs.modal directly to #myModal and #uploadImage themselves. If this is not the case, and you can get away with binding directly, I'd suggest using this approach to catch the hidden event on #uploadImage itself, and prevent it from bubbling up the DOM tree using something like event.stopPropagation();.
Alternatively, though, you can continue to delegate this handler to the document, and use the target property of the Event object passed into your handler callback to determine which element was the actual source of the event:
$(document).on('hidden.bs.modal', '#myModal', function (event) {
if (event.target.id == 'uploadImage') {
// do stuff when the upload dialog is hidden.
}
else if (event.target.id == 'myModal') {
// do stuff when the outer dialog is hidden.
}
});
P.S.: As you may already know, the Bootstrap framework does not support overlapping modal dialogs. Be aware of this as you continue to nest modals within modals, especially concerning dismissal elements initialized via the markup API and data-dismiss="modal".
P.P.S.:
The second modal html doesn't have to be included in the first modal body. Include only the data-target link and move the second modal outside the first. This way the events will fire as you expect.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<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">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
Upload image
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
http://jsfiddle.net/wytf57mL/3/

Bootstrap 3.3 modal with jQuery load and return value

The latest version of Bootstrap modal options says that remote function is deprecated and will be removed in Bootstrap 4.
So i'm trying to load a page with jQuery load. But how does this work? I can't find any example of this.
What I want is a modal that loads a page that I created as well. When you click a link in that page (the link is an url of an image), the href value must be returned to the textbox (ImageUrl) in the parent page.
<div class="input-group">
#Html.EditorFor(model => model.ImageUrl, new { htmlAttributes = new { #class = "form-control" } })
<span class="input-group-btn">
<button class="btn btn-default browsefiles" type="button" data-toggle="modal" data-target="#myModal"><i class="fa fa-search"></i></button>
</span>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">Image</h4>
</div>
<div class="modal-body">
External page must be loaded here
</div>
</div>
</div>
</div>
I didn't knew that jQuery.load returned only html and that it will paste the html in the div that you have specified. So when you want to "return" something, the destination is on the same page. So you could set the return value directly in the page.

Categories