Component parent:
Component child: admin.category.select-recursive
-- Problem: I use recursive for list categories in , I use Modal bootstrap, I use wire:ignore.self for component parent, and use wire.ignore for , everything showing Ok. I add new data into database from component parent success. But when I re-open modal component parent, I can't see the data just added in . I want re-render or update data just added in . Thanhks you reading. Have a nice day !!!
I had fix success problem.
I add key(time() . rand(0, 999)) in #livewire(...) from component parent
before:
#livewire('admin.category.select-recursive',['categories' => $categories,'parent_id' => 0,'icon' => '',])
after:
#livewire('admin.category.select-recursive',['categories' => $categories,'parent_id' => 0,'icon' => '',],key(time() . rand(0, 999)))
Thanhks every one :D
Related
I want to refresh some html in other container, not where the button is.
In native ajax is like this
.done(function(result){
$('#result').html(result);
});
how it works in livewire alpinejs?
you have 2 option
use Livewire Life Cycle Javascript Hooks
you can see the livewire javascript hooks in this link
Lifecycle Hooks
document.addEventListener("DOMContentLoaded", () => {
Livewire.hook('message.processed', (message, component) => {})
});
Use Browser Events Dispatching
Dispatching Browser Events
you can dispatch a browser event when ever you want in you backend like this
$this->dispatchBrowserEvent('name-updated', ['newName' => $value]);
and for js side you can use this code:
window.addEventListener('name-updated', event => {
alert('Name updated to: ' + event.detail.newName);
})
I have two pages: VideoPage and ExerciseListPage. I am in VideoPage and when I do this.navCtrl.pop()I come back to ExerciseListPage.
When I come back to ExerciseListPage page I want to fire ngOnInIt()method present on that page (because I do some initialization there and the values that are changed from my VideoPage now need to reflect on ExerciseListPage).
I tried following: In my VideoPage:
this.events.publish('reloadList');
this.navCtrl.pop();
And in ExerciseListPage controller:
this.events.subscribe('reloadList',() => {
this.navCtrl.pop();
this.navCtrl.push(ExerciseListPage);
});
This did not work. How can I solve this problem?
It was actually simple, I just fired ngOnInIt again like following:
this.events.subscribe('reloadList',() => {
this.ngOnInit();
});
I'm trying to unit test React Bootstrap modal dialog using Jasmine. But it is not working as expected.
Here is jsfiddle link using latest versions of React, React Bootstrap, Jasmine.: http://jsfiddle.net/30qmcLyf/3/
Test which fails:
line# 27-28
// This test fails. Find DOM Node.
var instanceDomNode = ReactDOM.findDOMNode(instance);
expect(instanceDomNode).not.toBe(null);
line# 39-40
//This test fails. Find modal header.
var headerComponents = TestUtils.scryRenderedComponentsWithType(component, ReactBootstrap.Modal.Header);
expect(headerComponents.length).not.toBe(0);
Also what is wrong with line#35-36. If I uncomment lines I get error shown in comments.
// Error: Did not find exactly one match for componentType:function ModalHeader()...
//var headerComponent = TestUtils.findRenderedComponentWithType(component, ReactBootstrap.Modal.Header);
//expect(headerComponent).not.toBe(null);
As per latest official documentation for test utilities (link), you are supposed to pass ReactComponent as first argument.
Can somebody tell me what is wrong?
Check out how the react-bootstrap team writes tests for this. The modal is rendered into a different subtree which is how it gets rendered to the document body and not directly as a child of its parent. In other words your srcying fails because the component is not in that Component tree.
You can use refs on the modal or look for the DOM nodes directly in the document.
React-Bootstrap modal can be unit tested using mount of enzyme
it(componentToTest.title + 'renders Modal component', () => {
expect(wrapper.find(UVModal).length).toEqual(1);
});
it(componentToTest.title + 'renders major html elements', () => {
// Test whether modal-content element has 3 html children elements.
expect(wrapper.find('.modal-content').length).toEqual(1);
expect(wrapper.find('.modal-content').children()).toHaveLength(3);
// Test whether modal-header element has 2 html children elements.
expect(wrapper.find('.modal-header').length).toEqual(1);
expect(wrapper.find('.modal-header').children()).toHaveLength(2);
// Test whether modal-body element has 1 html child element.
expect(wrapper.find('.modal-body').length).toEqual(1);
expect(wrapper.find('.modal-body').children()).toHaveLength(1);
// Test whether modal-footer element has 1 html child element.
expect(wrapper.find('.modal-footer').length).toEqual(1);
expect(wrapper.find('.modal-footer').children()).toHaveLength(1);
elementToSearch = <p>Lannisters always pay their debt</p>;
expect(wrapper.contains(elementToSearch)).toEqual(false);
});
Check following blog for details:
https://medium.com/#yuvi1422/unit-test-react-bootstrap-modal-a37bf59732ab
In case you are using an older version of Enzyme, you can pass the container element to mount where you want your Modal to be rendered, like this:
Actual Code:
------------
import React from 'react'
import { Modal } from 'reactstrap'
export default MyModal = () => {
return (
<Modal isOpen={props.isOpen}>
<ModalHeader>Header</ModalHeader>
<ModalBody>Body</ModalBody>
</Modal>
);
}
Unit Test:
----------
import React from 'react'
import MyModal from './MyModal'
import { mount } from 'enzyme'
describe(() => {
let wrapper;
beforeEach(() => {
const container = document.createElement("div");
document.body.appendChild(container);
wrapper = mount( <MyModal isOpen={true}/> , {attachTo: container});
});
it('renders correctly', () => {
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('ModalHeader')).toHaveLength(1);
expect(wrapper.find('ModalBody')).toHaveLength(1);
});
})
I have a TabBar based app in React Native.
Multiple tabs use the same datasource (AsyncStorage).
If I'm now updating the data in one tab and open the other one, the old data is displayed.
I can't figure out, how to force a reload every time the item become active.
FavoritesView: display saved data
ExploreView: Manipulate saved data
FavoritesView: expired data gets displayed (--> force reload)
<TabBarIOS.Item
title="Explore"
icon={{uri:'ic_explore'}}
selected={this.state.selectedTab === 'exploreTab'}
onPress={() => {
this.setState({
selectedTab: 'exploreTab'
});
}}>
<ExploreView/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="Favorites"
icon={{uri:'ic_favorite_border'}}
selected={this.state.selectedTab === 'favoriteTab'}
onPress={() => {
this.setState({
selectedTab: 'favoriteTab'
});
}}>
// Reload this
<FavoritesView/>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="more"
selected={this.state.selectedTab === 'moreTab'}
onPress={() => {
this.setState({
selectedTab: 'moreTab'
});
}}>
<MoreView/>
</TabBarIOS.Item>
I already tried to set a new state to trigger an update, but it doesn't seem to change anything.
<TabBarIOS.Item
title="Favorites"
icon={{uri:'ic_favorite_border'}}
selected={this.state.selectedTab === 'favoriteTab'}
onPress={() => {
this.setState({
selectedTab: 'favoriteTab',
forceUpdate: Math.random()
});
}}>
<FavoritesView forceUpdate={this.state.forceUpdate}/>
</TabBarIOS.Item>
I had a similar issue and what eventually worked for me was to override componentWillReceiveProps on the embedded views. It gets called anytime the view is set as selectedTab in the TabBarIOS.
https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops
this references the parent component when using fat arrow notation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this).
Try adding a ref to the TabBar item and use this.refs.refName.forceUpdate() (slightly nicer than updating the state with a random value as well).
Answering the following question Kendo MVC ListView Editing
Kendo in MVC uses a folder with the following path View/Shared/EditorTemplates
inside this folder you must insert all the templates you call by name, example:
#(Html.Kendo().ListView<temp.Models.YourTable>(Model)
.Name("LisView")
.TagName("div")
.ClientTemplateId("templateView") => here goes the template for data
.DataSource(dataSource => dataSource
.Model(m => m.Id("ID"))
.ServerOperation(false)
.Read(read => read.Action("ActionRead", "Controller"))
)
.Editable(edit => edit.TemplateName("EditTmpl"))
)
EditTmpl => // this template is the one that you must store in the folder that I refer above.
hope this helps.