I can't get this working. I want to fadeout a div after a postback. This div is inside an updatepanel. I understand that because of updatepanel it will be a partial refresh. But within this context, how can i still use fadeout?
<asp:Content ID="Content1" ContentPlaceHolderID="content_head" runat="Server">
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#div_msg").delay(1500).fadeOut("slow");
});
</script>
</asp:Content>
<asp:UpdatePanel ID="UpdatePanel6" runat="server">
<ContentTemplate>
<asp:Panel ID="pnl_msgs" runat="server" Visible="false">
<div id="div_msg">
<asp:Label ID="lbl_msg" runat="server" Text="Label"></asp:Label>
</div>
</asp:Panel>
<asp:Button ID="but_status_new" runat="server" Text="New" CssClass="new-button-flat" onclick="but_status_new_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
I am not writing any js code in but_status_new_Click function.
Instead document.ready try using function pageLoad since ASP.NET AJAX has its own page lifecycle:
function pageLoad() {
$("#div_msg").delay(1500).fadeOut("slow");
}
Oh and move reference to jQuery to ScriptManager itself
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="js/jquery-1.6.2.min.js" />
</Scripts>
</asp:ScriptManager>
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>
Initially I able to preview image after select image. After added the master page, the javascript is not working anymore.
This is my master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Testing.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
This is my content page
<%# Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Testing1.aspx.cs" Inherits="Testing.Testing1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function imagepreview(input)
{
if (input.files && input.files[0]) {
var fildr = new FileReader();
fildr.onload = function (e) {
$('#Image1').attr('src', e.target.result);
};
fildr.readAsDataURL(input.files[0]);
}
}
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<asp:Image ID="Image1" runat="server" height="100" Width="100" />
<br />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<br />
<asp:TextBox ID="tbRetrieve" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnRetrieve" runat="server" Text="Retrieve" OnClick="btnRetrieve_Click" />
<br />
<asp:Image ID="Image2" runat="server" />
<br />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<br />
<br />
</asp:Content>
And this is my code behind
protected void Page_Load(object sender, EventArgs e)
{
FileUpload1.Attributes["onchange"] = "imagepreview(this)";
if (!IsPostBack)
{
lblMessage.Visible = false;
}
}
So what is the problem?
on adding master page the code of finding the control id will be changed you will have to replace your code like this.
<script type="text/javascript">
function imagepreview(input)
{
if (input.files && input.files[0]) {
var fildr = new FileReader();
fildr.onload = function (e) {
$('#<%=Image1.ClientID%>').attr('src', e.target.result);
};
fildr.readAsDataURL(input.files[0]);
}
}
You need to use code like that in order to call your javascript method on behind.
Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);
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
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.
I am new to Raphael, as well as asp.net. I am trying to test a simple raphael example with asp.net, but I keep geting the following error: Microsoft JScript runtime error: Object expected
this error occurs in this line:
var paper = Raphael("diii", 320, 200);
this is the page full code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master"AutoEventWireup="true" CodeFile="Lingua.aspx.cs" Inherits="Lingua" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<script type="text/javascript" src="Scripts/raphael.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
function createCircle() {
var paper = Raphael("diii", 320, 200);
var circle = paper.circle(50, 40, 10);
cicle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
}
</script>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="ger">one</asp:ListItem>
<asp:ListItem Value="ara">two</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" onClientClick="return createCircle();"
Text="Add" />
<div id="diii"></div>
</asp:Content>
The same error occurs if insted of the mentioned line above I use:
var paper = Raphael(10,50,320,200);
Does anyone know what is the problem?
There are two things which need to be fix in your code
Check what is name of referenced Rafeal js file. Is it raphael-min.js or raphael.js.
In your code you mistype circle as cicle. correct it
Your corrected code is here
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master"AutoEventWireup="true" CodeFile="Lingua.aspx.cs" Inherits="Lingua" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<script type="text/javascript" src="Scripts/raphael-min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
function createCircle() {
var paper = Raphael("diii", 320, 200);
var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
}
</script>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="ger">one</asp:ListItem>
<asp:ListItem Value="ara">two</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" onClientClick="return createCircle();"
Text="Add" />
<div id="diii"></div>
</asp:Content>
If you want to see client side effects then do not trigger event from server side button.
It sounds like your raphael.js is not loading up, have you used the developer tools in your browser to check that all the scripts load (no 404s or 500s)?
Try accessing the scripts at their paths direct in the browser too.
Other than that, I would suggest the following;
Use jQuery 1.6.4 (better supported, bug fixes etc).
Use the jQuery ready function to make sure the page has finished loading before you have tried to call it.
It does look like your script is not loading fully first, so replace your js code with;
<script type="text/javascript">
$(document).ready(function () {
createCircle();
});
function createCircle() {
var paper = Raphael("diii", 320, 200);
var circle = paper.circle(50, 40, 10);
cicle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
}
</script>