How to execute JavaScript of Content page while using Update panel ?
something i found after browsing for answer is this.
Instead of putting your jQuery code inside of $(document).ready(), put it inside
function pageLoad(sender, args) {
}
but i don't understand that? and My requirement is within the content page!
just put your javascripts code in UpdatePanel
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- your code -->
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("a").on("click", function () {
alert("it's work!");
});
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
Related
I have a JQuery script in a asp:Panel in an UpdatePanel which is in an ASP.NET page. This is the code.
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="ImagePanel">
<img id="photo" src="/Icons/Factory Layout.png" style="display:none"/>
<script type="text/javascript">
$(document).ready(function () {
var factoryImage = $("#photo");
factoryImage.attr("src",document.getElementById('<%= FactoryImageFileNameHF.ClientID %>').value);
factoryImage.show();
$('#photo').imgAreaSelect({
handles: true,
show: true,
onSelectEnd: function(img, selection) {
var X1 = document.getElementById('<%= X1HF.ClientID %>');
var Y1 = document.getElementById('<%= Y1HF.ClientID %>');
var X2 = document.getElementById('<%= X2HF.ClientID %>');
var Y2 = document.getElementById('<%= Y2HF.ClientID %>');
X1.value = selection.x1;
X2.value = selection.x2;
Y1.value = selection.y1;
Y2.value = selection.y2;
}
});
});
</script>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I have the following link in the head of the web form.
<script type="text/javascript" src="/Scripts/jquery.imgareaselect.pack.js"></script>
I have the following errors
Uncaught ReferenceError: jQuery is not defined
at eval (eval at <anonymous> (jquery.imgareaselect.pack.js:1), <anonymous>:1:10852)
at jquery.imgareaselect.pack.js:1
FactoryLayoutSettings.aspx:543 Uncaught TypeError: $ is not a function
at FactoryLayoutSettings.aspx:555
(anonymous) # FactoryLayoutSettings.aspx:555
As I am new to jQuery I am not really sure of where the error is. Is it a result of the UpdatePanel because at the beginning the image shows and then on a postback it fails and I get the errors above? The underlined part of the code where it fails is $(document).ready(function (). Does anyone have any ideas?
Before the script tag you have mentioned you should also have another one script tag, in which you would refer to jQuery. As it seems you make use of jQuery but you haven't loaded the library, before you use it.
<script type="text/javascript" src="..."></script>
In the src ... should be replaced with the path to the jQuery.
The code you are using requires JQuery.
Add another script resource to your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You need to include JQuery before you actually use it.
First, create a required bundle for your jquery scripts you want on every page:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/js/required").Include(
"~/Scripts/jquery-2.0.2.js"));
//other bundles
}
Now include this bundle into your page-
<body>
#RenderBody()
#Scripts.Render("~/js/required") //Here add your jquery include
#RenderSection("scripts", false) //Here you add scripts at the bottom of the page
</body>
It should solve your issue.
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?
Are there any potential side-effects to below solution to injecting JavaScript from the content of an updated UpdatePanel?
The code for the UpdatePanel looks sort of like this:
<asp:UpdatePanel>
<asp:PlaceHolder ID="pnlScriptContent" Visible="false" runat="server">
<script id="script-content">
alert('Script was loaded correctly!');
</script>
</asp:PlaceHolder>
<asp:Button OnClick="ButtonClick" OnClientClick="LoadScript()" />
</asp:UpdatePanel>
The code-behind on the click of the Button shows the Panel pnlScriptContent.
protected void ButtonClick(object sender, EventArgs args)
{
pnlScriptContent.Visible = true;
}
The JavaScript-code looks like this:
var LoadScript = function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
eval($('#script-content').html());
};
}
I've seen other solutions to inject JavaScript after an UpdatePanel updates, but nothing that allows the injection of JavaScript inside script-tags in the content.
Is there a reason to this? Security maybe?
You can use RegisterClientScriptBlock static method of the ScriptManager class
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