The situation
I have a ui-view component in my template:
<div id="innerController" ui-view="stateview"></div>
And I have states A and B defined for this view.
The problem
When I go from state A->B, the rendered DOM looks like this:
And I got 2 different states on the screen.
The question
Why do I get 2 different ui-views?
How can I force a single ui-view?
Thanks!
Related
I have a simple ExpenseShow component that has a child ExpenseForm component.
On ExpenseShow I have a simple update button:
<x-cards. Button
wire:click"$emitTo('expenses. Expense-form', 'editExpense', {{$expense->id}})"
>
Edit Expense
</x-cards. Button>
...
#livewire('expenses.expense-new-form')
The click of the button emits the editExpense event, which opens a modal and the expense is Updated as expected. Then I emit back to $this->emitTo('expenses.expense-show', 'refreshComponent'); from the child component (update method on `ExpenseForm') and it freezes my page (parent component after modal goes away and database is updated.) for a couple of seconds.
However, when I use wire.poll on the ExpenseShow component in the blade everything updates fine with no delay. I just think it's wasteful for this scenario. I don't need the server running requests every 2 seconds, that's why I think refreshComponent is more applicable here. Any ideas? My ExpenseForm has a few dropdowns with hundreds of entries each but wire:poll has no delay and it does it nonstop.
Thanks for any input. Patryk.
Edit:
There was an answer here that made sense. It looks like he deleted his answer. I meant to mark it as Answered when I implemented one of the options. I hope that nice user showa it again. In a nutshell, he suggested I bind my parent and child components via wire: model or that I use livewire: loading or something about livewire: on to replace my on: click and emit... can anyone fill in the gaps? Not sure why their answer was deleted...
Wow. When I wrote this post both Chrome and Edge browsers experienced both issues. Since then, Chrome has been updated and I was able to achieve my desired result per livewire docs ( refresh Component ), shortly after it looks like Microsoft Edge is also working!
As the title suggests, I've created a dynamic form using a mix of tutorials I've read.
I have a parent component which creates a empty form group which I then (try) to populate with sub-groups via child components. These components are passed a reference to the parent form, and the child component then creates its own formgroup and attempts to bind this to the parent.
The form model should then look like the following:
FormGroup
-- FormGroup1
---- FormControl1
---- FormControl2
-- FormGroup2
---- FormControl3
---- FormControl4
However, even thought the lower level form controls all render, the parent form doesn't seem to know they exist. My issue seems like it might be related to Angular 2: How to link form elements across a dynamically created components? but I was unable to figure out what he actually did to fix his issue.
Any thoughts?
See https://stackblitz.com/edit/angular-imi6j6?file=app%2Fapp.component.html for what I'm doing.
Wow... I just figured it out.
I was trying to add my subgroups to the parent via just assigning properties, but I should have been using FormGroup.addControl(new <FormGroup>).
Works perfectly now.
I am wondering if it is possible to have two ui-views one one site: both are child of the parent state. I want first ui-view to be dedicated to the first child, and second to the second one. Any ideas?
I'm not sure I entirely understand the question, but ui-views can be nested in any way to form a tree structure. This is done using the dot notation for states.
state1.state2
state1.state3
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
If you want to keep two views within the same state, you can use the ui-view name attribute to handle that. The linked page explains how toward the bottom.
From the linked page:
Really though, you'll use views to set up multiple views:
<div ui-view></div>
<div ui-view="chart"></div>
<div ui-view="data"></div>
And the JS:
$stateProvider.state("home", {
views: {
"": {
template: "<h1>HELLO!</h1>"
},
"chart": {
template: "<chart_thing/>"
},
"data": {
template: "<data_thing/>"
}
}
})
It's also worth mentioning that each view object here can have its own controller.
Information from comment stream:
The answer is no, there's no way to have two ui-views for separate sub-states. You would have to create one ui-view with two separate states under it, which would still only allow one to be shown at a time. I really think you're looking for two views in the same state, but without an example all I can do is guess.
Running into a problem while trying to implement Waypoints infinite scroll example from http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/.
Here is a JSFiddle to demonstrate my issue: http://jsfiddle.net/jmankin/75g6cap2/5/
HTML
<div class="infinite-container">
<div class="infinite-item">Not much content</div>
</div>
<a class="infinite-more-link"
href="/gh/get/response.html/jermifer/jsfiddle/tree/master/waypoints-infinite/"
>Loading...</a>
JS
var waypoint = new Waypoint.Infinite({
element: $('div.infinite-container')[0]
});
In instances where the 1st "infinite-more-link" is "above the fold" of the viewport on page load (i.e. the "inifinite-item" content is too short to require scrolling), the script correctly makes an AJAX call to the link href and loads the requested content.
However, it then prematurely--and seemingly incorrectly--proceeds to make the AJAX call to the 2nd "infinite-more-link" even though that is "below the fold" when it loads.
Secondly, from then on, scrolling to the bottom of the page (what would technically now be the 2nd "infinite-item" content element) will cause an AJAX call to the originally requested URL (the one that the client explicitly addressed), which is completely baffling. Under normal circumstances, it does this over and over again. In jsFiddle, it just does it the once, but that still gives you an idea of what I mean.
(Note: I'm not able to know ahead of time the length of the content I'd be loading, which is why I can't guarantee that the user will have to scroll down to see the 1st "infinite-more-link.")
I tried to contribute to solve this issue in the library in this link, please check that: https://github.com/imakewebthings/waypoints/issues/384 - Best wishes!
I have 2 goog.ui.component say component1 and component2 i have to render both.
var bottom_content = goog.dom.getElement('diag_details');
component1.render(bottom_content);
component2.render(bottom_content);
above code give error "Component already rendered".
Is there any way render multiple goog.ui.component.
The error message means that the component was already rendered, either directly or indirectly (it was a child of another element which was rendered).