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?
Related
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.
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));
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.
I have a script that I want only to load if a certain condition was met, so I figured I should do this:
//Head tag
<script type="text/javascript" id="scriptArea" runat="server"></script>
//Rest of the page
.cs (Page_Load event)
if(someCondition)
{
scriptArea.InnerHtml = "Javascript code";
}
The problem is I get a null pointer exception and when it stops, I discover that scriptArea is null for some reason. Why does this happen and do you know of another solution?
Using asp.net webforms and script runat="server" ends up being server executed code, see MSDN on documentation about this.
If you just want javascript, try this instead:
<script type="text/javascript">
<asp:literal id="scriptArea" runat="server" />
</script>
Then in your code behind
scriptArea.Text = "Javascript code";
Hi i have a MasterPage (ASP.Net MVC) which contains a couple of loads for Jquery ui and under that a contentplaceholder for view specific scripts:
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../../Scripts/ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/ui.tabs.js" type="text/javascript"></script>
<script src="../../Scripts/ui.accordion.js" type="text/javascript"></script>
<script src="../../Scripts/LeftNav.js" type="text/javascript"></script>
<asp:contentplaceholder id="Scripts" runat="server"></asp:contentplaceholder>
Now I made a view which contains this script
<asp:Content ID="Content2" ContentPlaceHolderID="Scripts" runat="server">
<script>
var $tabs = $('#tabs').tabs();$tabs.tabs('option', 'selected', <%= ViewData["tab"]%>) ;
location.href='#<%= ViewData["anchor"]%>';
</script>
</asp:Content>
tha value in tab is the tabindex which should be selected. the anchor is a anchor on the tabpage which should be selected.
My suggestion was that first all Master scripts load than the tabindex I saved in the ViewData will selected and than I jump to the anchor i wanted to.
But how could it else be... nothing happens.
The side loads and the tabs too. But not the tab in the ViewData propertie tab is selected. and than the anchor cant work annyway.
I tried following. I put a alert in the script above and if I do that the alert is thrown before the tabs are load. Why does he exectue this script before loading the ui.script`???????????
I'm not sure if I got that all right and I don't know nothing about asp, but maybe you should checkout jquery's ready event, which is triggered when the page is loaded. That might get you out of timing problems.
put your script at the bottom of the page ... that is before the </asp:Content>
that way ur script will load after all the content has loaded ... if not write down the exact error ur getting ... as suggested above u can also use the $(document).ready