Preventing page flicker when changing visibility of objects - asp.net

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"
.....

Related

ASP.NET DatePicker (VB)

I don't see any date picker in ASP.NET controls.
Anyone knows how to add it in my my webpage.
I am using VB as my programming language.
Result
I would like to thank everyone who posted the solutions, code and links which helped me to achieve this thread goal. Based on all of the source the below code is the one which works nicely.
Content1
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
And in
Content2
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
Add this inside your [head] Tag.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
and use this jquery function in aspx page inside [script] tag
$(function () {
$("#datepicker").datepicker();
$("#datepicker").change(function () {
$('#btnRefresh').click();
});
and add one textbox for display selected date. and button for getting the date in sever side. like this code
<input type="text" id="datepicker" runat="server" clientidmode="Static" />
<asp:Button ID="btnRefresh" runat="server" onclick="btnRefresh_Click" ClientIDMode="Static"
Text="Refresh" AutoPostback="true" style="display:none;"/>
use this onclick event to do want you want..
You're right, there isn't anything built-in.
Personally I would recommend the jQueryUI datepicker - it's reliable and flexible, and it's javascript based, so it doesn't matter what your server-side language is.
See https://jqueryui.com/datepicker/
Once you've added the required references to jQuery and jQueryUI, in your aspx page, add a script section like this:
<script type="text/javascript" language="javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
and then add the "datepicker" class to any textbox controls on the page where you want to use the datepicker:
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
P.S. I can also recommend most of the rest of the jQueryUI package, there are some useful items in there which can speed up your development time and make your apps look nicer and be more usable.
You can implement a datepicker on your page with the help of the Calendar control, using javascript on your page. Try this links for simple methods to do it:
http://www.vbknowledgebase.com/?Id=150&Desc=ASP.Net-DatePicker-using-Calendar-Control
http://www.codedigest.com/Articles/ASPNET/247_DatePicker_Control_in_ASPNet.aspx
http://www.aspsnippets.com/Articles/DateTimePicker-control-for-ASPNet-TextBox-Example.aspx

asp input field on click clear value

I'm wanting to change the value of my inputs with my asp form fields so that when clicked it clears the content and if someone doesn't type any value and clicks another field it will re-add the default value again, if changed it leaves the new text.
eg. field:
<asp:TextBox ID="NameInfo" CssClass="NameInfo" Width="300" runat="server" text="Name" />
Thanks in advance for any responses. I'm a beginner at asp so I'm not sure how to do these types of features.
I believe the functionality you need would be best achieved using jQuery and a plugin. Perhaps look into http://code.google.com/p/jquery-watermark which from experience works well.
You should just need to download that library and then have something like the following within the head tags of your page:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/watermarkplugin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=NameInfo.ClientID").watermark('The text you want to appear');
});
</script>
Found a simple alternative:
<asp:TextBox ID="NameInfo" CssClass="NameInfo" onfocus="if(this.value == 'Name'){this.value='';}" onblur="if(this.value == ''){this.value='Name';}" Width="300" runat="server" text="Name" />

ColorBox (jquery plug in) my textbox values are empty after postback

I'm having trouble getting the values from text box when using ColorBox http://colorpowered.com/colorbox/
I have a form that opens a ColorBox modal dialog.In the modal i have a asp.net textbox and a button when i click the button i'm getting the postback but the value of the textbox is always empty.
<script type="text/javascript">
$(document).ready(function () {
$(".example8").colorbox({ width: "50%", inline: true, href: "#inline_example1" });
});
</script>
....
<form id="form1" runat="server">
Click here</p> <a class='example8'
href="#">Inline HTML</a></p>
<!-- This contains the hidden content for inline calls -->
<div style='display: none'>
<div id='inline_example1' style='padding: 10px; background: #fff;'>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton><asp:TextBox
ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
</form>
Any help will be appreciated.
Thanks.
Try adding the following code to the method call:
$("#colorbox").appendTo('form');
So your code will look like this:
<script type="text/javascript">
$(document).ready(function () {
$(".example8").colorbox({ width: "50%", inline: true, href: "#inline_example1" });
$("#colorbox").appendTo('form');
});
</script>
At least that's what worked for me!
Hope this helps!
This problem occurs because the Colorbox's content is created outside form tag.
To resolve the problem edit the colorbox.cs and edit the method that create the modal.
If you prefer, you can download the file that I changed and fix the problem.
http://www.coyote.inf.br/jquery.colorbox.js

JQuery not working

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.

How to show/hide gif image when button click in asp.net

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.

Resources