Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

All other Modules /

Discuss all other Modules here.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Mobile module jquery navigation hack


Go to End


2 Posts   1616 Views

Avatar
Spaghetti

Community Member, 32 Posts

25 April 2012 at 3:18am

Hello,

I've been hacking the jquery mobile theme which comes with the mobile module, to get it to work properly. I'll explain why and what I've been doing but first, here's my site structure:

Home
Portfolio
-- Portfolio Project 1
-- Portfolio Project 2
Contact
...etc

So the problem I've been having is when you visit a nested page, it seems to 'forget' where the home page is and if I go into the portfolio project 2 and then click back to 'home', it takes me to 'portfolio' instead. Also, if I click from projects to contact and then click home, it takes me to portfolio! I'm confused because the page source still shows the right address. I think it's ajax issue.

On the jquery mobile site, it says something about 'all links must end with a slash in order to be fetched with ajax' - fair enough, but they all are.

Anyway, I have got a work-around, but I don't like it too much, because it involves sticking 'home/' on the end of the address bar, which looks kind of ugly but it's preferable to messing up navigation. So here's my fix if anyone's interested. It will probably save you hour of stress:

in the navigation.ss file:

<% if URLSegment == home %>
<li class="$LinkingMode">
<a href="{$AbsoluteLink}home/" data-role="button" data-transition="flip"
class="<% if isSection %>ui-btn-active<% end_if %>">
$MenuTitle
</a>
</li>
<% else %>
...etc

and you do a similar thing to the home button on the page.ss page:

<a href="{$Page(home).AbsoluteLink}home/" data-role="button" 	data-icon="home" data-iconpos="notext" data-transition="flip">	Home </a>

Hope that helps but if anyone has a better idea, I'm all ears...?

Avatar
pali

Community Member, 33 Posts

27 April 2012 at 8:55pm

Hello,

same issue here, fixed as following (place in Page_Controller):

		function HomePageLink() {
			return trim($this->BaseHref(),"/");
		}

and in SS theme calling $HomePageLink in href attribute...

It looks like jquery mobile detects any first loaded page as a equivalent to homepage "/".