the jquery object is actually just the init constructor 'enhanced' - javascript

Hi I am using signalR with ASP.Net webforms. For ordinary page its working fine. But for master page inherited page, in the line
var chatHub = $.connection.clientUpdateHub;
$.connection is undefined. The point is, When I see the $ , its showing that "the jquery object is actually just the init constructor 'enhanced'" I can not understand this. please help me how to avoid this.

Hi I added jquery reference like this
<asp:ScriptManager runat="server">
<Scripts>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
</Scripts>
</asp:ScriptManager>
in master page and
<script type="text/javascript" src="<%: ResolveUrl("~/Scripts/jquery-2.0.3.min.js") %>"></script>
in content pace. So it causes the problem. After removing jquery reference in script manager it works fine for me.

Related

JavaScript runtime error: "$" is undefined - ASP.NET WebForms (MasterPage)

I hope someone can help me because i'm not able to find a working solution for my problem.
I'm coding in ASP.NET WebForms with C#. I use a MasterPage.
In this MasterPage i define my scripts in a ScriptManager.
<asp:ScriptManager ID="smScripts" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-2.1.1.min.js" />
<asp:ScriptReference Path="~/Scripts/bootstrap.min.js" />
<asp:ScriptReference Path="~/Scripts/printArea.js" />
<asp:ScriptReference Path="~/Scripts/globalFunctions.js" />
<asp:ScriptReference Path="~/Scripts/jquery.browser.min.js" />
<asp:ScriptReference Path="~/Scripts/jquery.reject.js" />
</Scripts>
</asp:ScriptManager>
Now, if i use jQuery in any page e. g. Default.aspx inside a function it works fine:
<script type="text/javascript">
function Print(options) {
$("div.PrintArea").printArea(options);
}
</script>
But if i try to use it directly in the script block - for example to wait until the document is ready - it doesn't work:
<script type="text/javascript">
$(document).ready(function () {
// some code
});
</script>
I get the error "JavaScript runtime error: "$" is undefined".
I don't know how i can fix this issue.
Maybe someone can help me? Thanks in advance.
Just make sure
<asp:ScriptReference Path="~/Scripts/jquery-2.1.1.min.js" />
is written/loaded before you call
$(document).ready(function ()
your code "function Print(options)" is working fine because jquery library was not loaded when page was ready but loaded after some time. Your Print function need jquery when called and not on page ready event.
Let say we want to add jquery in every page, so you need to include a reference of your script in your masterpage.
According to the best practices, you should put all javascript references and scripts at the end of the <body> html tag: just before the </body> tag.
So in your case, you should reference all your common js file at the end of the <body> tag and then set a section like that :
<asp:ContentPlaceHolder id="myJsWhatever" runat="server">
</asp:ContentPlaceHolder>
So in pages that inherit from the master page you defined all your JS in this section and you ensure jquery is loading first.
If you don't want to change all your stuff, just add the jquery reference in the head section of your html page.
If i use simple script tags before the ContentPlaceHolder instead of the ScriptManager it works:
<head>
<script src="https://.../jquery-2.1.1.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="phHead" runat="server">
</asp:ContentPlaceHolder>
</head>
To ensure the path is correct on every content page i load it directly from my server instead of using a path like "~/scripts/...". Maybe there is a better way?

Server.Execute() does not wait for the second aspx page to finish executing?

I have an aspx page that executes another aspx page through Server.Execute() since I need the called aspx page to postback in order to grab a session variable. However, I have noticed in my code that when the Server.Execute() is called, it does not wait for the called page to load up and posback, the code just goes on and the page is only loaded after the function is finished? Does anyone know how to fix this? Below is the code I am using in the parent page to call the page I want to load.
Imports System.IO
Public Class TriggerPage
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Server.Execute("SvgForm.aspx", False)
'This variable is only populated after the SvgForm.aspx executes and posts back since the Session variable is initialized there
Dim htmlCode As String = Session("svgVariable")
End Sub
End Class
Aspx page code:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="TriggerPage.aspx.vb" Inherits="TelerikChart.TriggerPage" %>
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body onload="openWindow()">
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
</asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function openWindow() {
window.open('svgForm.aspx'); return false;
}
function RefreshParentPage() {
document.location.href = document.location.href;
}
</script>
</telerik:RadScriptBlock>
</div>
</form>
</body>
</html>
Tyger,
You are going about this wrong. This is how one captures the output html of a Server.Execute command:
Dim sw As New StringWriter()
Server.Execute("SvgForm.aspx", sw)
Dim htmlCode As String = sw.ToString
Be careful about passing data around as session variables. I think I ran into troubles because Server.Execute() seems to cache replies into the context of the current session. So subsequent changes to session variables may not lead to subsequent changes of the content generated by Server.Execute(), at least in the scope of the current user. Although empirical, this is the only viable explanation for some rather crazy behavior I've seen. Safer might be to append a random to the requested URI, to bust the cached session (user) specific response.
Server.Execute("SvgForm.aspx?rand=" & MyRandomNumberGenerator(), sw)
I'm going to test this theory to find out for sure...

ASP: Switching between two ScriptManagers. Or how to remove script reference

General idea
My general idea is to have mobile and desktop version of my site. Users can switch versions with buttons on the bottom of the page. I'm using ASP themes, so that I can easily switch themes depending on the required version of the site.
The problem
Switching themes is great, but since I've got JavaScript files already included in my project in the following ScriptManager in my master page:
<asp:ScriptManager runat="server" ID="sm">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-2.0.2.min.js" />
<asp:ScriptReference Path="~/Scripts/jQueryMobileBehaviour.js" />
<asp:ScriptReference Path="~/Scripts/Master.js" />
<asp:ScriptReference Path="~/Scripts/jquery.mobile-1.3.1.min.js" />
</Scripts>
</asp:ScriptManager>
When the user switch to desktop version there are problems caused by jquery.mobile-1.3.1.min.js and jQueryMobileBehaviour.js. Is there a way to use two ScriptManagers (some sort of themes but for js files)?
What I've tried without success
My first approach was to remove the mobile JavaScript files from the ScriptManager and then include them manually in the click event of the button that switches to mobile version like that sm.Scripts.Add.
The second approach was to remove programmatically the mobile JavaScript files like that sm.Scripts.Remove.
protected void CommandBtn_Click(Object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "Desktop":
HttpContext.Current.Response.Cookies["theme"].Value = "Desktop";
//sm.Scripts.Remove(new ScriptReference("~/Scripts/jquery.mobile-1.3.1.min.js"));
break;
case "Mobile":
HttpContext.Current.Response.Cookies["theme"].Value = "Mobile";
//sm.Scripts.Add(new ScriptReference("~/Scripts/jquery-2.0.2.min.js"));
//Response.Redirect(Request.RawUrl);
break;
default:
break;
}
Page.Response.Redirect(Page.Request.Url.ToString(), true);
}
Both approaches didn't work.
To sum up the questions
Is there something wrong in my code - assuming that the paths should be alright?
Is there a better approach, which will allow me to switch JavaScript files, like is done with the themes?
I finally came up with a solution. I've tried adding two <asp:ScriptManager runat="server" ID="sm"> and make them sm.Visible = true/false depending on the version of the site as #Aristos suggested. However I could not use two ScriptManagers on the same page and also there is no property Visible of the ScriptManager.
So here is what I've done.
Firstly since I'll need to switch between two sets of scripts I've made two separate ScriptManagerProxy (because I could not have two ScriptManagers).
For the Desktop version:
<asp:ScriptManagerProxy runat="server" ID="smDesktop">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-2.0.2.min.js" />
<asp:ScriptReference Path="~/Scripts/Modernizr.js" />
<asp:ScriptReference Path="~/Scripts/Modernizr_full.js" />
<asp:ScriptReference Path="~/Scripts/Master.js" />
</Scripts>
</asp:ScriptManagerProxy>
and for the Mobile version:
<asp:ScriptManagerProxy runat="server" ID="smMobile">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-2.0.2.min.js" />
<asp:ScriptReference Path="~/Scripts/jQueryMobileBehaviour.js" />
<asp:ScriptReference Path="~/Scripts/Modernizr.js" />
<asp:ScriptReference Path="~/Scripts/Modernizr_full.js" />
<asp:ScriptReference Path="~/Scripts/Master.js" />
<asp:ScriptReference Path="~/Scripts/jquery.mobile-1.3.1.min.js" />
</Scripts>
</asp:ScriptManagerProxy>
IMPORTANT PART STARTS HERE
Then I put them in two separate user controls, which I registered to the master page:
<%# Register Src="~/UserControl/ScriptManagerDesktop.ascx" TagName="smDesktop" TagPrefix="uc" %>
<%# Register Src="~/UserControl/ScriptManagerMobile.ascx"TagName="smMobile" TagPrefix="uc" %>
Then in the master page body I've inserted a ContentPlaceHolder, which I'll use to insert one of the user controls depending, which version is required.
<asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager>
<asp:ContentPlaceHolder ID="cphScripts" runat="server">
</asp:ContentPlaceHolder>
and finally in the master's page codebehind I'm adding the needed user control to the placeholder:
if (HttpContext.Current.Request.Cookies["theme"] != null)
{
switch (HttpContext.Current.Request.Cookies["theme"].Value)
{
case "Desktop":
cphScripts.Controls.Add(Page.LoadControl("~/UserControl/ScriptManagerDesktop.ascx"));
break;
case "Mobile":
cphScripts.Controls.Add(Page.LoadControl("~/UserControl/ScriptManagerMobile.ascx"));
break;
default:
cphScripts.Controls.Add(Page.LoadControl("~/UserControl/ScriptManagerDesktop.ascx"));
break;
}
}
And voila I've got your ScriptManager switcher ready to go.
Hope this will help someone.

