×

Discussion Board

Results 1 to 4 of 4
  1. #1
    Registered User
    Join Date
    Mar 2005
    Location
    Hamburg, Germany
    Posts
    280

    occlick-event-handling in nested tags different in cloud-preview than on phone

    Hello developers,

    I found some subtle difference between cloud preview and phone.
    It is in the example code of the "blog example"
    (if I have not changed it too much in the meantime)

    After RSS-Generation, there are nested div's with onClick-Handlers:

    Code:
    <div id="main_screen" class="ui-show" onclick="mwl.switchClass('#nav-back', 'ui-hide', 'ui-show'); >
      <div onclick="mwl.setGroupTarget(....);">...</div>
      <div onclick="mwl.setGroupTarget(....);">...</div>
      <div onclick="mwl.setGroupTarget(....);">...</div>
      ...  
    </div>
    The idea is that each link switches to it own page, but the back-icon is always switched to visible.
    Because of the nesting it is less code, the javascript for the back-icon is only needed once.

    This trick works on local preview, it works with cloud preview,
    but it does not work on my Asha 311. The back button is no longer switched to visible.

    So it looks like we need to write more code here.

    Regards

    Karsten Meier

  2. #2
    Wiki Moderators
    Join Date
    May 2007
    Location
    21.46 N 72.11 E
    Posts
    3,779

    Re: occlick-event-handling in nested tags different in cloud-preview than on phone

    Hi Karsten,

    I wouldn't call the provided 'blog example' a very well written template. All the feed data is fetched at once without any pagination, performance-wise it results to around 200Kb data on the S40 browser (very slow if not on WiFi).

    To make the UI work properly - you could remove the onclick statement from the main_screen div.

    Code:
     <!-- removing onclick from main_screen div in main.html-->
    <div id="main_screen" class="ui-show">
    </div>
    You can use this statement in the div in the parseRSS function in blogging.js file.
    Code:
    // Adding onclick="mwl.switchClass('#nav-back', 'ui-hide', 'ui-show');" to the post-main div // line 36 blogging.js
    main += '<div class="post-main ' + className + '" onclick="mwl.switchClass(\'#nav-back\', \'ui-hide\', \'ui-show\');mwl.setGroupTarget(\'#screens\', \'#blog_posts\', \'ui-show\', \'ui-hide\');mwl.setGroupTarget(\'#blog_posts\', \'#post' + (i+1) + '\', \'ui-show\', \'ui-hide\');">';
    I would also remove the onclick from the header td with class header_table_td_height. This should just be on the back td and not on the header td.

    Code:
    <!-- removing onclick from header td in main.html-->
    <td class="header_table_td_height"><div class='ui-title' ><h2>BlogExample</h2></div></td>
    Hope that helps.
    Pankaj Nathani
    www.croozeus.com

  3. #3
    Registered User
    Join Date
    Mar 2005
    Location
    Hamburg, Germany
    Posts
    280

    Re: occlick-event-handling in nested tags different in cloud-preview than on phone

    Thank you,

    yes, It works when I attach an additional mwl-call to each click-handler.
    Only problem is that the onClick-handler mutates into an monster line, and you must take care to get all the quotes right.
    Writing javascript that writes html that includes javascript is not much fun.

    About the blogging-example:
    I liked that the screens are build in advance, and the article is displayed immediately with the mwl()-methods.
    But in my use case the articles a quite short, and I have limited the number of feed items.
    The reported data usage is 35kb on the phone, so I hope this is usable in the real world outside my office.
    Some further reduction would be that an image of the article is loaded on demand, but this seems more difficult.

    Reagrds

    Karsten Meier

  4. #4
    Wiki Moderators
    Join Date
    May 2007
    Location
    21.46 N 72.11 E
    Posts
    3,779

    Re: occlick-event-handling in nested tags different in cloud-preview than on phone

    Quote Originally Posted by internetlabor View Post
    Thank you,

    yes, It works when I attach an additional mwl-call to each click-handler.
    Only problem is that the onClick-handler mutates into an monster line, and you must take care to get all the quotes right.
    Writing javascript that writes html that includes javascript is not much fun.
    I know what you mean. When the dynamic HTML gets bigger, I find it efficient to use the single quotes in the HTML code and double quotes for javascript.

    For example, the following looks prettier,
    Code:
    main += "<div class='post-main " + className + "' onclick='mwl.switchClass('#nav-back', 'ui-hide', 'ui-show');mwl.setGroupTarget('#screens', '#blog_posts', 'ui-show', 'ui-hide');mwl.setGroupTarget('#blog_posts', '#post'" + (i+1) + "', 'ui-show', 'ui-hide');'>";
    Quote Originally Posted by internetlabor View Post
    I liked that the screens are build in advance, and the article is displayed immediately with the mwl()-methods.
    Yes, mwl methods are executed locally, setGroupTarget and switchClass are the best methods to do view switching.

    Quote Originally Posted by internetlabor View Post
    But in my use case the articles a quite short, and I have limited the number of feed items.
    The reported data usage is 35kb on the phone, so I hope this is usable in the real world outside my office.
    35 Kb should be pretty much usable.
    Last edited by croozeus; 2013-03-21 at 18:01.
    Pankaj Nathani
    www.croozeus.com

Similar Threads

  1. Cloud preview not work since Sep 7
    By zhoun in forum Nokia Asha Web Apps
    Replies: 11
    Last Post: 2013-04-23, 12:30
  2. jquery ajax call works local but not in cloud preview: No Transport
    By internetlabor in forum Nokia Asha Web Apps
    Replies: 4
    Last Post: 2013-04-10, 17:04
  3. 'Expectation failed' error when trying to do cloud preview
    By ariefbayu in forum Nokia Asha Web Apps
    Replies: 6
    Last Post: 2012-04-11, 07:21
  4. Cloud :: Developer Convention '11 in Hamburg (Cloud Hackathon)
    By renebuest in forum News and Announcements
    Replies: 1
    Last Post: 2011-10-31, 11:07
  5. Handling custom tags in series60 3rd edition
    By Shilpa13 in forum Symbian User Interface
    Replies: 0
    Last Post: 2006-09-07, 10:38

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •