Home Dashboard Directory Help
Search

ASP.NET MVC 4 Mobile Template - incorrect script tag placement by jwatkin


Status: 

Active


2
0
Sign in
to vote
Type: Bug
ID: 785962
Opened: 4/30/2013 4:05:32 PM
Access Restriction: Public
0
Workaround(s)
view
1
User(s) can reproduce this bug

Description


For the ASP.NET MVC 4 Mobile project template, the automatically generated default sample _Layout.cshtml puts the script tags just before the the closing body tag, but this typical script loading optimization doesn't work with JQuery Mobile. Instead, for JQuery Mobile, one needs to put the following in the "head" tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <link href="<application CSS>" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="<application JavaScript>"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Details
Sign in to post a comment.
Posted by Microsoft on 8/15/2013 at 8:18 PM
Please reopen the issue if you are still experiencing problems.
Posted by Microsoft on 8/15/2013 at 8:18 PM
Please reopen the issue if you are still experiencing problems.
Posted by Microsoft on 5/2/2013 at 11:55 PM
Thank you for submitting feedback on Visual Studio and .NET Framework. Your issue has been routed to the appropriate VS development team for investigation. We will contact you if we require any additional information.
Posted by jwatkin on 5/2/2013 at 12:52 PM
I'm able to reproduce this error again, but only after updating JQuery Mobile to 1.3.0 (the latest from NuGet) or 1.3.1 (the latest from JQuery Mobile), and only when using IE 10 on the desktop. However, unless I'm mistaken, my recollection is that I experienced this with other browsers when I originally reported it. I'm looking for definitive documentation from JQuery Mobile regarding the placement of its libraries in the head tag.
Posted by jwatkin on 5/2/2013 at 11:06 AM
I'm actually having trouble reproducing this now myself, but you can see from my attached files from April 30 that I was able to reproduce the problem at will, and this was on multiple browsers. I'll look into this further and report back to you.
Posted by jwatkin on 5/2/2013 at 10:22 AM
It's better that you create your own sample project to demonstrate that this will happen to everyone:

1. Open Visual Studio 2012 (I'm using Ultimate)
2. Open File/New Project...
3. Select Visual C#/Web/ASP.NET MVC 4 Web Application
4. Click "OK"
5. Select the "Mobile Application" template
6. Click "OK"

Open the the project View/Shared/_Layout.cshtml file and observe that the JQuery Mobile script tags aren't in the head tag where they need to be. Unlike regular web apps, JQuery Mobile requires that the JavaScript be initialized before the browser encounters the HTML.
Posted by Microsoft on 5/2/2013 at 12:06 AM
Thank you for submitting feedback on Visual Studio and .NET Framework. In order to efficiently investigate and reproduce this issue, we are requesting a demo project. We look forward to hearing from you with this information.
Posted by Microsoft on 4/30/2013 at 4:51 PM
Thank you for your feedback, we are currently reviewing the issue you have submitted. If this issue is urgent, please contact support directly(http://support.microsoft.com)
Sign in to post a workaround.
File Name Submitted By Submitted On File Size  
goodJqmScriptLocationInHead.PNG 4/30/2013 56 KB
badJqmScriptLocationInBody.PNG 4/30/2013 65 KB