Problem dynamically loading headings/toolbars

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Problem dynamically loading headings/toolbars

astronomer
I am new to Dojo, but have two solid weeks reading and experimenting and am mostly happy with it all. This is my first post here.

I have an action that I need to implement and will describe it instead of posting pickings from the various approaches I have tried. I think I have a good handle on both old-style and AMD loading and am mostly using old-style, but do not think that determines my problem/solution.

The page:
I create a simple page with a default view DIV (-type=dojox.mobile.View).
It includes a dojox.mobile.Heading and ...RoundRectList with several ...ListItem elements.
Some of the ListItem elements transition to other views using the moveTo mechanism.

All works OK, but I have one ListItem that I need to work as follows and have not found a suitable method:

1. User clicks and it transitions to a ScrollableView with ...Heading and ...ToolBar children.
* Heading has current month name as label and includes a "back" button to return to the top level view.
* ToolBar has four buttons - two previous months and two following months
* Main content is an HTML formatted calendar with additional embedded links
(Everything OK to this point)

2. When user clicks a month button (ToolBarButton) I need to dynamically create and transition to a new ScrollableView which includes new named Heading and Toolbar buttons for the selected month.
3. Additionally, when the user uses the back button to return to the top level, then once more returns via the ListItem to the calendar view, I need to show the last viewed calendar month. I do this now by destroying the original ScrollableView after transition and replacing it with a copy of the new one with same ID - seems to work OK.

My AJAX target correctly generates and returns everything (I can easily structure it as needed for my page) - but I remain a little mystified about CORRECTLY getting it all into a newly created ScrollableView. I have it all working if the callback loads it into a contentPane, but structurally that breaks either the CSS or the back link because the loaded Heading and ToolBar are children of the contentPane - not the ScrollableView.

As well as I have been able to define the problem it comes down to this:

The Heading and ToolBar MUST be loaded via AJAX.
Loading into the ScrollableView.innerHTML does not work
Adding a contentPane within the ScrollableView mostly works, but is not structurally correct.

I can generate the entire structure if needed, including the ScrollableView DIV element, but where would I load that "to" and how would I parse it? This has eluded me...

So my question is - can someone please explain, by example if possible, how to load a ScrollableView's innerHTML from AJAX response, or alternatively create and parse a new DOM element from a complete response which includes the ScrollableView element?

I hope that is clear - sorry for the length. If some examples of what I have tried would help I'll be happy to post them.

Thanks in advance.

Robert
Reply | Threaded
Open this post in threaded view
|

Re: Problem dynamically loading headings/toolbars

Adrian Vasiliu
Hi,
Maybe you did it already, but if not, you may want to search in dojox/mobile/tests for a closest match to your needs. I'm not sure there's one doing exactly what you want, but some are doing ajax loading of content. 
Adrian


________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Problem dynamically loading headings/toolbars

astronomer
In reply to this post by astronomer


 

----- Original Message -----

From: Adrian Vasiliu

Sent: 05/26/12 02:22 AM

To: [hidden email]

Subject: Re: [Dojo-interest] Problem dynamically loading headings/toolbars


Hi,

Maybe you did it already, but if not, you may want to search in dojox/mobile/tests for a closest match to your needs. I'm not sure there's one doing exactly what you want, but some are doing ajax loading of content. 
Adrian
 


Thanks Adrian. Yes I have been through the mobile/test pretty thoroughly. I started my project from some test templates and got everything working except dynamically loaded ScrollableViews.

I can programmatically create them and their Heading and TabBar elements. But what I need is to be able to load everything, including the Heading and TabBar from AJAX - no luck yet.

Robert


 


________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: Problem dynamically loading headings/toolbars

astronomer
In reply to this post by Adrian Vasiliu
Hello again Adrian,

For closure on this post I wanted to let you know that I have now resolved my problem! And of course, your advice to revisit the test cases - again - provided the solution.

Instead of continuing to make my existing code work, I took the rip-up-and-retry approach, and designed again from scratch, validating with modified test cases - and went rather directly to a working app!

Clearing the work area is always helpful with problem implementations, and I suppose starting fresh with the dojo familiarity gained over the past couple of weeks did not hurt!

So, for completeness for anyone with a similar need, I now handle it like this:

1. Page HTML now includes two empty calendar ScrollableViews - cal1 and cal2
2. Top level "li" onclick() calls my own loadCal(li,mn,yr) handler with NULL mn-yr as default
3. loadCal() detects if any calendar has been previously loaded via loadCal.state var
    3.a If not loaded, uses xhrGet() to fetch current cal into cal1.containerNode (parse(cal1.containerNode), transition to cal1 in callback)
    3.b If previously loaded, simply transitions to existing state of cal1
4. Fetched calendar content includes ToolBarButtons encoded for previous/next month, onclicks to loadCal()
5. When ToolBarButton is selected loadCal() determines current/next view states -
   5.a next.destroyDescendants(), xhGet()->next.containerNode.innerHTML, then parse(next.containerNode)
   5.b current.performTransition(next..., callback())
   5.c Transition callback: If xhrGet() was to cal2 then destroy/set cal1 containerNode = cal2 containerNode
6. When user returns to top level, then uses "li" to re-enter calendar, they always see cal1 which is always last state


The loadCal() handler including xhrGet() callback and all handling is now clean and compact - much better than before.

Now I wonder what I was trying to do before that was so awful! Thanks for the focus!

Robert


 

----- Original Message -----

From: Adrian Vasiliu [via Dojo Toolkit]

Sent: 05/26/12 02:23 AM

To: astronomer

Subject: Re: Problem dynamically loading headings/toolbars


Hi,

Maybe you did it already, but if not, you may want to search in dojox/mobile/tests for a closest match to your needs. I'm not sure there's one doing exactly what you want, but some are doing ajax loading of content. 
Adrian
 

________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation

[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest



If you reply to this email, your message will be added to the discussion below:
http://dojo-toolkit.33424.n3.nabble.com/Problem-dynamically-loading-headings-toolbars-tp3985785p3985788.html
To unsubscribe from Problem dynamically loading headings/toolbars, click here.
NAML