javascript - Error with JQuery Mobile

Below, I am receiving this error:

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="">
<head runat="server">
<title></title>
    <link rel="stylesheet" href=".mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

    <script src=".8.2.min.js"></script>
    <script src=".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:

Thank you

Below I have included rendered HTML page:

<!DOCTYPE html>

<html xmlns="">
<head><title>

</title><link rel="stylesheet" href=".2.0/jquery.mobile-1.2.0.min.css" />
    <script src=".8.2.min.js"></script>
    <script src=".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=".2.0/jquery.mobile-1.2.0.min.css" />
<script src=".8.2.min.js"></script>

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

<script src=".2.0/jquery.mobile-1.2.0.min.js"></script>

Below, I am receiving this error:

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/1999/xhtml">
<head runat="server">
<title></title>
    <link rel="stylesheet" href="http://ajax.aspnetcdn./ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

    <script src="http://ajax.aspnetcdn./ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script src="http://ajax.aspnetcdn./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.

The error is thrown here:

Thank you

Below I have included rendered HTML page:

<!DOCTYPE html>

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

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

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

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

Share Improve this question edited Jul 12, 2013 at 21:42 Taryn 248k57 gold badges371 silver badges408 bronze badges asked Nov 26, 2012 at 2:02 deDogs 7291 gold badge8 silver badges24 bronze badges

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 parison between the output of the script for debug and release? It may shed some light. – Shai Cohen Commented Nov 27, 2012 at 17:03
thank you, I believe that I may have thought of something. Updated in original question. – deDogs Commented Nov 27, 2012 at 21:13
No, my idea didn't work! – deDogs Commented Nov 28, 2012 at 18:57
Sorry to hear that. Would you consider trying my earlier suggestion of paring the debug and release versions? – Shai Cohen Commented Nov 28, 2012 at 22:51
1 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 Commented Nov 29, 2012 at 0:20

| Show 5 more ments

1 Answer 1

Sorted by: Reset to default 9 +125

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/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
    <link rel="stylesheet" href="http://ajax.aspnetcdn./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./ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script src="http://ajax.aspnetcdn./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/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
    <link rel="stylesheet" href="http://ajax.aspnetcdn./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./ajax/jQuery/jquery-1.8.2.min.js"/>
                <asp:ScriptReference Path="http://ajax.aspnetcdn./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:

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

to this:

<pilation 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Error with JQuery Mobile - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)