ASP.NET adding js file on page load

I need to add specific js files to the page.
On Page_Load, I'm trying this:
ClientScript.RegisterClientScriptInclude("MyTab", HttpRuntime.AppDomainAppPath + "\\scripts\\" + tabName);
It doesn't working.
You can try this solution that will always work. use:
Page.Header.Controls.Add(new LiteralControl("<script type='text/javascript' src='script.js'></script>"));
You can simply do this without the need to load it in the code-behind:
<asp:ScriptManager ID="sm" runat="server">
<Scripts>
<asp:ScriptReference Path="./script.js" />
</Scripts>
</asp:ScriptManager>
If you want to add or change the script file at runtime, just leave the ScriptManager in your mark-up and access it like this:
ScriptManager sm = ScriptManager.GetCurrent(Page);
if (Smgr != null)
{
ScriptReference sr = new ScriptReference();
sr.Path = "~/Scripts/Script.js";
sm.Scripts.Add(sr);
}
Make sure you're not using "MyTab" anywhere else to register scripts. It's a key for the script.
Also HttpRuntime.AppDomainAppPath will return the physical path, which makes me think it could return for example C:\Program Files\... which won't work for people visiting the site.
Maybe try:
ClientScript.RegisterClientScriptInclude("MyTab", Page.ResolveClientUrl("~\\scripts\\" + tabName));

