I have a Vue.js app that shows a modal correctly if I click a button, but I'd like to show it based on a URL parameter. I have an open method for the modal:
<script>
export default {
methods: {
show() {
console.log("showing modal")
this.$modal.show("set-game-name");
},
...
and this all works fine from a button in the template:
<button #click="show">Click</button>
It prints "showing modal" and the modal pops up.
However, what I want to do is set a Vuex store variable, based on the URL search string and show the modal if set. This works fine from this code in App.vue
created() {
if (location.search.match(/walkThrough/) {
this.$store.dispatch("updateWalkThrough", true)
}
}
This works as expected, the variable gets set. In the modal component's create, I have:
created() {
console.log(this.walkThrough)
if (this.walkThrough) {
this.show() // Same show function as above
}
This prints out the correct value for walkThrough and logs "showing modal" correctly as before. However, the modal doesn't appear. No errors are logged in the console... Any ideas? Is there a different life-cycle hook I need to use?
instead of create method try mounted method.
The create method calls before loading the page and the mounted method calls if the page has been loaded.
Related
I am trying to render a whole new component into a page when there's is event.
For example I have a button that sends request to DB, and I want that whenever this button is clicked a NEW toaster will open that will say "sent".
I saw this - Way to render a new component onClick in react js
And it just shows how to set toggle to show or hide element, but I want to add new one, so I will be able to add multiple of them.
export default function Demo() {
function handleClick() {
// show notification "clicked"
}
return (
<div>
<button onClick={() => handleClick()}>Click to update</button>
</div>
)
}
You can find a working sample in this codesandbox. I have used ant design to generate the notification. This comes out of the box without custom config. You can click the button as many times as you want and each time a new notification will be displayed.
The only things you need to do is:
Add antd to your dependencies in package.json
Add import "antd/dist/antd.css" to your index file
Start using notification right away in your component.
First of all, a shout out to Yoav the developer of React Uploady. It's a very helpful library with all kinds of great fancy features (chunked uploads, upload progress hooks, etc).
I have a question about using the asUploadButton hook. Here's my use case: within my app, a user can choose from several places to upload a batch to. This is done by selecting a global dropdown that specifies the upload destination. Since user error is a real thing, I need to show them a confirmation screen. This is easy to do the first time they hit the "upload" screen: a state variable keeps track of whether they have confirmed they're in the right place, conditionally rendering either the confirmation component (if they haven't confirmed), or the Uploady component (custom UploadButton) if they have confirmed.
But the requirement is that we show the confirmation every time. Once a user has uploaded a batch, they should still be shown the confirmation if they click on that custom UploadButton again. I tried passing an onClick into the asUploadButton component, but that callback is actually called after showFileUpload - and I want to show an interstitial modal once the button is clicked but before showFileUpload is called. Is there any hook to call a method before showFileUpload? Or am I approaching this completely wrong? Advice of any kind is very appreciated.
as answered here on the react-uploady discussions page:
In your case, I think a custom button will make more sense. In the end, asUploadButton is a very simple component that mainly does one thing and that is, call showFileUpload available from the UploadyContext.
You could create your button component that implements the logic (show confirmation) and when user approves calls the showFileUpload.
You get access to the method using:
import { useUploady} from "#rpldy/uploady"
//...in your component:
const { showFileUpload } = useUploady();
const onClick = () => {
//custom logic
showFileUpload();
};
I have created a modal component called ImportCardModalComponent.
This component must be opened if the login is failed. like follows:
this.authSerivce.logInRegular(this.model).then(result => {
console.log(result);
}, error => {
var importModal = this.modalService.open(ImportCardModalComponent);
});
The issue is that the dialog doesn't appear unless I click the button on screen twice and fire the service two times.
The first time I click the button, DOM elements are added successfully but without css class in <ngb-modal-backdrop> and <ngb-modal-window>. As shown below.
The second time I click on the button, the classes are showing correctly. As show below:
The modal MUST have class ="modal-backdrop fade show" in backdrop element. As well as class="modal fade show d-block" in window element.
I tried to use the modalService with NgbModalOptions backdropClass and windowClass without any success to work from first time.
If I move the open modal service outside the reject callback, it works fine.
Any Help is much appreciated.
One way is to manually trigger change detection after modal service call.
Get the reference of ApplicationRef
constructor(private appRef: ApplicationRef,...){}
and then invoke change detection:
this.authSerivce.logInRegular(this.model).then(result => {
console.log(result);
}, error => {
var importModal = this.modalService.open(ImportCardModalComponent);
this.appRef.tick();
});
I am using Angular Bootstrap to display a Modal (the one presented here), which works perfectly. However, default behavior of this Angular extension is that the modal is reconstructed (and a new instance of its controller will be creatred) whenever it is closed and then opened again.
Since I have some pretty advanced stuff going on inside the Modal, I would like the modal to just be hidden when it is closed, so that its state remains. I have searched around a bit, but unfortunately could not find a simple and effective answer.
Just hiding it would be an option, but this then has to happen whenever the modal is closed, so also when it closes because the backdrop is clicked. And I want the same animation as when the modal is opened in the normal way.
Why don't you abstract the modal state into its own service? That way, whenever the modal controller is created, it uses the service to setup the view state on initialisation.
Eg. create a service
.factory('ModalStateService', function(){
var state = {
someValue: 'something'
};
return {
getState: function() { return state; }
};
});
Then in your controller:
.controller('ModalCtrl', function($scope, ModalStateService){
$scope.viewState = ModalStateService.getState();
});
Then in your modal content view for example:
<span>{{viewState.someValue}}</span>
If you were then to set someValue inside your modal, say through an input, the service state would be updated. Then when you create and destroy your modal, the state will persist.
As you might already know Angular initializes a controller when the associated view is added to the DOM. So the plugin author might have decided to add and remove the view element so that he does not have to worry about clearing the 'scope'each time user opens and closes the modal.
For example, we have a login box in the modal and if the scope is not cleared, it will keep the filled in details even the next time we show it.
An easy hack to solve your problem will be to wrap the originl modal in a custom directive, reneder it. And just change the display property of your custom modal to show and hide the modal ;)
When I display an error message to the user, I use the following script to open a modal message:
jQuery('#errorDialog').modal({
keyboard: false,
show: true,
backdrop: 'static'
});
It works very well and displays the message as I wanted to.
The problem is that when I use the back button from the browser, it takes me to the previous page in the history (all good) but the backdrop is still on the screen.
I tried to remove the backdrop: 'static' line which had the effect of dismissing the modal message when I clicked the anywhere on the backdrop. Nevertheless, it still stays when going back the the previous page.
Is there a way to remove it when I use the back button (or navigate through browser history otherwise)?
If you are working with a SPA javascript framework like for example Vue, React or Angular, is normal that when there is a back button pressed, the bootstrap or jQuery UI backdrop stays visible.
The reason is because the backdrop div is inserted usually at the top of the DOM and when back is pressed, it just re-renders the Node more down in the DOM.
The solution is for example, detect every history change and execute:
$(".modal-backdrop").remove()
In the case of Vue for example, it can be done in the vue-router like so:
router.beforeEach((to, from, next) => {
$(".modal-backdrop").remove();
next();
});
I had a similar problem using backbone.js. For anyone else experiencing this issue. Here's my hack to fix it.
I have a function in myRouter that loads my views on route change.
loadView: function(view) {
var _this = this;
if (_this.currentView) {
_this.currentView.close();
}
_this.currentView = view;
_this.currentView.render();
// Render view to dom
$(".content").html(_this.currentView.el);
// Set opacity of modal backdrop to 0
$('.modal-backdrop').css('opacity', 0);
} //,
Then on route change you just call loadView like this:
index: function() {
_this.loadView(new IndexView());
} //,