Navigating to HTML5 page division on a mobile device

[former_member186695]

Hello experts!

I'm designing my first app using BSP/HTML5 (JQuery) on the principle of one html with multiple page division following John Moy's excellent [blog series|http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/22129] [original link is broken] [original link is broken] [original link is broken];. One problem that I'm facing (among others) is that when I try to direct the user to one of the page division, it doesn't work out with the mobile device (works on the browser though). On the mobile device the user still lands on the home page (main.do) E.g. in John's example, to direct the user directly to #emp_svc so the end url would look ...sap/<BSP APPLICATION>/main.do#emp_svc.

Any suggestions/solutions?

best regards,

Asim

[Former Member]

Hi Asim,

could it be a browser issue? If you say it works fine on Desktop browser - how does it look on other devices - and - which device are you using for test?

Regards,

Oliver

[former_member186695]

Hi Oliver,

I've tested in Chrome and Firefox, works great, as I mentioned in my question. Now I've moved on to testing this on the actual mobile devices. Devices tested so far BB, iPhone and iPad. All on updated OS.

I've gotten a lead in JQuery Mobile documentation and I quote "PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (index.html#foo) on a page in jQuery Mobile, because the framework will look for a 'page' with an ID of #foo instead of the native behavior of scrolling to the content with that ID." (http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-pages.html)

That in my opinion should not be the end of it. There should be a way. So I'm still keeping this question open and would appreciate if someone comes across a solution.

Thanks and best regards,

Asim

[former_member182638]

Hi Asim,

I picked up on this thread because Martin Lang retweeted it on Twitter!

I can tell you I do have this working on my device. In the page division that is returned by BSP, it needs to simply be the page fragment that jQuery Mobile will 'hijack' and insert into the HTML DOM for the original page. You need to make sure the page fragment has a unique idenfication.

So, for instance, in my own BSP definition I am in one situation returning details for a customer, with a BSP view (NOT a BSP fragment) called 'customer.htm' called from the controller as follows ...

l_view = create_view( view_name = 'customerdetails.htm').

*   Set the message
  l_view->set_attribute( name = 'ls_customer' value = ls_customer ).

*   Call the view
  call_view( l_view ).

This view has the following type of markup ...

<div data-role="page" id="customer_<%= ls_customer-kunnr %>">
  <div data-role="header">
    <h1>Customer</h1>
  </div>
  <div data-role="content">
  ... etc.
</div>

The important thing here is ... id="customer_ ...etc

One other word of warning.... jQuery Mobile is in alpha release. I have this working with alpha 2 version, but I know that alpha 3 is now out and alpha 4 is pending. Make sure to begin with your javascript references are to alpha 2 version, before you try linking to the next alpha (as I have yet to test that properly myself). I do intend when the full release is out to possibly publish patterns of use for this.

Tell me how you go.

Rgds

John

[former_member186695]

Hi John,

Thanks for picking up the thread. Martin is a great guy and colleague. I've already thanked him for retweeting my tweet and actually this is one of his sponsored projects that I'm currently working on.

Just to get this out of the way, I am currently using alpha 2 version. What I understand from your example is that you are inserting customer details in the existing app. Is that correct? If I understand this correctly then that was not my question. What I'm trying to do is to navigate to one of the existing div data-role="page" on a mobile browser. If I didn't understand that, please bear with me. Currently there are two views one main and the other for returning messages as you described in your blog. So here is my BSP View (main.htm).

<!-- Home Page -->
<div data-role="page" data-theme="b" id="home">
  <div id="homeheader">
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
      <li><a href="#create">Create Request</a></li>
      <li><a href="#release">Release Request</a></li>
    </ul>
  </div>
</div><!-- /Home Page -->

<!-- Create Request Page-->
<div data-role="page" data-theme="c" id="create">
  <div data-role="header" data-theme="a">
    <a href="#home" data-icon="arrow-l">Back</a>
    <h1>Create Request</h1>
    <a href="main.do" rel="external" data-icon="delete" id="cr_clear">Cancel</a>
  </div>
  <div data-role="content">
  <form id="create_request" action="" method="">
     <fieldset>
     <div data-role="fieldcontain">
        ...
       <input type="submit" name="submit" class="button" id="create_button"  value="Create"></input>
     </fieldset>
  </form>
  </div>
</div><!-- /Create Request Page-->
 
<!-- Release Request Page-->
  <div data-role="page" data-theme="b" id="release">
  <div data-role="header" data-theme="a">
  <a href="#home" data-icon="arrow-l">Back</a>
  <h1>Release Request</h1>
  </div>
  <div data-role="content">
    <form id="release_request" action="" method="">
      <fieldset>
         <label>Transport request</label><br>         
         <input type="submit" name="submit" class="button" id="release_button"  value="Release"></input>
      </fieldset>
    </form>
  </div>
  </div><!-- /Release Request Page-->

All I want is to reach in and display the page with "create" or "release" from the url. e.g.

https://sap.com/sap(bD1lbiZjPTAwMQ==)/bc/bsp/sap/zarm_test2/main.do#create or

https://sap.com/sap(bD1lbiZjPTAwMQ==)/bc/bsp/sap/zarm_test2/main.do#release

Or quoting from your example, if the kunnr = '0000002235'

customer.do#customer_0000002235 would open the customer detail page in the mobile browser without stopping at the welcome page.

I hope this clarifies my question further.

Thanks and best regards,

Asim

[Former Member]

Well actually your code snippet looks as it is supposed to be, and it is working this way for me.

I would recommend you to check your html markup, could be, that soemthing there crashes on your mobile device. Then i would activate the Debug-Console on your iphone or whatever (Settings-Safari-Developer or similar) and check, if it is maybe a JavaScript Issue.

And as this is a Jquery-Mobile Problem, you could also ask on their forums.

Hope this helps a bit...

[former_member186695]

Hi Benni,

Thanks for commenting. There were already open threads in [JQuery Mobile forum|http://forum.jquery.com/topic/mobile-changepage-not-working-for-multipages] about inability of doing this. I've raised my hand there too so if someone replies or JQuery Mobile resolves this, I'll get to know as well. So my script as well as the page passes the console with flying colors, for now

Meanwhile what I ended up doing was to pass another parameter to the BSP instead of the anchor and based on the parameter value formed my page. So the welcome screen and other pages are skipped on the basis of this parameter. So the url now looks like:

https://sap.com/sap/zarm_test/main.do?iv_rt=create&iv_request_no=25

instead of what I wanted to do

https://sap.com/sap/zarm_test/main.do?iv_request_no=25#create

Am closing the thread but would still be on a look out for a better solution. If I find one I might write a blog about it