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.
Related
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;
});
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.
With jQuery, in (document).ready I assigned a click function to all buttons of my asp.net (aspx) page.
When I click a button outside , the function works properly.
When clicking a button INSIDE the form, it doesn't work. Why?
Here my default.aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQuery._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 type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("input").before("ciao");
});
});
</script>
</head>
<body>
<button id="Button1">Button BEFORE Form</button>
<button id="Button2">Another BEFORE Form</button>
<form id="form1" runat="server">
<button id="btStart">Button in Form</button>
<div>
<input type="text" value="I like number 1" />
<input type="text" value="Smile to number 2" />
</div>
</form>
</body>
</html>
I'm using Visual Studio 2010. I tried also with jQuery 1.4.2, same problem.
Thanks for letting me know, cheers.
Since you are clicking a button in a <form>, it triggers a submit action. Try adding
return false;
after
$("input").before("ciao");
to prevent the default action related to that click event.
It should work but the button is just submitting and refreshing so you are not noticing it. Since your using asp.net you could do it by just using an asp:Button like:
<asp:Button ID="yourButton"
OnClientClick="$('input').before('ciao'); return false;" Text="Test" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="App_Themes/jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script src="Scripts/jquery-1.3.2.min.js"type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript" >
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
</script>
<form id="form1" runat="server">
<div>
<table border="1px" >
<tr>
<td><asp:Label ID="Label4" runat="server" Text="Text"></asp:Label></td>
<td><asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Date"></asp:Label></td>
<td><asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
<input id="myButton" type="button" value="button" />
</td>
</tr></table>
</div>
</form>
</body>
</html>
this is my webform design code..
click function wat written in side script tag is not working...!! Anything wrong.??
.datepicker( "show" ) -->> Call up a previously attached date picker. but I can't see where you initialize your date picker.. call it like this first... $("#datepicker").datepicker();
$(function() {
$("#datepicker").datepicker();
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
});
try to uncomment this line ($("#datepicker").datepicker();) on the demo
demo
Add your script to the document.ready(...) function.
One reason it is not working is that when your script is executed, the myButton element has not yet been added to the DOM, and is thus not found. When using jquery, you should generally wrap your javascript code in the $(document).ready(..) to be sure the DOM is fully loaded when your code is invoked. Try the following:
<script type="text/javascript" >
$(document).ready(function(){
$("#myButton").click(function() {
$("#datepicker").datepicker("show");
});
});
</script>
from the documentation:
show
Signature:
.datepicker( "show" )
Call up a previously attached date
picker.
so first of all you need to attach it!! eg:
$(document).ready(function() {
var textBox = $('#<%= this.datepicker.ClientID %>');
var icon = $('#myButton');
var datepicker = textBox.datepicker();
icon.click(function() {
datepicker.datepicker('show');
});
});
your you might go with the icon-trigger
Look at the source code that has been generated. Is the id still called myButton and datepicker ? Often the id's are rewritten by asp.net unless specified otherwise and you are using version 4.
You will need to use the client id of the controls, e.g
$("#<%=datepicker.ClientId%>").datepicker("show");
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");
}
});