I have a asp page where i have a button.When i click on the button i should display a gif image.When the process is completed ,again the images has to be hidden.
Please find my below code behind
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="display: none" id="dvloader">
<img src="Images/process_status.gif" /></div>
<asp:Button ID="btnLoad" runat="server" Text="Load" OnClick="btnLoad_Click" />
</form>
</body>
Please find the below code behind
protected void btnLoad_Click(object sender, EventArgs e)
{
// Show the gif image
System.Threading.Thread.Sleep(5000);
// hide the gif image
}
How can i achive this ?
Thanks.
The method in your example is server-sided. What you want to do is on the client side and must be done in javascript therefore.
You could use the client-sided onclick-event to show the GIF after the button has been clicked. You can set the client-sided onclick-event somwhere in the Page-Load method for example:
btnLoad.Attributes.Add("onclick", "alert('JavaScript to show GIF goes here...');");
After the PostBack, the GIF will be hidden again automatically...
You could actually apply the event to the element without using the inline event handler.
Using jquery you could say:
$(document).ready(function() {
$('#btnLoad').click(function(){alert('JavaScript to show GIF goes here...');});
});
This assumes your button has an id of btnload.
Related
We are loading a child page in the parent page parent.aspx as follows -
$("#result").load("Child.aspx");
The Child.aspx consists of an asp:Button.
Problem -
OnClick of asp:Button is causing Child.aspx to be opened instead of being embedded in Parent.aspx as before the click event.
Expected -
Child.aspx should remain embedded in Parent.aspx onClick of the Asp:Button
What we tried: Added an UpdatePanel & ContentTemplate but the Child.aspx page is still getting refreshed.
[Snap1] Parent.aspx:
Note: onClick of Button will load another page i.e Child.aspx page within the <div id="result"></div> of the Parent page itself using
$("#result").load("Child.aspx");
[Snap2] Parent.aspx:
Note: The Child.aspx page gets loaded inside the Parent.aspx page.
The Child.aspx page consists of an Asp.net button named "ChildPageButton".
onClick of ChildPageButton reloads the page and causes the Parent.aspx page to dissapear.
[Snap3] Child.aspx:
[Snap3]
Code -
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="NewLab.Parent" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/redmond/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="/js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="/js/jquery.colorbox.js"></script>
<title></title>
<script type="text/javascript">
function openSection() {
alert("openSection");
//Loads the Child.aspx page inside the Parent.aspx result div.
$("#result").load("Child.aspx");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager
runat="server">
</asp:ScriptManager>
<h1>Parent Page</h1>
<asp:Button ID="lnkbtn" runat="server" Text="Button" OnClick="Button1_Click" Height="51px" Width="218px" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="result"></div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace NewLab
{
public partial class Parent : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
//This invokes the javascript function openSection
if (!ClientScript.IsStartupScriptRegistered("openSection"))
{
Page.ClientScript.RegisterStartupScript(this.GetType(),
"openSection", "openSection();", true);
}
}
}
}
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="NewLab.Child" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function calljs() {
alert("click");
event.preventDefault();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="background-color:blue; height:400px">
<h1>CHILD PAGE LOADED!</h1>
<input type="button" value="htmlbutton" />
<asp:Button ID="Button1" runat="server" Text="AspPageButton"/>
</div>
</form>
</body>
</html>**/
The code above helps to reproduce the problem.
It can be observed that onClick of ChildPageButton reloads the page and causes the Parent.aspx page to dissapear.
The Child.aspx page appears as an individual page, rather it should remain embedded inside the Parent.aspx page as depicted in Snap2.
Thanks in advance.
The problem is that when your child button causes a postback, it's a postback of the child page, so the child page is what gets reloaded. I recommend you consider ASP.NET User Controls instead of JQuery to achieve what you're aiming for here.
I want to open a dialog in an itemtemplate field of a gridview.
I have a linkbutton on my page and I want to open a jquery dialog when the linkbutton is clicked.
My code is:
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#LinkButton1').click(function(){
$('#dialog').dialog({modal:true});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<div id="dialog">
ABid ALi
</div>
</form>
</body>
Why is what I am doing not working?
You can try this. This is one of the simple implementation.
Javascript Code
function testFunction(){
alert("test message");
}
Server Side Code
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="testFunction();">LinkButton</asp:LinkButton>
I hoe this helps.
add
jquery-1.8.2.js and jquery-ui.js files
in head tag..
using this all jquery code and dialog will be accessible to the browser.
I have a button in my page, which when clicked makes visible (using back-end code) a Login Control. However, it doesn't just appear as I would wish, it actually flickers onto the page which is quite annoying.
Is there any way to prevent this?
Have you considered using JavaScript instead???
Example:
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#myb").click(function () {
$("#login").toggle();
});
});
</script>
<input type="button" id="myb" value="show/hide" />
<asp:Login runat="server" ID="login" DestinationPageUrl="~/Default.aspx"
.....
I am trying to open this modal DIV from code behind but I am getting error message. Please let me know what's wrong with this.
Here is .aspx code.
<div id="modal" runat="server" style="display:none;">
<asp:Button ID="btnClose" runat="server" Text="Close" onClick="Popup.hide('modal')" CausesValidation="False"/>
</div>
Code behind
if (!Page.ClientScript.IsStartupScriptRegistered("MyScript"))
{
string confirmbox = "Popup.showModal('modal');return false;";
Page.ClientScript.RegisterClientScriptBlock(GetType(), "MyScript", confirmbox, true);
}
For the error mentioned by you as
"Too many characters in character literal when loading the page"
You have to use OnClientClick instead of using onClick as it is a ASP.NET Server Control and not a normal HTML5 control.
For the code you have asked for:
Code for opening modal on page load
ASPX Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function hidePopup()
{
document.getElementById('modal').close();
}
</script>
</head>
<body onload="showPopup();">
<form id="form1" runat="server" >
<dialog id="modal">
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="hidePopup();return false;"/>
</dialog>
</form>
</body>
</html>
Code Behind .CS Code
if (!Page.ClientScript.IsStartupScriptRegistered("MyScript"))
{
string confirmbox = "function showPopup(){document.getElementById('modal').showModal();}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", confirmbox, true);
}
Tested on Chrome Version:39.0.2171.99 m , it works perfectly.
With this modal you can also exit the popup using "Esc" key,instead of Close button also.
I am trying to implement JQuery in my web page but i am not been able to implement it successfully.
I have a master page
where i added one script for menu bar that is already using jquery hosted by Google
This is coded in master page itself
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
Now i want to implement a Jquery to set the css visibility property to true or false.
into my content page of same master page.
<script type="text/javascript">
$(document).ready(function(){
$("#lnkAddMore").click(function(){
alert();
}
);
});
</script>
This html control is under my UpdatePanel.
I dont know why it is not working ?
I am using this control under UpdatePanel.
<input type="button" id="lnkAddMore" value="Add More" />
I tried to use it outside my update
panel it is running successfully but
not in UpdatePanel
I think there is a problem using it with an UpdatePanel
HERE IS MY PAGE SOURCE
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<link href="../../Css/Domain.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("#lnkAddMore").click(function(){alert();$('#h').hide(100);});
$('#h').show(100);
});
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="divDomain" runat="server">
<asp:gridview/>
<div style="text-align:right;">
<input type="button" id="lnkAddMore" value="Add More" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Do you really have nested <script> tags or was it a typo?
<script type="text/javascript">
<script type="text/javascript">
If that's not a typo, then that's probably the issue.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ddmenu > li').bind('mouseover', ddmenu_open)
$('#ddmenu > li').bind('mouseout', ddmenu_timer)
});
$(document).bind('click', ddmenu_close); // do you really want to close on any click?
</script>
I have used two approaches with jQuery and UpdatePanels.
The first is this:
jQuery $(document).ready and UpdatePanels?
The other approach I found on Rick Strahl's blog (http://www.west-wind.com/Weblog/posts/154797.aspx) Which is to do something like this in the code behind:
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "alertScript",
#" $(document).ready(function(){
$("#lnkAddMore").click(function(){
alert();
}
);
});", true);
Check this out for another example: Problem with ScriptManager.RegisterClientScriptBlock and jQuery in Internet Explorer 8
Also have a look at jQuery's live() event subscriber.
Check that the ID of your button isn't actually getting changed to something like
ctl00_ContentPlaceHolder1_lnkAddMore
since it's residing in a content placeholder for the master page.
If it is, you'd have to adjust your JQuery.
When you're loading code in under an UpdatePanel, try not wrapping it in $(document).ready();. Ready isn't fired on document for AJAX events.