Is it possible to open a modal popup from a modal popup? I have not been able to get the following to work by calling showDataEntry() from an open modal popup:
// at the top of the modal's mxml, inside <mx:TitleWindow>
import mx.managers.PopUpManager;
import views.windows.MyDataEntry;
...
private function showDataEntry():void {
var myDataEntry:MyDataEntry = MyDataEntry(PopUpManager.createPopUp(this,MyDataEntry,true));
PopUpManager.centerPopUp(myDataEntry);
}
...
<mx:Button id="btnDataEntry" label="Data Entry" click="showDataEntry();" />
Without knowing exactly what MyDataEntry does, it looks like that may be the problem. Try just creating the popup with and pass it a class to create the content.
var myDataEntry:MyDataEntry = PopUpManager.createPopUp(this,myDataEntry,true) as MyDataEntry;
Related
In my index.html, I have the following code:
<head>
...
<script type="text/javascript"
src="https://mysrc.com/something.js&collectorId=f8n0soi9"
</script>
<script type="text/javascript">window.ATL_JQ_PAGE_PROPS = {
'f8n0soi9': {
"triggerFunction": function (showCollectorDialog) {
document.getElementById("button1").addEventListener("click", function (e) {
e.preventDefault();
showCollectorDialog();
});
}
}
};</script>
</head>
and then in my myComponent.tsx file, I have a button somewhere on the page that looks like this:
function myComponent() {
return (
...
<button id="button1">
Button Text
</button>
...
);
}
export default myComponent;
It's probably also important to note that I'm using react-routing to navigate between various components, and the button above is just in one of those components
So the issue seems to be that if you load in to a site on any other webpage and later navigate to the page with the button on it, the button won't work unless you refresh that specific page, since presumably it wasn't on the first page loaded and perhaps no element with id "button1" was found to bind the event listener to. React-routing doesn't refresh the page by default when navigating through the site.
Putting the code I have in the index.html file into the myComponent.tsx file also does not work, since (I think) the index.html file allows for any raw html but the tsx file isn't truly html? Is there perhaps a way to define this as a function in the index.html file and then assign an onClick event to the button? Thank you all in advance!
Yes, it should be possible to bind the function that shows the dialog for later use and then use the recommended React event on the button.
In this example bound globally to the window object for simplicity:
"triggerFunction": function (showCollectorDialog) {
window.showCollectorDialog = showCollectorDialog;
}
// ...
<button id="button1" onClick={e => {e.preventDefault(); window.showCollectorDialog();}}>
If you run into Type errors with that, try (on the button):
=> {...; (window as any).showCollectorDialog();}
Or declare only the property (possible be more specific than any here if the signature is known):
declare global {
interface Window { showCollectorDialog: any; }
}
It should be fine to have this just somewhere in your TS source, your index.html without TS should just assign it.
I am installing this modal dialog on a client's website, with practically no modifications.
However, I could not find how to make the modal dialog display on page load in the documentation.
Right now it just says:
<!-- Link to open the modal -->
<p>Open Modal</p>
But I am sure there is a way to make it just open on load.
I am using a hosted version of jQuery (jquery.min.js, jquery.modal.min.js) so I'm not trying to add/edit code in the JS file.
http://github.com/kylefox/jquery-modal Method 2: Manually:
$(function() {
$('#login-form').modal();
});
You need to create on your html a div like this:
<div ng-include="'/Somepast/busyModal.html'" ng-show="isLoading"></div>
<div> after load</div>
Then in your javascript you create:
function init() {
$scope.isLoading = true;
SomeFunction().then(function (data) {
$scope.isLoading = false;
}, onError);
};
that's it.
I have a confirmation modal pop up that is shown when a user selects a submit button.
When the modal appears, the user has the option to click on a button to close the modal. Here's how it looks like:
HTML:
<ng-template #confirmModal>
<custom-modal-body-component
(cancelFn)="closeModal()"
</custom-modal-body-component>
</ng-template>
TS:
#ViewChild('confirmModal', { static: true }) confirmModalTemplate: TemplateRef<any>;
constructor(
private modalService: MatDialog,
) {}
submit() {
this.myModal = this.modalService.open(this.confirmModalTemplate);
}
closeModal() {
this.myModal.close();
}
My issue is, that when the user closes the modal it moves to the top left corner of the page for a brief moment before closing. I do not want this to happen.
I'd like the modal to just close normally without jumping to the top left corner of the page. We've recently upgraded Angular/material from 7.x.x to 8.2.1. This issue did not appear in version 7 and we do not want to downgrade to 7. Any thoughts on what could be going on?
This only happens in IE, which we need to support.
EDIT:
It should be noted that this behaviour is only occurring on two particular pages of our application. We open modals in the same way across all pages, but this issue does not persist on all pages.
This might be a problem with going out of zone. Try putting the close and open of the model inside the zone like so:
constructor(private zone: NgZone) { }
const dialogRef1 = this.zone.run(() => {
this.dialog.open(DialogComponent, {});
});
I'm new to html and Angular2. Any help with this problem would be much appreciated.
I am placing a form component inside a ng2-modal and I would like the modal to close when the form returns a boolean from an event.
The form is for adding a new class to a database. Its first usage is on another page where it is not inside a modal.
There, upon clicking cancel/submit in the component, I have it return true and then redirect to another url.
For the new implementation I want the modal to close when the form returns true. The problem is that the save/cancel buttons are in the component containing the form. So I can't just use the modal's click event to close it.
Here is my current code:
<modal #addNewClassModal>
<modal-header>
<h4 class="modal-title"><i class="fa fa-cube"></i> Add a new class</h4>
</modal-header>
<modal-content>
<div>
<add-new-class (closeModal)="finishAddingNewClass($event)">
</add-new-class>
</div>
</modal-content>
</modal>
My problem is that I can't figure out how to get the modals close() method to rely on the boolean.
I've tried putting closeModal="addNewClassModal.close()" in different places and switching around the syntax but its not working and I can't find anything online.
You can pass a reference to addNewClassModal to your AddNewClass component:
<add-new-class [modal]="addNewClassModal">
</add-new-class>
And in your AddNewClass component add Input() for modal:
import { Input } from '#angular/core';
import { ModalDirective } from 'ng2-bootstrap/components/modal';
#Input()
modal: ModalDirective; // you can also set type to any instead of ModalDirective
Then in your component you can close modal with hide() function:
this.modal.hide();
I want to know how to open popup window in angularjs with simple animation and background should be blur or dark
and how to pass object to that new popup window
in html
I have this type div
<div class="col-xs-7 col-md-2 rcorners2 " style="height:168px;width:126px; margin-left: 10px" ng-click="clickevent(app)">
app.js I have this:
app.controller('test',['$scope',function($scope){
$scope.clickevent=function(app){
$scope.app=app;
alert(app.name);
}
}]);
this app object content different attributes app name description...
those attribute should display in that new popup window with button
how can I do this?
Wayne suggested ngDialog which is an option but I found it to be really annoying... I simply go with the bootstrap modal or ui.bootstrap $modal... ui.bootstrap just use $modal...
you can use $modal
ref: https://angular-ui.github.io/bootstrap/
app.controller('yourController', yourController);
yourController.$inject = ['$scope', '$modal'];
function yourController($scope, $modal){...}
then start to use it.
use javascript:
assign an object to window
const pageInfo = {
name: 'myPage',
url: 'http://myPage...'
}
window.pageInfo = pageInfo;
window.open(pageInfo.url, "_blank");
then check window.opener on the next page
if (window.opener && window.opener !== null) {
console.log('has initial pageInfo !');
let pageInfo = window.opener.pageInfo;
} else {
console.log('No initial pageInfo !');
}