exclude master page js file in asp.net child page

I use asp.net script manager in master page to add js files . In one of child pages i dont want specific js file to be excluded . is it possible in asp.net?
eg code in my master page
<asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true" ID="id" OnResolveScriptReference="sm_ResolveScriptReference">
<Scripts>
<asp:ScriptReference Path="~/scripts/jquery-1.4.2.min.js" />
<asp:ScriptReference Path="~/scripts/jquery.bgiframe.min.js" />
<asp:ScriptReference Path="~/scripts/tax.js" />
<asp:ScriptReference Path="~/scripts/old.js" />
<asp:ScriptReference Path="~/scripts/menu.js" />
</Scripts>
</asp:ScriptManager>
i like to exclude old.js from one child page.Hope this helps
Warp your ScriptManager inside a PlaceHolder and when you do need to change it simple include this PlaceHolder on the child. Eg:
<asp:ContentPlaceHolder id="ScrMang" runat="server">
<asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true" ID="id" OnResolveScriptReference="sm_ResolveScriptReference">
<Scripts>
<asp:ScriptReference Path="~/scripts/jquery-1.4.2.min.js" />
<asp:ScriptReference Path="~/scripts/jquery.bgiframe.min.js" />
<asp:ScriptReference Path="~/scripts/tax.js" />
<asp:ScriptReference Path="~/scripts/old.js" />
<asp:ScriptReference Path="~/scripts/menu.js" />
</Scripts>
</asp:ScriptManager>
</asp:ContentPlaceHolder>
and on child if you include this line it will remove the ScriptManager. Of course you can include it again with different script to load.
<asp:Content ID="Content3" ContentPlaceHolderID="ScrMang" Runat="Server">
</asp:Content>
Second solution is to make nested master page in the same way, include the ScriptManager inside a PlaceHolder, make a MasterPage with the first as parent, and change the script that it will include. Then select what page get the master page, and what gets the nested master page with different scripts.
Master Pages can include default content in tags. When the master page is used by the sub-page and does not include a reference to the content placeholder that has default content, the default content is rendered in its place.
What I would do in this instance is create a content placeholder for my scripts in the master page. Then, in the page that you don't want to have the script show up, create a content item pointing to the with your scripts. This allows you to 'override' the scripts that are used on that specific page.

Categories