I am checking the livewire-ui/modal as described in this github page
The modal is showing properly when the open button is clicked but it never closes whatever the mean used is, e.g. :
clicking away
using the escape touch
using a close button with this code
<button wire:click="$emit('closeModal')">No, do not delete</button>
usinge a close button with this code
<button class="button-link" wire:click.prevent="close()"> Poster</button>
and having the close function in the modal like this:
<?php
namespace App\Http\Livewire;
use LivewireUI\Modal\ModalComponent;
class Hello extends ModalComponent
{
public function render()
{
return view('livewire.hello');
}
public function close(){
$this->closeModal();
}
}
The functioning was due to the fact that I had 2 alpine in the page
One as directly in the page (CDN) and the other inside app.js (require 'alpinejs'). I just kept require 'alpinejs' and now it works.
Related
If, in my React Native application, I have some Java code like this:
public class MainActivity extends ReactActivity {
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KEYCODE_BUTTON_16) {
rfidScanning.startScanning();
return true;
} else {
return super.onKeyDown(keyCode, event);
}
}
The contents of onKeyDown will be called unless I have a React Native Modal component visible.
Why does the modal visibility change this, and how can I make it fire anyway or do something equivalent (such as capturing the event somewhere else in my Java code)?
Actually I think I found the problem. It looks to me like the relevant modal code is here:
https://github.com/facebook/react-native/blob/b531612b2c917e1f2bd6bb37bf854fe51e658b36/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java#L221
They actually handle the onKeyUp and not the onKeyDown. I confirmed this by verifying in my own code that onKeyUp fires with the modal open, but onKeyDown does not.
Wow.
I created an issue document for the bug here:
https://github.com/facebook/react-native/issues/32827
I'm using react-native-swipe-list-view (https://github.com/jemise111/react-native-swipe-list-view) in my React Native app and I'm trying to close rows programmatically.
Once the user swipes to the right or left and clicks the button there, I call a function to make API calls and handle a few things. This is where I also try to close the row programmatically. This is working ONLY for the last item in the list. Anything above it, the row stays open.
I do hit my handleClickUpdateItemStatus() function and the API call works fine but as I said, only the last item in the list will close. Anything above that one stays open even though all the other code in the function work fine.
My code looks like this:
class MyComponent extends Component {
constructor(props) {
super(props);
this.handleClickUpdateItemStatus = this.handleClickUpdateItemStatus.bind(this);
}
handleClickUpdateItemStatus(itemId, value) {
this._swipeListView.safeCloseOpenRow();
// Call my API to update item status
}
render() {
return(
<Container>
<SwipeListView
ref={ref => this._swipeListView = ref}
data={this.props.items}
... // Omitted for brevity />
</Container>
);
}
}
Any idea what's causing this?
I am showing an custom component("my-addmodule") inside the modal Dialog custom component( "my-modal-dialog") as below,
<my-modal-dialog [showFooter]="false" #addModuleDialog>
<my-addmodule (hideDialog)="hideAddModalDialog($event)" (reloadGrid)="reload($event)" #addModule></my-addmodule>
</div>
</my-modal-dialog>
Now the problem is that, each time, I close the modal dialog, angular is not destroying "my-addmodule" component. So when I open the modal-dialog again, I see the same state of "my-addmodule" component ( some drop-down selection and previously entered value in textbox etc).
I want angular to destroy component when I close the modal-dialog and re-create the component on opening the modal-dialog.
I tried adding the below code ""my-addmodule" component,
export class AddModuleComponent implements OnInit, OnDestroy {
public destroyComponent(){
this.ngOnDestroy();
}
ngOnDestroy(): void {
console.log("Add module is destroyed");
}
}
but when I call "destroyComponent" function on the modal-dialog hide() function, I get error "this.addModuleDialog.destroyComponent is not a function".
following is my parent component ts file, who is using above mentioned two component,
ParentComponent.ts
export class ParentComponent implements {
#ViewChild('addModuleDialog') addModuleDialog;
#ViewChild('addModule') addModule;
showAddModuleDialog(e: any): void {
e.preventDefault();
this.addModuleDialog.show();
}
hideAddModalDialog(e: any): void {
this.addModuleDialog.hide();
this.addModule.destroyComponent();
}
}
Parent.Component.html
<my-modal-dialog [showFooter]="false" #addModuleDialog>
<my-addmodule (hideDialog)="hideAddModalDialog($event)" (reloadGrid)="reload($event)" #addModule></my-addmodule>
</div>
</my-modal-dialog>
I'm using <q-collapsible> tag for a collapse action. That is working fine. But I need to close the collapse by clicking some other button through Vue js only.
Since I'm using quasar it has some functionalities like open() and close() and I don't know how to implement it. So if possible someone helps me how to proceed.
This can be done easily since quasar provides this functionality out of the box.
First, reference your quasar component
<q-collapsible ref="myCollapsible">
...
</q-collapsible>
<button #click="toggleCollapsible">toggle collapsible</button>
Then, execute the needed method
methods: {
toggleCollapsible () {
this.$refs.myCollapsible.toggle()
}
}
This is for toggle, you can do the same with open and close.
I am trying to code a login component for my application in Angular 2 version rc-1. But I did not find how to open my modal without a button action.
When I load my app, I check if the user is logged or not (with the localStorage) : if he is not logged the login modal had to be openned.
So open/close modal is conditionned by a boolean parameter and not a action button.
Do you know how can I open a login modal without a button action ?
Thanks in advance,
Lets say you have a component that holds your modal.
export class YourModalComponent {
constructor () {}
public open(): void {
//show modal
}
}
And then you have a component that checks the local storage and has YourModalComponent as a children. If the user is logged in you just call modal.open().
export class YourParentComponent {
#ViewChild(YourModalComponent)
public yourModal : YourModalComponent;
constructor() {}
public ngAfterViewInit(): void {
//check if user is logged in
if(!userIsLoggedIn) {
this.yourModal.open();
}
}
}
You can also have the div displaying with ngIf so the YourModalComponent is only displayed if it meets the condition.