how to fix asp button postback in downloaded theme - asp.net

when i use a downloaded theme i.e from w3layouts.com and modify the html controls to asp controls the asp button doesn't work i.e it doesn't go to its "on_click" event .
when i use
the control goes to its backend onclick event but it doesn't get the text box values
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" UseSubmitBehavior="false" />
</div>
</form>
</body>
</html>

Please Check the js files.I think they might have disabled the submit button.
Try to comment it.This is what i came across in my downloaded theme.This code prevents form from postback.
jQuery('form').submit(function(event) {
event.preventDefault();
return false;
});

Related

Exchange changebox box with an image asp.net

I have an Asp.net checkbox and i would like to exchange the checkbox box with an image for checkbox checked equals true and another image for checkbox checked equals false.
Here is the link for checkbox checked.
Checked
Here is the link for checkbox unchecked.
Unchecked
Here is the code for the checkbox.
<asp:CheckBox ID="chkSemanal" CssClass="input-lg" runat="server" AutoPostBack="True" oncheckedchanged="chkSemanal_CheckedChanged1" />
What i managed to do so far is this add a text property to the checkbox and there put img tag with image link but that does not hide the checkbox box.
Here is my answer:
The reference to the pictures is at the root of my project
Html :
<html runat="server" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkSemanal" CssClass="input-lg" runat="server" style="display:none" AutoPostBack="True" oncheckedchanged="chkSemanal_CheckedChanged1" />
<label for="chkSemanal">
<img id="img" runat="server" src="Checkbox_False.jpg"></img>
</label>
</div>
</form>
</body>
</html>
Code behind:
protected void chkSemanal_CheckedChanged1(object sender, EventArgs e)
{
if (chkSemanal.Checked)
img.Attributes.Add("src", "Checkbox_True.jpg");
else img.Attributes.Add("src", "Checkbox_False.jpg");
}
Hopes this helps!

how to animate grid view rows to display one row after another in a same page. And all should be on the page?

how to animate grid view rows to display one row after another in a same page. And all should be on the page?
any body please help me out.thanks in advance
Animating an ASP.NET GridView is not what you're after. You'll want to animate the HTML generated from the ASP.NET GridView, and for that you'll need javascript and/or jQuery. These scripting languages were built for the web and facilitate DOM manipulation.
In this case, a possible approach is to render the rows invisible on document ready, then display (and animate) them one at a time.
You should now have sufficient information to continue your search.
after 2 days of my work i had done the following :
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("span[id$='label']").animate({marginLeft: "0.05in"},100).first().show("fast", function showNext() {
$(this).next().show(200, showNext);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater runat="server" ID="repeater1">
<ItemTemplate>
<asp:Label runat="server" ID="label" style="display:none" Text='<%#Eval("ename") %>'>
</asp:Label>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>

UserControl Raise Events

I add an onfocus event to a web user control (.ascx) expection it to raise event when it gets focus but it doesn't. Is it not intended to work this way and how can I get it to raise the event? Here is sample below, but it doesn't work.
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="WebUserControl1.ascx.vb"
Inherits="RaiseEventUserControl.WebUserControl1" %>
<div style="padding: 5px; background-color: #C0C0C0">
TB1:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
TB2:
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<%# Register Src="WebUserControl1.ascx" TagName="WebUserControl1" TagPrefix="uc1" %>
<!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 runat="server">
<title></title>
<script type="text/javascript">
function RaiseEvent(obj) {
alert("Event was raised for: " + obj.id)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl1 ID="WebUserControl11" runat="server" onfocus="RaiseEvent(this)" />
<br />
<uc1:WebUserControl1 ID="WebUserControl12" runat="server" onfocus="RaiseEvent(this)" />
</div>
</form>
</body>
</html>
This can be achieved using jquery. In your head element, add the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name^="WebUserControl"]').focusin(function () {
$(this).val("i have focus");
});
});
</script>
What this does is, grabs the input elements whose name starts with "WebUserControl" and adds a "got focus" event. The handler for that event places "i have focus" as the value for that input element.
The way that this would be rendered to the page is that a "onFocus" attribute would be added to the div that represents the control. This is not something that supports focus. You might add the "onFocus" item to say your first text field in the control or something similar to be able to raise the event if needed.

Javascript popup

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.

How can I use jQuery to make a validation icon appear somewhats slowly, fading in

Here's what I have so far but thing aren't really working. (I dragged the jQuery.js file from the Solution Explorer to the area of my html.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SignUpFormTest._Default" %>
<!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 runat="server">
<title></title>
<script src="Scripts/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//fade in the context of whatever is inside the div tag.
$('#name').fadeIn("slow");
});
</script>
</head>
<body bgcolor="#FFFFFF">
<p>
Note that this form doesn't actually do anything
except illustrate the Required Field Validator.
</p>
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<div id="name"><asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage='<img src="../Images/no.png">' runat="server" /></div>
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>
Hint: Try submitting it before you enter something.
</p>
</body>
</html>
When validating the icon just pops up.
No fade in or anything. Also, I know my current solution is hacky, so I'd really like someone to tell me what I should do instead of a creating a DIV tag just for the purpose of one animation.
Make sure the reference to JQuery is valid and use this code:
$(document).ready(function() {
$('#name').hide().fadeIn("slow");
});
If I'm not mistaken, since the div is already visible in your case, jQuery will not fade it in. The hide() method ensures that the div is initially not visible and then fades in slowly.
$(document).ready(function() {
document.getElementById('valTxtName').onpropertychange = function(){
$('#name').fadeIn("slow");
}
});

Resources