Error with JQuery Mobile - javascript
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.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:
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&t=634773918900000000" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=1zt3Mkq4WcBu9zbsV4m9-M7KCvrT-jr1XXgEzhW9nlIjwSm5LqLoLvy1RRMu-5CPbCTtFRsnupAShqvEwf1EA89LxKLiAOgKvWaOicLhKJXKcoRKfxG9wfeNLN-ZylWfgK9ozBiE9bfZ-FsMcBHxpWRRemoiIMSGZzuYvNAs6Evl_1N7xJCIcbyAp01izsBK0&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&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 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.
Related
Javascript works and disappears quickly in Sitefinity
I've been having an issue where JavaScript is not loading for our website built in Sitefinity. We have a custom .master page using the Zurb Foundation framework. At first I thought this was simply an ordering of the external scripts in the .
In breaking it down, I've stripped my page code to do a basic JavaScript output inline. When you click a button, it shows a text message. The script works for a split second then disappears. This is what I was having happen earlier. It's as though the script times out.
This is a basic of basic scripts to test. I don't understand why this is occurring. Something is conflicting with Sitefinity.
My code is below:
<%# Master Language="C#" AutoEventWireup="true" %>
<%# Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" TagPrefix="sf" %>
<%# Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!doctype html>
<html class="no-js" lang="en">
<head id="Head" runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<title>Inside Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="ContentMainCPH">
<asp:contentplaceholder id="ContentMainCPH" runat="server" />
</div>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "This Works!";
}
</script>
</form>
</body>
</html>
Any thoughts about why I can't get Scripts to work in Sitefinity? I've been trying to resolve this for the entire week, and Sitefinity Support unfortunately is not of any help.
I appreciate your time and help if you can offer, thank you.
Maria
ASP.net C# calling vbscript from javascript
I have this basic page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Teste1.aspx.cs" Inherits="Testes.Teste1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
<form id="form1" runat="server">
<input id="clickMe" type="button" value="clickme" onclick="getText();" />
</form>
<script type="text/vbscript" language="vbscript">
Function createText()
createText = "A"
End Function
</script>
<script type="text/javascript" language="javascript">
function getText(){
var vbobj;
vbobj = createText();
alert("VBScript text = " + vbobj);
}
</script>
</body>
</html>
But this is not working, I'm getting the following message
Unhandled exception at line 27, column 5 in
http://localhost:59632/Teste1.aspx 0x800a1391 - JavaScript runtime
error: 'createText' is not defined
I hope you know VBScript works only in IE. Try to put this meta tag in your head section: <head> <meta http-equiv="x-ua-compatible" content="IE=10"> </head> It helped me as I was using IE 11 edge mode, in which VBScript is no longer supported.
How to ADD javascript files and css to a contentpage of a master page in asp.net
How can I ADD javascript files and css to a contentpage of a master page in asp.net. I tried to include a datetime picker to my ContentPage. Bur it works perfectly on masterpage . when I try to put the same in my contentpage it doesn't work.
this is Content Page code:
<%# Page Title="" Language="C#" MasterPageFile="~/testmasterpage.master" AutoEventWireup="true" CodeFile="datetime.aspx.cs" Inherits="datetime" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
<link href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker();
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</asp:Content>
this is masterpage code:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
`</body>`
</html>
The <script></script> and <style></style> tags should go into the <head></head> tag.
We cant use <head><head>
tags in content page, we places it in master page, you have placed the link and script tags in correct place once try javascript function call as
$("ctl00_ContentPlaceHolder1_txtDate").datepicker();
and put a alert and debugger in datepicker function and above the below line
$("ctl00_ContentPlaceHolder1_txtDate").datepicker();
and check it, if still it is not works its may be the problem with your JQuery call.
Have you use "~" char for those files path? Usually, asp page will think you have using different path for each page. So, we need to define the relative path for each loaded css/js file.
So, Try this to correcting your page:
<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
<link href="~/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
<script src="<%: ResolveUrl("~/js/jquery-1.7.2.min.js") %>" type="text/javascript"></script>
<script src="<%: ResolveUrl("~/js/jquery-ui-1.8.19.custom.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker();
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</asp:Content>
this is masterpage code:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Maybe you need call the ResolveUrl using Page namespace "Page.ResolveUrl".
What you have to do: i believe that you want to include all of your scripts in you 'MasterPage' every ContentPage have a MasterPage, the master page is the "father", so every script or style that he includes, will be exist in his ContentPage also. If it make sense, transfer: <link href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script> to MasterPage page, under <head> tag. check in console tab via [chrome developer tools][1]' for errors, probably you'll have some errors there saying that he can't findjqueryordatepicker`, you should six the path to these script (probably): will become: You can reference this post for the tilde sign
Sometimes it's easier to do this stuff with the tools that the framework have provided. In this case, calling ClientScriptManager.RegisterStartupScript() in the code-behind inserts the script in the correct location: after the page content, before the body tag. The script will only be added when the full page is (re)loaded.
This code would go in Page_Load. No need to check for IsPostback.
C# Version:
String sKey = "SomeUniqueKeyForThisScript";
Type tType = Page.GetType;
ClientScriptManager csm = Page.ClientScript;
csm.RegisterStartupScript(tType, sKey, "<script src=""" & ResolveUrl("~/Scripts/my-custom-script.js") & """></script>")
VB Version:
Dim sKey As String = "SomeUniqueKeyForThisScript"
Dim tType As Type = Page.GetType
Dim csm As ClientScriptManager = Page.ClientScript
csm.RegisterStartupScript(tType, sKey, "<script src=""" & ResolveUrl("~/Scripts/my-custom-script.js") & """></script>")
You'll obviously need to re-bind any JS events if affected controls are included in an async postback. That can easily be done by using ScriptManager.RegisterStartupScript() and passing the reloaded control as the first parameter so that the script is only executed if the control is reloaded.
Jquery Tagit not working with master page
Here I am getting problem with master page. Here When I am using Jquery Tagit with a simple .aspx page then Jquery Tagitis woking fine but when I use of Jquery tagit with .master page
then I am getting error.
Error as Below
JavaScript runtime error: Object doesn't support property or method 'tagit'
Above Error I am getting as below line.
$('#<%=Tbmytags.ClientID%>').tagit();
Mater page source code
<%# Page Title="" Language="VB" MasterPageFile="~/admin.master" AutoEventWireup="false" CodeFile="Upload_content.aspx.vb" Inherits="Upload_content" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css" />
<link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tag-it.js" type="text/javascript"></script>
<script type="text/ecmascript">
$(function () {
$('#<%=Tbmytags.ClientID%>').tagit();
});
</script>
<div class="form-group">
<label class="control-label">Tag Name</label>
<asp:TextBox ID="Tbmytags" runat="server"></asp:TextBox>
</div>
</asp:Content>
If somebody have any idea about this error then please help me
jQuery not working in ASP 2.0 page - Visual Web Developer 2008 Express
JQuery is not working in ASP 2.0 pages which were developed under VS 2005 and now doing Javascript in it using Visual Web Developer 2008 Express. I have included the jquery file.
I have also installed all patches required. JQuery intellisense works fine in the IDE, but no jquery command is running. btw, the page renders fine from the server side coding.
Please give some remedy to this, and whats the problem in the code?
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%# Register Src="Calendar.ascx" TagName="Calendar" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Control Trial Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.3.2.js">
$(document).ready(function() {
$("#divBody").css("display", "none");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="showDiv" type="button" value="hi there"/>
</div>
<div id="divBody">
....
</html>
You need 2 script tags. One which imports the jQuery.js file and one which contains your script. Observe:
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#divBody").css("display", "none");
});
</script>