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));
Related
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?
`
function init() {
var a = 'output of my processing';
alert('I am here'); // alert pops up
document.getElementById("<%=hdnField.ClientID %>").value = a;
}
<head>
<script src="../Scripts/myscripts.js"></script>
</head>
<body onload="init()">
<asp:HiddenField ID="hdnField" runat="server" />
</body>
`I have a page with lot of javascript; I am trying to clean it up by moving the scripts to a script folder and reference the path; Seems to work fine, except when it encounters 'document.getelementbyid(controlname.id)'- it throws 'TypeError: Cannot read property 'value' of null'
I understand it is not able to find the control. Why does that happen? I thought the DOM is already built - what difference does moving the javascript to a path make to that anyway? Any ideas on how to make it work? I would really like javascript to be moved from the page.
You're using ASP.Net inline calls inside your JS. This couldn't work, for two reasons:
It's likely you don't have your server configured to handle .js files using the ASP.Net processor.
Even if you did, the processing of the .js would be completely separate to the hosting .aspx page; meaning hdnField would not be in scope.
You would be better off passing knowledge about the items on your page directly to the JavaScript:
JS:
function init(config) {
var a = 'output of my processing';
alert('I am here'); // alert pops up
document.getElementById(config.hdnFieldID).value = a;
}
ASPX:
<head>
<script src="../Scripts/myscripts.js"></script>
</head>
<body onload="init({ hdnFieldID: '<%= hdnField.ClientID %>' })">
<asp:HiddenField ID="hdnField" runat="server" />
</body>
Hope that helps.
This answer assumes your directory structure is correct.
Move your script tag to the bottom of the body, just before . Here is a good SO answer to this question, and here is another.
In addition, in general, it's bad practice to call a JavaScript function from inside HTML elements. If you're not using jQuery, you can add a "DOMContentLoaded" event listener to run the code. With jQuery, the standard $(document).ready() has been proven to work well. Or, if you simply put your script tag at the bottom of the , and place init(); at the end of your JS file, it will all run properly. This would be for a very simple application, but simplicity is sometimes the best.
Finally, for a sanity check, you could hard-code the ID in your init function. I don't know asp.net, but you might want to check the output of <%=hdnField.ClientID %>. Are you sure you're getting the correct ID?
Good luck.
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 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";
In my aspx page:
<script type="text/javascript">
Ext.onReady(function() {
Ext.get('mb1').on('click', function(e) {
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});
function showResult() {
Ext.example.msg('test');
</script>
<div>
<asp:Button ID="mb1" runat="server" Text="Button" />
</div>
I got error message "ext is undefined". Can anyone help me?
You have to include the js file like
<script type="text/javascript" src="extjs.js"></script>
before using any of the functions.
you should download the extjs framework from the site itself and host it locally if you can. http://extjs.com
Is it possible that you used "ext" somewhere instead of "Ext" (wrong capitalization)?
you don't seem to be closing your functions with "}"
Once you get Ext working, you'll probably want to use the button's client ID instead of the code-behind ID:
...
Ext.get('<%=mb1.ClientID%>').on('click', function(e) {
...
Include below all three file in your file
ext-all.css,ext-base.js,ext-all-debug.js