Popup confusion

edited October 2012 in Newbie Questions
I have an image icon in a toolbar whose ontap is supposed to show a popup. Beneath this toolbar is a list of items. When the user taps an item another list is shown. At the top of this list is another toolbar with another image icon. When that icon is tapped, a popup (actually the same popup) is supposed to show.
Here's the problem. If you tap the first icon you see the popup. If you tap it a hundred times you see the popup. However, if you then choose a list item and the 2nd toolbar shows up, it will never show the popup when that icon is tapped. I've placed alerts in each of the methods to test whether the individual methods are called and they are indeed called, but the popup will not show.
If you do not tap the first icon but instead go to the second icon, the popup will show but then the first icon will not show it.
So, the pop up only works for one icon. It has to do with the two renderInto's I guess, but I've also tried completely different popup vars and separate kind definitions and it always behaves this way. It's driving me crazy.
BTW, if you tap the first one, then go to the second one and then return to the first, it does not show.

I hope one of you can point me into the right direction,

thanks!

Comments

  • Code would be nice...
  • edited October 2012
    Here's some code..
    enyo.kind({
    	name: "myPopup", kind: "onyx.Popup", centered: true, floating: true,  onHide: "popupHidden", classes:"onyx-popup", style: "padding: 10px;", 
    			components: [
    				{tag: "div", classes: "mypopuptxt", content: "App by:"},
    				{tag: "img", src: "assets/my200.png"},
    				{tag: "br"},
    				{tag: "div", classes: "mypopuptxt", content: "\xA9 2012"},
    				{tag: "br"}
    	],
    	showPopup: function(inSender, inEvent) {
    	        this.$.myPopup.show();
    	    },
    	popupHidden: function(inSender, inEvent) {
    	        // do something
    	        this.$.myPopup.hide();
    	    }		
    	
    });
    
    var v = new myPopup();
    
    enyo.kind({
    	name: "setlist",
    	classes: "list-pulldown enyo-fit onyx",
    	kind: "FittableRows", //"enyo.Control",
    	components: [
    
    		{kind: "onyx.Toolbar", components: [
    
    			{kind: "Image", src: "assets/ingman.sm50w.png", ontap: "showit"},
    						
    			{name: "title", content: " Request Sets", classes: "Title"},
    			{name: "imageSpinner", style:"border-radius:5px; padding:15px", components: [
    			{kind: "onyx.Spinner", showing: true}
    			]} 
    		]},
    	
    
    		{name: "list", kind: "List", classes: "list-pulldown-list", fit: true,  onSetupItem: "setupItem", onPullRelease: "pullRelease", onPullComplete: "pullComplete", components: [
    			{name: "item", style: "padding: 10px;height: 50px;", classes: "list-pulldown-item enyo-border-box", 
    			ontap: "itemTap", components: [
    				{name: "sent", tag: "div", style: "word-wrap: break-word;", allowHtml: true},
    				{name: "eindex", tag: "span", style: "display:none;"}
    				
    			]}
    		]}
    	],
    	showit: function() {
    		alert("in showit");
    		v.show();
    		
    			
    	},
    	...
    2nd bar ....
    enyo.kind({
    	name: "myPopup2", kind: "onyx.Popup", centered: true, floating: true, onHide: "popupHidden", classes:"onyx-popup", style: "padding: 10px;", 
    			components: [
    				{tag: "div", classes: "mypopuptxt", content: "App by:"},
    				{tag: "img", src: "assets/my200.png"},
    				{tag: "br"},
    				{tag: "div", classes: "mypopuptxt", content: "\xA9 2012"},
    				{tag: "br"}
    	],
    	showPopup: function(inSender, inEvent) {
    	        this.$.myPopup2.show();
    	    },
    	popupHidden: function(inSender, inEvent) {
    	        // do something
    	         this.$.myPopup2.hide();
    	    }		
    	
    });
    
    var v2 = new myPopup2();
    
    enyo.kind({
    	name: "ListApp",
    	kind: enyo.Control,
       // declare 'published' properties
        published: {
           
        },	
    	layoutKind: "FittableRowsLayout",
    	classes: "onyx",
    	components: [
    		{kind: "onyx.Toolbar", components: [
    			{kind: "Image", src: "assets/ingman.sm50w.png", ontap: "showit"},
    			{ tag: "button", content: "B", ontap: "sessions" },
    			{name: "Title", content: "s ",classes: "Title", style: "padding-right: 30px"}
    			
    		]},
    		{kind: "enyo.Scroller", fit: true, components: [
    			{tag: "div", name: "List" },
    			{ tag: "button", content: "Return to Sets", ontap: "sessions" },
    			{name: "imageSpinner", kind: "onyx.Spinner", classes: "onyx-light", showing: true}
    		]}
    		
    	],
    	showit: function() {
    		alert("in showit from 2nd bar");
    		v2.show();
            },
    ...
    			
    	},
  • Please use pre/code tags to wrap code fragments you post on the forum. I edited your post to include them. See http://forums.enyojs.com/discussion/399/read-this-before-asking-questions for details.
  • edited October 2012
    OK, a few code notes.

    When defining new kinds, its a good idea to always use uppercase names. JavaScript convention is that constructors start with a capital letter, and since enyo.kind() creates a new constructor based on your name, it's a good practice to get into.

    In your myPopup.showPopup code, you're using this.$.myPopup, but you don't have any components named myPopup. You probaby want to use this.show instead. The same goes for myPopup2. However, you're not actually using those methods, so that's not the problem.

    Usually, rather than explicitly creating a popup in a new variable, you just have it as another component in your application and have it created with the other kind instances in your components block. Since popups are invisible until shown, there's no penalty for doing it that way.

    Look at the code in our Popup sample at https://github.com/enyojs/onyx/blob/master/samples/PopupSample.js.
  • Thanks unwiredben, I checked out the sample code and altered mine to be exactly like it. Still the same issue however.
    I verified that if I do a second renderInto that even the sample code will not show the popups. It will work if the second call is a show() but that doesn't help my app since I am creating a new gui each time.
  • Have you tried destroy / create rather than renderInto?
Sign In or Register to comment.