Design and CSS styles
Version 5.x > Design and CSS styles > jQuery Mobile View modes: 
User avatar
Member
Member
adam.ferguson-williams-forrest - 5/10/2011 4:12:51 PM
   
jQuery Mobile
Has anyone successfully integrated jQuery Mobile with Kentico? There seems to be a conflict when I add the reference.

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 5/12/2011 3:24:04 AM
   
RE:jQuery Mobile
Hello,

Kentico CMS uses jQuery. If you want to register the script, please use the API method:
CMS.GlobalHelper.ScriptHelper.RegisterJQuery(Page)

it will avoid the duplicate references. Then only register the mobile extension.

Best regards,
Helena Grulichova

User avatar
Member
Member
chrishaff-gmail - 8/28/2011 2:35:26 PM
   
RE:jQuery Mobile
I'm using Portal Engine, so the above doesn't mean much to me.

The issue doesn't seem to be with JQuery as that jQuery Mobile is rather aggressive about changing the DOM based on the structure of the document and I can't seem to get Kentico to stop injecting cruft (viewstate, forms, (hidden) divs, etc.) that I did not specify.

There seem to be two issues:
(1) jQ mobile really messes up CMSDesk and makes it unusable by breaking (submit) functionality and visually messing things up.
(2) I could detect if we're in a frameset (Kentico) and then just inject the jQ mobile when we're not in that context. However, the cruft that is still injectet in live messes up the site.

What steps need to be taken to pull out the extra stuff?


User avatar
Kentico Support
Kentico Support
kentico_zdenekc - 9/6/2011 9:23:24 AM
   
RE:jQuery Mobile
Hi,
There's no option to remove the surrounding stuff that's rendered in HTML in the administration interface mode.
You can only detect when the page is viewed in Live site mode and if the browser device is a mobile and only then load the jQuery Mobile.

The livesite viewmode can be detected as:
CMSContext.ViewMode == ViewModeEnum.LiveSite

Mobile device browser can be detected using our BrowserHelper:
CMS.GlobalHelper.BrowserHelper.IsMobileDevice();

You're using Portal Engine, therefore the code has to be placed somewhere outside of admininstration interface. You have about two options where to put that logic:
If you're using jQuery Mobile functionality everywhere, place it in
~\CMSPages\PortalTemplate.aspx.cs

if only in specific parts of the site, you could create you own web part and use the code in it's code-behind.

Hope this will help.
Regards,
Zdenek C.