I have this javascript code that return to me result in alert window
$(".average").click(function () {
alert(average())
});
But, now i want to display that result in bootstrap modal window. How can i show result in modal? Thanks!
Using the example from the documentation of the Bootstrap modal, you simply need to insert the result of your average function into the modal body and then show the modal. Assuming your modal has an id of #myModal:
$(".average").click(function () {
var result = average();
$("#myModal .modal-body p").text(result);
$("#myModal").modal();
});
Look at the documentation, link above, for more info on the Boostrap modal, and what options you pass to it.
Related
<div *ngIf="httpdata=='success' && res==true ?fun():''">
</div>
fun() {
//alert("hi")
$(document).ready(function () {
// Attach Button click event listener
$("#edit-submit").click(function () {
// show Modal
$('#myModal').modal('show');
});
});
this.res = false;
}
I have used the above code. Once the button is clicked, json data is posted through web api, after data is inserted, the response message will be 'success'. If the response is success, it should display message in modal pop
that data is successfully sumbitted.
It is not displaying any popup and there are no errors.
I recommend you to use the ng bootstrap
https://ng-bootstrap.github.io/#/home
and read the section about the modal implementation:
https://ng-bootstrap.github.io/#/components/modal/examples
I hope this help you.
I am running a JS function after which I want to show a modal asking the user a predefined question.
Since the modal will be loaded as a result of a previous AJAX success or error result, I am not launching the modal via a button click of some sorts, hence have nothing to attach the modal-body update to attach to. How would I do this?
Basically, I am trying to achieve this:
$("#myModal").on("show.bs.modal", function(e) {
$(this).find(".modal-body").html('<p>this is a test</p>');
});
in this way:
// show alert modal to inform user of
success: function(data) {
$('#mod_output').html(data);
drawVisualization();
// show alert modal to inform user of
$("#AlertModal").modal();
$("AlertModal").find(".modal-body").html('<p>this is a test</p>');
}
thanks
Register-modal1,login-modal2 and forgot-modal3 page showing in model-dialog popup using bootstrap 3.Its working fine ,but when switch over to other model2 popup through anchor tag with in the popup model 1 ,which is overlapping model1(model2 overlapping on model1). Instead of overlapping it ,I just need to close it model1 when switch over to model2.
Please help me out, how to achive this by bootstrap 3
add a class to all three of your modal and trigger this :
$('.myModal').modal('hide');
$('.myModall').on('hidden', function () {
$('#myModalNew').modal('show')
})
or better make it a function so you can pass the new modal name to it !
function openNewModal(elClass,elID){
$('.'+elClass).modal('hide');
$('.'+elClass).on('hidden', function () {
// Load up a new modal...
$('#'+elID).modal('show')
})
}
you can trigger it using on click or JQuery Click function.
Hopefully a simple question regarding dynamically populating results to a popup model rather than opening a new page.
I have a html table of results based on a php query, when I highlight a row and click the edit button a new window opens and displays more details about the selected item. This is working fine but now I would like to have to contents display in a model instead of opening a new page.
Below is the JavaScript for the edit button that does work.
$(function(){
$('#btnEdit').click(function(e) {
var value = $("#tblTickets tr.selected td:eq(4)").html();
window.open("helpdesk_ticket_details.php?ID="+value);
});
});
Now if I modify the code slightly like below the model box displays but I'm not sure how to dynamically fill it based on my table selection.
$(function() {
var modal = document.getElementById('myModal');
$('#btnEdit').click(function(e) {
var value = $("#tblTickets tr.selected td:eq(4)");
modal.style.display = 'block';
});
});
Any help on this is appreciated. If you need anymore information please let me know.
Thanks
I have an odd issue in protractor.
All I need to do is test form thats in a modal. I can confirm that the modal is open, but then I want to sendKeys to the input(s).
element(by.id('modal')).click().then(function () {
var modal = $('.modal');
browser.wait(EC.visibilityOf(modal), 5000);
expect(modal.isDisplayed()).toBeTruthy();
element(by.model('userInput.firstName')).sendKeys('HELLO'); // <- this fails
})
This test will fail with ElementNotVisibleError. But when I set the modal to auto open once the page is hit (rather than via a button click), I make sure the modal is displayed and send the keys. This passes fine.
Any advice is appreciated.
Wait for the visibility of the input element instead:
var modal = $('.modal');
var modalInput = modal.element(by.model('userInput.firstName'));
browser.wait(EC.visibilityOf(modalInput), 5000);
modalInput.sendKeys('HELLO');