Design page containing Update panel
</head>
<body onkeydown="KeysShortcut(event);" onload="pageLoad();">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updatePanelMain" runat="server">
<ContentTemplate>
<ajaxControlToolkit:DropShadowExtender ID="DropShadowExtender2" runat="server" Opacity="0.6" Rounded="false" Radius="5" TrackPosition="true" TargetControlID="pnlMain" Width="8"></ajaxControlToolkit:DropShadowExtender>
<table align="center" width="100%">
<tr>
<td align="center">
<asp:Panel ID="pnlTests" runat="server">
Script I have included
///
<script type="text/javascript" language="javascript">
function DisableBackButton()
{ window.history.forward() }
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function (evt) {
if (evt.persisted) Disabl`enter code here`eBackButton()
}
window.onunload = function ()
{ void (0) }
window.history.forward(1);
</script>
above script is working fine with .aspx pages but not working with aspx pages containing update panel of ajax script manager
Related
I'm trying to run a JS function that uses JQuery to append information to the HTML of an ASP page and I just can't get it to work. I've made some research about it but maybe it's something a lot simpler.
%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Pruebas.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>
</body>
</html>
more specifically this is the function im trying to run
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
im trying to call this function from the C# code behind the page like this
protected void Button1_Click(object sender, EventArgs e)
{
String p = "this is a message";
ScriptManager.RegisterClientScriptBlock(this, GetType(), "myfunction", "add('" + p + "');", true);
}
If I try to run a JS function that produces a console log or an alert on the page it works fine. Maybe it is related to the Postback property in the ASP button?
If anyone can shed some light on this I will be thankful.
There is no any .auto-style1 class in your code. Please add a class in div to work this code.
<form id="form1" runat="server">
<div class="auto-style1">
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>
Asp.Net 4.5 (WebForm)
How can I invoke a js function in Iframe from code behind successfully?
I am using RegisterClientScriptBlock to fire JS function in aspx page that in turn invokes the JS function in html page of iframe.
The Client Button in main page works fine.
The Server Button does not work as intended. However it does recognize the iframe object and contentWindow.
Error
TypeError: Object doesn't support property or method 'TestFunc'
Any constructive help would be appreciated. Note: this is a stripped down example for clarity.
MainPage.aspx
<head runat="server">
<title></title>
<script type="text/javascript">
function InvokeJS(param) {
var iframe = document.getElementById("MyIFrame");
try {
iframe.contentWindow.TestFunc(param);
//=============================================================
//Would really like to use the .apply method over calling the
//function directly. This does work in pure HTML, but not aspx
//=============================================================
//var _ARGS = [];
//_ARGS.push(param);
//iframe.contentWindow('TestFunc').apply(null, _ARGS);
} catch (e) {
alert(e);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="ServerButton" runat="server" Text="Server" />
<input id="ClientButton" type="button" value="Client" onclick="InvokeJS('From Client');" />
<br />
<br />
<iframe id="MyIFrame" runat="server" src="Pages/Test.html" style="width: 700px; height: 300px;"></iframe>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
MainPage.aspx (CodeBehind)
Protected Sub ServerButton_Click(sender As Object, e As EventArgs) Handles ServerButton.Click
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "InvokeJS", "InvokeJS('From Server');", True)
End Sub
Test.html (loads into iframe)
<head>
<title>Test</title>
<script type="text/javascript">
function TestFunc(param) {
document.getElementById("DisplayParam").innerHTML = param;
}
</script>
</head>
<body>
<h1>HTML Page</h1>
<h2 id="DisplayParam"></h2>
</body>
</html>
window.onload = TestFunc(); doesn't work because Test.html actually didn't fully loaded before the onload event raised, it's same with ServerButton, because the scriptblock was registered before the test.html loaded. that's why no TestFunc is not available to call.
You can try
<asp:Button ID="ServerButton" runat="server" Text="Server" OnClientClick="InvokeJS('From Server');" />
I don't think you like it if you want it to do something before run the script
Then play this trick
<script type="text/javascript">
//this is help check if postback by Server Button, if yes then invoke
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
if (args._postBackElement.id == '<%=ServerButton.ClientID%>')
$('#MyIFrame').load(function(){
InvokeJS('From Client');
console.log('load the iframe');
});
}
</script>
This code works fine in .aspx page no issues. But if I use master page then nothing works fine here. I tried placing the jQuery script in Master page, even then nothing is working. Are there any settings needed to be done here? Still not getting why info div is not loading count. Below is the link
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
I referred following blog also:
http://mwtech.blogspot.co.il/2009/04/2-ways-to-load-jquery-from-aspnet.html
I added below code, script in the master page header also and got from jQuery new version script also.
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script src="scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
MasterPage.master code:
<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"> </script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx code
<script type="text/javascript">
var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';
var Editor2 = '#Editor2';
var Editor1InfoArea1 = '#Info1';
$(document).ready(function () {
TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
TrackCharacterCount(Editor2, Editor1CountLimit, Editor1InfoArea1);
});
function TrackCharacterCount(ctl, limit, info) {
var editor = $(ctl).contents().find('iframe').eq(2);
$(editor).load(function () {
var txt = $(this).contents().find('body').text();
$(info).html(txt.length); //set initial value
$(this).contents().keyup(function () {
var txt = $(this).contents().find('body').text();
if (txt.length > limit)
$(info).html(txt.length).css("color", "red");
else
$(info).html(txt.length).css("color", "");
});
});
}
function ValidateEditor1Length(source, args) {
var editor = $(Editor1).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
}
function ValidateEditor1Length1(source, args) {
var editor = $(Editor2).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div id="Info">Info</div>
<%-- <cc1:Editor ID="Editor1" runat="server" />--%>
<cc1:Editor ID="Editor1" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="Editor1" ClientValidationFunction="ValidateEditor1Length" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
<div id="Info1">Info</div>
<%-- <cc1:Editor ID="Editor2" runat="server" />--%>
<cc1:Editor ID="Editor2" runat="server" />
<asp:CustomValidator ID="CustomValidator2" runat="server" ControlToValidate="Editor2" ClientValidationFunction="ValidateEditor1Length1" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
Thank you.
looks like jquery is not loaded.
Try to use the online jquery google api or online jquery path as follows
google api path
JQUERY.COM
This code works fine in .aspx page no issues. but if i use master page then nothing works fine here,i tried placing the JQuery script in Master page, even then nothing is working. is there any thing setting need to be done here. Still not getting why info div is not loading count. Below is the link
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
I refer following blog also:
http://mwtech.blogspot.co.il/2009/04/2-ways-to-load-jquery-from-aspnet.html
MasterPage.master code:
<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"> </script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx code
<script type="text/javascript">
var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';
var Editor2 = '#Editor2';
var Editor1InfoArea1 = '#Info1';
$(document).ready(function () {
TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
TrackCharacterCount(Editor2, Editor1CountLimit, Editor1InfoArea1);
});
function TrackCharacterCount(ctl, limit, info) {
var editor = $(ctl).contents().find('iframe').eq(2);
$(editor).load(function () {
var txt = $(this).contents().find('body').text();
$(info).html(txt.length); //set initial value
$(this).contents().keyup(function () {
var txt = $(this).contents().find('body').text();
if (txt.length > limit)
$(info).html(txt.length).css("color", "red");
else
$(info).html(txt.length).css("color", "");
});
});
}
function ValidateEditor1Length(source, args) {
var editor = $(Editor1).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
}
function ValidateEditor1Length1(source, args) {
var editor = $(Editor2).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div id="Info">Info</div>
<%-- <cc1:Editor ID="Editor1" runat="server" />--%>
<cc1:Editor ID="Editor1" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="Editor1" ClientValidationFunction="ValidateEditor1Length" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
<div id="Info1">Info</div>
<%-- <cc1:Editor ID="Editor2" runat="server" />--%>
<cc1:Editor ID="Editor2" runat="server" />
<asp:CustomValidator ID="CustomValidator2" runat="server" ControlToValidate="Editor2" ClientValidationFunction="ValidateEditor1Length1" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
Thank you.
There should be a file called jquery-1.3.2.js and/or jquery-1.3.2.min.js.
You need to reference one of those two. The VSdoc file you are using is just for intellisense purposes in older versions of Visual Studio.
Your Script tag should look like this:
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
In addition you might want to update to a newer verison of JQuery. According to Jquery.com/download, the uptodate-versions are 1.11.3 and 2.1.4.
Inside visual Studio you can also use the package manager console to install a new version of Jquery using the following command(s):
Install-Package jQuery
Update-Package jQuery
I have a tabcontainer with three panel, inside that I have gridview. When I user click on the tab the gridview is loaded. I want untill the gridview is loading, an img gif should be shown, and should got hide after the grid loads completely.
For that I had written code as:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="example.aspx.cs"
Inherits="example" %>
<%# Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 id="Head1" runat="server">
<script type="text/javascript">
$(function() {
$("#mytab").mytab({
ajaxOptions: {
type: 'POST',
data: postData,
beforeSend: function() {
$('#loader').show();
},
complete: function() {
$("#loader").hide();
}
}
});
});
</script>
</head>
<body>
<form id="form2" runat="server">
<iframe id="iFrame2" runat="server" height="2px" width="2px"></iframe>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div>
<asp:ScriptManager ID="ScriptManager2" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
</div>
<asp:Panel ID="loader" runat="server" Wrap="true" CssClass="body" >
<table cellpadding="5" cellspacing="5" style="width:322px; height:245px; border:1">
<tr>
<td style="width:322px; height:245px; border:1">
<asp:Image ID="Image1" Width="322px" Height="245px" BorderWidth="0" runat="server" ImageUrl="Images/loading.gif" />
</td>
</tr>
</table>
</asp:Panel>
<cc1:TabContainer ID="mytab" runat="server" Width="100%"
Visible="true" AutoPostBack="true" >
<cc1:TabPanel runat="server" HeaderText="application" ID="TabPanel1"
>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<table class="outline-tabs">
<tr class="pagination-row">
</tr>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" CssClass="tblGrid" AllowSorting="True">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</cc1:TabPanel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
But when I run the application I get a error as:
Microsoft JScript runtime error: Object expected
What is wrong with the above code, any file is missing, since I'm using jquery.
Try this instead of your ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#mytab").mytab({
ajaxOptions: {
type: 'POST',
data: postData,
beforeSend: function() {
$('#loader').show();
},
success: function(data) {
console.dir(data)
},
error: function(error) {
console.dir('ERROR: ' + error)
}
complete: function() {
$("#loader").hide();
}
}
});
})
</script>
with the console.dir(); you trace your incoming data-object in chrome or firebug. ie isnt a good browser for development.
hope this helps.
Ah, I see. The examplecode uses tabs instead of mytab. This means that the example code uses jquery-ui (you find it here: http://jqueryui.com/).
For tabs you find the docs here (http://jqueryui.com/demos/tabs/ klick on the link "view source").
So have a look in your compiled source with firebug or webinspector and look for jquery, jquery-ui and all source-files like images and css for jquery-ui.
If not implemented -> get the source.
After this you should be able to run your code.
For more help please post your compiled(!) source code.