Error with JQuery Mobile

Question

Below, I am receiving this error:

enter image description here

I have narrowed the problem code to JQuery Mobile 1.0 or greater and Asp.NET ScriptManager.

I added a new Web Forms Project to Visual Studio 2012 and included the code below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" ScriptMode="Release" runat="server"></asp:ScriptManager>
    <div>

    </div>
</form>
</body>
</html>

No Code in Code Behind page.

This is it, however when I run the project, I receive the above error when both ScriptManager and JQuery Mobile script is included.
No error occurs when either the JQuery Mobile or ScirptManager is removed.

Half a day wondering and trying to find a explanation, one particular website that I came across suggested adding ScriptMode="Release" to ScriptManager.

After adding ScriptMode="Release" to ScriptManager, I didn't receive the above error.

Searching MSDN, which defined ScriptMode: Gets or sets a value that specifies whether debug or release versions of client script libraries are rendered.

An error wasn't thrown after adding ScriptMode to ScriptManager, but Why? Can someone explain why adding ScriptMode stop the error from appearing, and would, just adding ScriptMode, mean truly a solver or a Band-Aid?

The error is thrown here: enter image description here

Thank you

Below I have included rendered HTML page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE3MTc1MDc5MjBkZKegov+UVDfF6HxSUeRymFH24991gFZlPU0b/IsFSVOC" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=YNeW-uV30W9QUFseu7cpdlXTvjGS-17TUbJFOrYgly8h7oJPnNmO65B9MsXEKqakJOaVgg29CB6vB4ZdmlLF7g8EEKPfdXLBpPT96ABclOM1&amp;t=634773918900000000" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=1zt3Mkq4WcBu9zbsV4m9-M7KCvrT-jr1XXgEzhW9nlIjwSm5LqLoLvy1RRMu-5CPbCTtFRsnupAShqvEwf1EA89LxKLiAOgKvWaOicLhKJXKcoRKfxG9wfeNLN-ZylWfgK9ozBiE9bfZ-FsMcBHxpWRRemoiIMSGZzuYvNAs6Evl_1N7xJCIcbyAp01izsBK0&amp;t=6119e399" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ScriptResource.axd?d=QXV43dBeyoevgM325nU9rlBmVyB375pfaFEuLQ1v1BisiTdf-HdmxtF90_hgFfCcn3l6abc0C_OIvNebx_7cosgD1E8ZEeTK680r4HRGT7Pngzk9Ei-BKOI48hrwHGv9cUfKN2zloA0qh8YHXKfefO8eUGQhV8M-XarSzMOPpgJwr8FS8Yb8rvlVPvcSzSTE0&amp;t=6119e399" type="text/javascript"></script>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
//]]>
</script>

        <div>
        </div>
    </form>
</body>
</html>

Below I show how I tried turning on noConflict:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
    $.noConflict();
</script>

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

I am not claiming to know the answer, but usually a **debug** version includes extra information to allow the debugging to take place (extra symbols, etc.). It could very well be that these extra symbols are the culprit and are causing the clash with JQuery Mobile. Maybe try doing a comparison between the output of the script for debug and release? It may shed some light. — Shai Cohen, Nov 27 '12 at 17:03
thank you, I believe that I may have thought of something. Updated in original question. — deDogs, Nov 27 '12 at 21:13
Sorry to hear that. Would you consider trying my earlier suggestion of comparing the debug and release versions? — Shai Cohen, Nov 28 '12 at 22:51
Can include the HTML source of the page that gets sent to browser? I'm after seeing what scripts the ScriptManager has actually inserted. — simbolo, Nov 29 '12 at 00:20
Have you turned on noConflict mode for jQuery/jQuery Mobile? — Steven, Nov 29 '12 at 04:19
Hello Shai. Currently I have compiled and am running the project in release mode. Additionally, I had compiled the project with the debug solution configuration, and recieved similar error. — deDogs, Nov 29 '12 at 04:29
I am running IE9. It would helpful to know if anyone else is having similar troubles. If others are not experiencing the error, then it is something with my setup. — deDogs, Nov 29 '12 at 04:34
Hello Steven, I just tested turning on noConflict, and error is still displayed. Can anyone else reproduce this error, or am I the only one? — deDogs, Nov 29 '12 at 04:49

Soenhay · Accepted Answer · 2012-12-13T15:58:33.157

I tested your code and I was able to replicate the error.

First, I think ScriptManager must exist before anything that is using it. Doing this will result in no error:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    </form>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</body>
</html>

Second, The scripts you are including are the minified or release versions. This is an unconfirmed guess but maybe it is expecting non-minified or debug versions for rendering and they do not exist and putting the ScriptMode="Release" possibly lets it know it should use minified versions. This could be tested by including the minified and debug scripts in the project instead of getting them remotely...... That is how MVC works so that is why I am suggesting that maybe Web Application works the same.

Aside: Following the info at this link here is another way that does not produce any errors:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
                <Scripts>
                <asp:ScriptReference Path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"/>
                <asp:ScriptReference Path="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js" />
            </Scripts>
        </asp:ScriptManager>
    </form>
</body>
</html>

Edit:

For some reason I also tried setting this in Web.config:

<compilation debug="true" targetFramework="4.0"/>

to this:

<compilation debug="false" targetFramework="4.0"/>

This also works with your original code but, for some reason, I feel like it is a bandaid because it is most likely just hiding the error instead of fixing it.

Thank you, I believe a Form tag shouldn't exist within a header section. However, I tested your code with the Form tag within the header, and I received the same error. I have re-tested placing script before and after ScriptManager, and receive similar error in either instances. Minified Javascript isn’t compiled. It is still Javascript. I believe this is still true? My thought is Javascript, in either form minimized or expanded form, should work in either debug or without debugging. Resolving the error, I need to add ScriptMode="Release" — deDogs, Dec 11 '12 at 05:48
The ScriptMode enumerator provides values for setting which version of client script to use on a Web page. The enumerator values can be applied to either the ScriptMode property of the ScriptManager object, or to the ScriptMode property of the ScriptReference object. The ScriptManager object sets the version for all scripts on the page unless it is overridden by a ScriptReference object. The ScriptReference object sets the version for a particular script. — deDogs, Dec 11 '12 at 15:19
The code works for me so I don't know what to say about that but I am sure that the scriptmanager needs to exist before it is used. I am not sure about the form tag and I couldn't find anything online so I made this question: http://stackoverflow.com/questions/13850317/is-there-a-good-reason-that-a-form-tag-should-not-exist-in-the-head-tag ... You could also try using embedded script resources but you would have to host your own scripts. I can add an example if you want. — Soenhay, Dec 12 '12 at 23:23
Thank you for the link, which the link indicates that IE has a bug. Navigation to software.hixie.ch/utilities/js/live-dom-viewer/?saved=2014. Soenhay - when you didn't put the form tag in the header, were you successful not getting error? Did you it work for you? — deDogs, Dec 14 '12 at 02:38
If I do not put the form tag in the header then I get an error that says ScriptManager needs to be in a form tag. — Soenhay, Dec 20 '12 at 22:27

Error with JQuery Mobile

1 Answers1