<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.
Related
I'm calling an Alertify Confirmation dialog while running a Bootstrap 4 Modal, and the problem is that the tab focus is not working in the first, while it is stucking in the last.
I believe it is something to do with the "tabindex=-1" which is added to the modal class Div based on Bootstrap 4 standards, so I've tried more than one concept trying resolving the problem, and still not working...
One of the concepts that I've thought will work was to toggle the "tabindex=-1" from the "modal" class div elements during the Alertify onshow and onclose events, and still not working!
let mymessage = "Update entry?";
alertify.confirm().set({title: "Confirm!"})
.set({labels: {ok:"Yes", cancel:"No"}})
.set("defaultFocus", "ok");
.set({onshow:function(){$(".modal").attr("tabindex","-2");}})
.set({onclose:function(){$(".modal").attr("tabindex","-1");}});
// Show confirmation message
alertify.confirm(mymessage, function(e){
if(e){
editRow();
} else {
alertify.notify("Entry update has been canceled!");
}
}).bringToFront();
Take a look at the tab sequence is still in the Modal Div while it is missing from the Alertify Confirmation dialog!
I will be appreciated for any support!
The following code resolves the issue:
let mymessage = "Update entry?";
// custom OK and Cancel label to Yes and No
alertify.confirm().set({title: "Confirm!"})
.set({labels: {ok:"Yes", cancel:"No"}})
.set("defaultFocus", "ok")
.set({onshow:function(){$(".modal").removeAttr("tabindex");}})
.set({onclose:function(){$(".modal").attr("tabindex","-1");
}});
// Show confirmation message
alertify.confirm(mymessage, function(e){
if(e){
editRow();
} else {
alertify.notify("Editing entry has been canceled!");
}
});
Lets imagine that I have a page where all my projects are listed in the table:
ID | PROJECT-NAME | PROJECT-LINK
1 Project 1 | (BUTTON)
2 Project 2 | (BUTTON)
3 Project 3 | (BUTTON)
Now at the moment of clicking (BUTTON) for Project 1 I'm running this JavaScript code:
// on button click opening modal window
$(".modal-button").on('click', function () {
let button = $(this);
const id = button.attr('data-id');
// calling backend to get details necessary for modal popup
$.ajax({
url: "/project?id=" + id,
type: "get",
success: function(response){
if(!response.result){
if(response.error === 'expired'){
$('.expired').show();
} else {
alert(response.error);
}
}
let url = response.url;
let modal = document.getElementById("project-modal");
let span = document.getElementsByClassName("close")[0];
// showing modal popup
$('.copied-text').hide();
$('.expiration-changed').hide();
$('#project-modal').show();
// inserting link to disabled input field
$("#link").val(url);
$("#logo-link").val(response.project_url);
$("#expiration-date").val(response.expiration_date);
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#project-modal').hide()
};
// adding close button
$("#share-close-btn").on('click', function(){
$('#project-modal').hide()
});
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
$('#project-modal').hide()
}
};
}
});
$("#date").datepicker({
dateFormat: "yy-mm-dd"
});
// modal button to send new data
$("#copy-btn").on('click', function(){
$('#link').select();
document.execCommand("copy");
this.focus();
let img_url = $("#logo-link").val();
let request_data = {"id": id, "img_url": img_url};
$.ajax({
url: "/projects",
type: "post",
contentType:"application/json",
data: JSON.stringify(request_data),
success: function(response){
if(!response.result){
alert(response.error);
}
}
});
$('.expiration-changed').hide();
$('.copied-text').show();
});
});
Now the JS code, it basically shows $('#project-modal').show(); my hidden modal window (as it is initially with style="disabled: disabled;"), first thing I call back-end to get project data by the id which I get from clicked button (in this case ID=1), by which I know what project I'm updating.
When I need to update back end with new data and I do this first time in the newly loaded page, on click $("#copy-btn").on('click', function(){ to send new data to the back-end, it works fine, sends only 1 POST request to the back-end and updates it correctly.
But, after closing (hiding) Project 1 modal window $('#project-modal').hide(); and opening another Project 2 modal window and sending an update $("#copy-btn").on('click', function(){ to the back-end with ID=2 for some kind of a reason with this I send it 2 requests. 1st request with ID=2 and 2nd request with ID=2.
How can I handle multiple modal window openings without sending multiple requests with previously opened modal window generated ID?
Should I create modal window on the fly and not hide it, but destroy/remove it?
Or the JavaScript code of mine is incorrect and how to improve it?
Or I'm doing at all in a wrong way?
If you need more information on this, please ask, I will update the question. Thank you!
This happens because on each button click opening a modal window like:
$(".modal-button").on('click', function () {
You are adding a new event listener for $("#copy-btn") each time like:
$("#copy-btn").on('click', function(){
So, to resolve this issue you simply need to remove all previous event handlers that were attached with .on() using the .off() method like:
$("#copy-btn").off('click').on('click', function(){
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
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.
At the moment, I have a simple app that Ajax's to a server, gets some JSON and then does something with it. I'd like to add in messages to show loading images and other info, but I'm struggling with simplemodal at the moment because it doesn't queue modals, so it just fires everything as soon as it comes in. I've tried writing a queue for it, didn't work out so well :)
The app should:
Send ajax request (show modal, stop user clicking anything)
Ajax complete (hide modal, allow clicking)
If [for example] return JSON object has "message" set ( if (strJson.message)) { } ) show message as modal
Allow user to close modal
While they were reading the message, if another ajax call has come and gone, and we have more modals to show, they should be queued to show when the current one is closed.
This seems like the kind of thing that should be out there but I can't see anything that mentions it specifically.
Any ideas? :)
You can take the messages and put them into an array, then when the dialog is closed you can check to see if there is more messages, if there is pull the next message from the array and display it. Here it an example using jQuery UI Dialog.
HTML
<div id="dialog"></div>
JavaScript
var messages = [],
addMessage = function (msg) {
messages.push(msg);
if (!$('#dialog').dialog("isOpen")) {
displayMessage();
}
},
displayMessage = function () {
$('#dialog').html(messages.shift()).dialog('open');
};
$(function () {
$('#dialog').dialog({
autoOpen: false,
modal: true,
close: function () {
if (messages.length > 0) {
displayMessage();
}
}
});
addMessage('First Message');
addMessage('Second Message');
});