jQuery Mobile Framework and Solar Mobile
Is anyone else finding issues using the beta versions of the jQuery mobile framework with the Solar Mobile theme?
I initially installed it successfully using the alpha build. It worked great on my mobile devices and Firefox via desktop, but I noticed that IE 9 would not load the styles. Through experimentation I found that using the beta build of the framework would present some of the styles, but not as clean as it still looked in Firefox (mostly rounded corners were showing artifacts and such). The problem that switching to this beta build has presented is that I can no longer edit pages when logged in with Firefox. I just see the Sitefinity toolbars, but where my page should be is all white.
Is it possible for me to detect when I am logged in and trying to manage that page so that I can disable the jQuery mobile framework scripts from loading? I am guessing this is what is causing the issue.
I have attached an image that shows what I see in Firefox with the latest beta 2 release of the framework.
Hi Stacey,
Let me clarify what you need - you want to be able to detect when you are logged in on the frontend or on the backend? You can use for example SecurityManager.GetCurrentUserName() - if it returns an empty string then you are not logged in. Also there is the LogicStatus control that you could drop on your page.
Please give me more details about your requirements.
I want to check for when someone is logged into the backend so that I can disable some scripts. These scripts are keeping me from being able to edit my mobile pages.
The SolarMobile masterpage has the following scripts referenced:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).bind("mobileinit", function() $.mobile.ajaxLinksEnabled = true; $('.blog-link').live('click',function() if($(this).attr('changedHref')=='true') else $(this).attr('changedHref', 'true'); $currenthref = $(this).attr('href'); $(this).attr('href', '../../'+$currenthref); ); ); </script> <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>Hi Stacey,
Ok, could you please elaborate what do you want to achieve - your idea with the panel is a good one. Do you report problems with the new version of jQuery or you ask how exactly to implement the verification whether there is a logged user or not?
All the best,Lubomir,
My goal is to be able to use the Solar Mobile template without having to comment out the script tags that are present on the SolarMobile.master file each time that I wish to make content edits through the Sitefinity backend.
I was not specific enough with the question about detecting if someone is logged in. I found a thread that discusses how to do this, but I forget where it is at the moment. I think all I really need to do is check if the page(s) using the mobile template are in edit mode and if so to disable the scripts from loading so that they do not interfere with Sitefinity's ability to edit pages. I have already illustrated what the problem is with the screenshot at the top of this thread, although I did determine it is not just in Firefox, but in IE and probably other browsers as well. If those scripts are not commented out...or removed then they destroy any ability for me to edit a page through Sitefinity.
I was talking about the issues with jQuery just to discuss that I do not think it is necessarily a problem with how Telerik put the template together, because at the time of the template release the jQuery Mobile Framework was only in its alpha release. Since then they have released 2 more versions in beta and those new versions seem to be the culprit for whatever reason.
I have not had the time to deeply investigate why the scripts would interfere with Sitefinity in edit mode, but was looking for some ideas that I can try when I do get a chance to put more work on it.
Hi Stacey,
We have tested the problem and actually the problem with the page layout in edit mode isn't from the mobileinit function but just the CSS files and the rules that are applied after the mobileinit. There is no difference if you are going to disable the styles or the initializing script. Here is a good thread explaining how to check if you are in design or preview mode:
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/scripts-in-edit-mode---bug.aspx
All the best,
Jordan
the Telerik team
Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>
Hey Stacey,
Here's what I did:
<!DOCTYPE html> <html> <head id="head1" runat="server"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.css" /> <telerik:RadCodeBlock ID="loadjqueryMobile" runat="server"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js"></script> </telerik:RadCodeBlock></head>protected void Page_Load(object sender, EventArgs e) litHomeNav.Text = string.Format(@"<a href=""0"" data-icon=""home"" data-iconpos=""notext"" rel=""external"" class=""ui-btn-left jqm-home"">Home</a>", this.ResolveUrl("~/mobile/")); if (this.Page.IsDesignMode() | this.Page.IsInBrowseAndEditMode()) loadjqueryMobile.Visible = false; Thanks for the input Joel and Jordan. Your code with the RadCodeBlock is exactly what I had in mind. I have been slow getting back to here due to other projects, but wanted to say that it is working for me this way as well. Ideally down the road we could find a better way, but this works for now.