I have a App with nested layouts. The top level layout being at the App level and the second level at one of its region. When I show the second level layout I trigger an event to show the regions of the second level layout. This works fine the first time but when I swap the second level layout with some other view or layout and display it again it fails. The problem is recreated at http://jsfiddle.net/mzafer/VLY4t/
In the screen click on "Content1" followed by "Content 2". You'll see the second level layout's region displayed ("This is the actual region1 content" & "This is the actual region2 content"). Now click on "Content1" followed by "Content 2" again.. this time the actual content is not displayed but just the placeholders. During the second time the "thisView.region1" is undefined.
Any idea what is causing the region to get undefined ?
Thanks
Zafer
There are two problems with the code.
First, you should be using MyApp.vent.bindTo() instead of MyApp.vetn.bind() to ensure proper management of the event.
Second, you need to unbind from the event when the layout view is closed. What's happening now is that, because you don't unbind, you end up with a closed view (the first instance) still trying to access its region elements, which no longer exist.
In the future, you can detect this by appending this.cid to your console.log statement. For instance:
console.log('Responding to an event.', this.cid);
I tweaked your code to make it work, with two changes mentioned above: http://jsfiddle.net/VLY4t/14/
Related
I have a standard Master > Details page in AngularJS setup using RouteProvider.
The Master page has a variation of "infinite scrolling" where Data can be added AND removed at both ends. Say, the user is looking at Contacts list, and has scrolled to 312th entry of the Contact List, only Contacts numbered 200-400 are kept, and the entries 1-200 are removed from Scope. Of course, when the user scrolls DOWN beyond 360, the list is appended with 401-500. And if the scrolls UP above 240, the list is "pre-pended" with 100-199.
Now, the user can click on a particular Contact and go to the Details page. Upon pressing 'Back' (window.history.back) how do I make the Master page re-render with,
Exact list 200-400 as it was when the page was left
Scrolled exactly to the position 312
(IMPORTANT) Listeners still listening correctly for scroll events beyond 360 or above 240?
Is this even possible? And if yes, please help me with how.
I'm not going to write code for this, it's a bit difficult without a deeper understanding of how your infinite scroll works but will offer some ideas
The first thing you would need would be to store the view state in a service and for more robust persistence ( page reloads or return visits) in localStorage synchronized with the service.
The main start point for the view state would be a start index so you know what to filter in your data array ... and either a length value that may or may not be constant in your app or an end index.
As for the scrolling you could use a scroll event handler in a directive to update the service object with offset scrollTop value in order to set on subsequent visit.... angular.element(containerElement)[0].scrollTop = service.scrollTop as a loose example
There is also $anchorScroll service that you could use by setting ID on each item
This won't give you a full solution but hopefully can get you started
Note that you will need to account for time it takes to render ng-repeat by defering to next digest cycle before trying to set scrollTop if you use that
I'm trying to understand why omnibug sometimes show load events as click events. When I first type in the URL all tags are listed as click events. If I reload the same page all the tags are shown as load events? Why the difference? I see this from time to time with omnibug, does anyone know what is actually defined as click events vs load events. Sometimes a load instead of a click can be a big issue, but Omnibug doesn't seem very reliable in this regard...
There is a known/reported bug in omnibug relevant to this. I heard through the grapevine it has to do with how the browser pre-fetches and/or caches requests. This also happens with Google/Universal Analytics entries.
For Adobe Analytics (Omniture), you can ensure it really is a click event (s.tl call) by expanding the row and looking for the following two items(should both be present):
Link type: This represents the 2nd argument to s.tl(), and is the pe= query param in the request URL. It should have one of these 3 values: "lnk_o","lnk_e", or "lnk_d".
Link name: This represents the 3rd argument to s.tl(), and is the pev2= query param in the request URL.
If these two things are not present, then it will be recorded as a page view request (s.t()) in Adobe Analytics (Omniture).
I'm building account system using sencha touch (architect) and now I have an issue where the code executed but the this.getMainView().pop(); NOT and the view states on current one !
my views:
Login scrn--> cstmrs list--> cstmr details--> rceipt--> checks
When I get to receipt view (without checks) the code executed and auto returned to customer's details view.
But soon I click to add a check to the receipt (only displaying the form without any code) the check view injected to mainview after that I click back button to return to receipt window, but now when I click save button the receipt is saved and the data arrives server side ok, but the big problem the this.getMainView().pop(); doesn't work or doesn't executed !!
Is there any wrong with my code? it works without displaying the 'checks' form !
Nothing in firebug/chrome debugger
I use this code to show forms:
var mainView=this.getMainView();
mainView.push({xtype: "frmChcks",title:'new check'});
And this code for getting back:
this.getMainView().pop();
Thank you in advice
Ahhhh it was because I used a hidden field called 'id', don't use 'id' for you components :-)
I'm trying to use AngularJS and Angular-UI-Bootstrap to create a WebApp but as I'm rather new with all this, I need some help. I'm using ng-repeat and an array to create a Tab interface.
Depending on an action in the first Tab, a second Tab is added to the interface or should be refreshed if it's already open. I've got the Tab working and have a check to make sure it isn't added again when it's already open.
The basic structure is the following: One controller (TabController) to control the Tab interface, and one controller (Tab1 and Tab2) for each Tab that's added to the interface.
Now, I have the following problem, the content of the second tab should change depending on data changed in the first tab. When the user confirms the data in the first tab, I execute a function in the TabController (to add / activate the second tab) that also changes some data in the scope. I can't seem to be able to detect the change in this data in de second tab, I've created a watch for the field, but it's only fired the first time the tab is loaded. If I use the field itself, the data is changed, but the watch doesn't fire. Anyone got an idea how I can get this to work? The data that changes should be used to make changes to other information, that's the reason I'm trying to use a watch and execute a function...
I've created a Plunker that should demonstrate in a simple example what the problem is and what I'm trying to do (I hope...)
DEMO
On the first Tab, there is a button to add a second tab (or activate it), as an example, I just increase a count that's displayed on both tabs. On the second tab, I have a local field on the scope that I fill with the global field using a $watch.
When starting the first time, the global count is one, after adding the second tab, both the global as the local count on the second tab are 2. When I go back to the first tab and click the 'Add tab' button again, the global count on both tabs is 3, but the local count on the second tab remains 2 and the watch isn't fired.
As I'm new to Angular (and web programming) I might be trying to do something that goes against all the best practices, so if someone has a better / different way to do what I'm trying to do, feel free to make any suggestions.
Your watch expression was incorrect, the correct expression would be
$scope.$watch("tabCount",
function() {
$scope.localCount = $scope.tabCount;
})
}
instead of
$scope.$watch($scope.tabCount,
The first one means you want to watch on a variable tabCountdefined over the scope.
In our project we use ZK for webpages. There is a combobox which has lists. When selected, it fetches data from a java object through onSelect, i have given the logic.
when i select one there are 4 listboxes on that page to be filled with data according to the selection. when i select first time, no problem occurs.
But on second time i get an error pop-up like "Not Unique in the id space of Window" and showing the list box item id which have to be filled on select.
Can any one help out there?
Note: Though it shows this error i get the listboxes filled correctly according to the combo box selection. Still i cant stop this error occurring..
Your issue is a conflict of ids in ZK's id space.
A bit of background..
ZK generates ids for components at runtime, if you open up the DOM in the browser you'll see each component has some machine readable id.
However, you can also give components an id. This id does not go to the DOM but lets you reference the component in your application.
These two shouldn't be confused. The conflict you're experiencing is with the latter type of id; you are assigning a component an id in your Java code or in your ZUL file which, at runtime, is not unique.
The case you describe where it only happens the second time you click is a tell tale sign here. The content you are adding on the event has an id defined in it and you are not removing this content when you are done.
Consider the following example:
#Wire
private Window myWindow;
#Listen(Events.ON_CLICK + " = #myButton")
public void onMyButtonClicked() {
Label myLabel = new Label("sean is cool");
myLabel.setId("myLabel");
myLabel.setParent(myWindow);
}
This will work the first time you click myButton, but will throw your error on the second click. That is because the second event tries to add myLabel to myWindow but there is already a myLabel there.
There are lots of ways to resolve this depending on what you are trying to do.
Have a look through the ZK documentation on ID Spaces for more.
I also faced the same error.
My scenario is the same, only the widgets being used are different.
Hence putting my workaround here.
I have put the following piece of code in the doBeforeCompose() method of the composer:
Component widgetWithId = page.getFellowIfAny("widgetWithId");
if (widgetWithId != null) {
widgetWithId.detach();
}
Here widgetWithId is the component/widget, which is tried to be regenerated by the code, with the same Id and ZK is throwing error for it.