I am displaying a floating feedback form in my website and using JQuery to handle the slide in and out functionality. Following is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SlidingWindow.Default" %>
<%# Register TagPrefix="ajax" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<!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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<form id="form1" runat="server">
<asp:ScriptManager runat = "server"></asp:ScriptManager>
<div class="feedback-panel">
<asp:UpdatePanel ID="UpdatePanel1" runat = "server">
<ContentTemplate>
<a class="feedback-tab" href="#"></a>
<asp:Panel ID = "panel1" runat = "server">
<table>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="Label1" runat = "server" Text = "Name"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtName" CssClass = "feedbacktextbox"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="lblEmail" runat = "server" Text = "Email"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtEmail" CssClass = "feedbacktextbox"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Label ID="lblFeedback" runat = "server" Text = "Comments"></asp:Label></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:TextBox runat = "server" ID = "txtFeedback" TextMode="MultiLine" CssClass = "width"></asp:TextBox></td></tr>
<tr style="height:100%;white-space:nowrap;"><td><asp:Button runat = "server"
ID = "btnFeedbackSubmit" Text = "Submit" onclick="btnFeedbackSubmit_Click" />
</td></tr>
</table>
</asp:Panel>
<asp:Panel ID = "panel2" runat = "server"><asp:Label runat = "server" ID = "lblFeedbackMsg"></asp:Label></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
var feedbackTab = {
speed: 300,
containerWidth: $('.feedback-panel').outerWidth(),
containerHeight: $('.feedback-panel').outerHeight(),
tabWidth: $('.feedback-tab').outerWidth(),
init: function () {
$('.feedback-panel').css('height', feedbackTab.containerHeight + 'px');
$('a.feedback-tab').click(function (event) {
if ($('.feedback-panel').hasClass('open')) {
$('.feedback-panel')
.animate({ left: '-' + feedbackTab.containerWidth }, feedbackTab.speed)
.removeClass('open');
} else {
$('.feedback-panel')
.animate({ left: '0' }, feedbackTab.speed)
.addClass('open');
}
//event.preventDefault();
});
}
};
feedbackTab.init();
});
</script>
<style type="text/css">
.feedback-panel {
padding:5px;
width: 250px;
background:#C4C4FF;
border: 5 solid #8080FF;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: White;
position:fixed;
top:77px;
left:-261px;
}
.feedback-panel a.feedback-tab {
background: url(/images/feedbackbutton.gif) no-repeat scroll 0 0;
display:block;
height:122px;
left:45px;
bottom:5px;
position:relative;
float:right;
text-indent:-9999px;
width:40px;
outline:none;
}
.feedbackformtable
{
width: 215px;
}
.feedbacklabel
{
font-family: Arial Helvetica Sans-Serif;
font-size: medium;
color: Black;
}
.feedbacktextbox
{
width: 200px;
font-family: Verdana;
font-size: 12px;
border: 1px solid #8080FF;
}
</style>
The form is used to send feedback as an email. As soon as the submit button is clicked, the form is closed. Is there any way to keep the form open after clicking the submit button? I want to display a message on the form instead of closing it. Much appreciate any help.
Thanks.
Related
Good Morning
I have a webpage with a button pad on it. It is used at a gas station with bad network so everytime they click on the button to add a number to the textbox it will load forever so I changed the button clicks to javascript.
It works perfectly but now the code behind gets an empty value (Not null) when i retrieve the value from the textbox.
This is my code
The buttons used to add the numbers to the textbox
and the textbox
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OVKWEBAPP.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="mainstyle.css" />
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
/*background-color: black;*/
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtRknr" runat="server" CssClass="txtBoxRknr" PlaceHolder="Rekening Nommer" Enabled="False" autocomplete="off" Width="175px"></asp:TextBox>
<input type="button" id="btnPad1" runat="server" value="1" class="buttonsb" onclick="input(this);"/>
<input type="button" id="btnPad2" runat="server" value="2" class="buttonsb" onclick="input(this);"/>
<asp:Button ID="btnMsg1" runat="server" Text="Gaan Voort" CssClass="buttonsa" OnClick="btnMsg1_Click" />
</form>
</body>
<script type="text/javascript">
function input(e) {
document.getElementById("<%=txtRknr.ClientID %>").value = document.getElementById("<%=txtRknr.ClientID %>").value + e.value;
}
</script>
</html>
And this is my code in the code behind file
protected void btnMsg1_Click(object sender, EventArgs e)
{
lblError.Text = "";
//string user = txtRknr.Text;
string user = ((TextBox)FindControl("txtRknr")).Text;
if(user == "")
//if (txtRknr.Text == "")
{
lblError.Text = "ONGELDIGE REKENING NOMMER";
return;
}
}
Basically all this needs to do is add an account number to a textbox from an button pad on the website.
After the account is added they would click on continue button and then the code behind checks if the textbox is empty if it is not empty it connects to database to check if it is valid.
But no matter how many numbers i add to the textbox it is still empty when i access it from code behind.
Enabled="False" means that your input field will have a disabled attribute. Disabled form elements do not get posted in HTML forms, which means that when you access it from the code-behind, it's using the default value of the textbox.
Try ReadOnly="True" instead of Enabled="False" if you don't want the field to be edited by hand.
EDIT
I guess ASP.NET prevents you from reading the value from a ReadOnly=True textbox, to prevent you from doing exactly what you're trying to do. A <asp:HiddenField> creates an <input type="hidden">, which you should be able to write the value and have it posted properly to the codebehind.
In the line
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OVKWEBAPP.WebForm1" %>
replace in Inherits="OVKWEBAPP.WebForm1" with Inherits="OVKWEBAPP.default"
try this.
Request.Form["by-name-attribute"];
I have implemented some web-page in ASP.NET. I want to add a progress bar to my page. Because the page takes several minutes to load.
I want to put show Progress bar function at the start of Page_Load function. And hide it at the end of the Page_Load function. How can I implement this?
Please give me some advice. Thank you in advance.
<%# Page Language="C#" AutoEventWireup="true" %>
<!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>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 220px;
height: 20px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
text-align: center;
line-height: 20px;
}
</style>
<script type="text/javascript">
function ToggleProgressBar() {
var loading = window.jQuery('#loading');
if (loading.is(':visible')) {
loading.hide();
}
else {
var top = Math.max(parseInt($(window).height() / 2 - loading.height() / 2), 0);
var left = Math.max(parseInt($(window).width() / 2 - loading.width() / 2), 0);
loading.css({ top: top, left: left });
loading.show();
}
}
function blahblah(s, e) {
// some blah blah function contents
}
function blahblah2(s, e) {
// some blah blah function contents
}
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
**// TODO: Show Progress Bar**
DelayTime(); // dummy function to delay page load
**// TODO: Hide Progress Bar**
}
protected void DelayTime()
{
txt_delay.InnerText = "";
for (int i = 0; i < 3000; i++)
{
txt_delay.InnerHtml += i.ToString("0000") + ", ";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="txt_delay" runat="server"></span>
<div id="loading" align="center" runat="server">
Loading...
<%--<img src="/Images/progress-indicator.gif" alt="" />--%>
</div>
</div>
</form>
</body>
</html>
Another way would be to give your css a class. Then put a div as a placeholder where you want the window to show. Give the div an id and assign it's css class the id of your class and set the display attribute to none. Then when you are ready use a bit of jquery to change the display from none to say block. assuming you have done something like div id='myWait' display='none' class='mycssclass'
then jquery along the lines ('#myWait').attr('display','block');
There are a few posts around on how to make a re-sizable div with JQuery. I'm using asp.net and used code from several posts to do this which is appended below.
What I need to do now is have a button which when clicked I get another cloned draggable and re-sizable div, I also need to capture the x, y width and height of each div that is created. The code below captures these for the hard coded one and displays the values in a series of asp.net text boxes.
Cheers for any help and advice
Regards
CM
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs"
Inherits="Default3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Cloned Divs</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-
ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#drag {
width: 6em;
height: 6em;
padding: 0.5em;
border: 3px solid #ccc;
border-radius: 0 1em 1em 1em;
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
#Buttons {
width: 50px;
height: 50px;
left: 50px;
position: absolute;
}
</style>
<script>
$(function () {
$("#drag").draggable(
{
containment: $('body'),
drag: function () {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
var myHeight = $("#draggable").height();
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
$("#<%=txtX.ClientID%>").val(xPos);
$("#<%=txtY.ClientID%>").val(yPos);
}
}).resizable({
resize: function (event, ui) {
var mywidth = $(event.target).width();
var myHeight = $(event.target).height();
$('#width').text('width: ' + mywidth);
$('#height').text('height: ' + myHeight);
$("#<%=txtWidth.ClientID%>").val(mywidth);
$("#<%=txtHeight.ClientID%>").val(myHeight);
}
});
});
$('#btnAdd').click(function () {
var structure = $('<div id="draggable1" class="ui-widget-content"></div>');
$('#body').append(structure);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="drag" class="ui-widget-content">
<ul>
<li id="posX"></li>
<li id="posY"></li>
<li id="width"></li>
<li id="height"></li>
</ul>
</div>
<div id="Buttons">
<asp:Label ID="lblX" runat="server" Text="X: "></asp:Label><asp:TextBox
ID="txtX" runat="server"></asp:TextBox>
<asp:Label ID="lblY" runat="server" Text="Y: "></asp:Label><asp:TextBox
ID="txtY" runat="server"></asp:TextBox>
<asp:Label ID="lblWidth" runat="server" Text="Width: "></asp:Label><asp:TextBox
ID="txtWidth" runat="server"></asp:TextBox>
<asp:Label ID="lblHeight" runat="server" Text="Height: "></asp:Label>
<asp:TextBox ID="txtHeight" runat="server"></asp:TextBox>
<asp:Button ID="btnAdd" runat="server" Text="Add Div" />
</div>
</form>
</body>
</html>
Well, you have some serious css issues to deal with. I'm not entering this matter, but I'm going to answer you question about the div add.
The easiest approach would be turning your "$.draggable" event into a separate method, and apply the draggable property by a class, not an id. Then call it on every div add. Also, to append a element using JQuery use $(document.body).append("").
Finally, you shouldn't use a asp:Button for this, but if you must, be sure to add a OnClientClick="return false;" property, otherwise it will submit your page.
Here's the javascript adjustments:
function ApplyDrag() {
$(".draggable").draggable(
{
containment: $('body'),
drag: function() {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
var myHeight = $("#draggable").height();
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
$("#<%=txtX.ClientID%>").val(xPos);
$("#<%=txtY.ClientID%>").val(yPos);
}
}).resizable({
resize: function(event, ui) {
var mywidth = $(event.target).width();
var myHeight = $(event.target).height();
$('#width').text('width: ' + mywidth);
$('#height').text('height: ' + myHeight);
$("#<%=txtWidth.ClientID%>").val(mywidth);
$("#<%=txtHeight.ClientID%>").val(myHeight);
}
});
}
$(function() {
ApplyDrag();
$('#<%=btnAdd.ClientID %>').click(function() {
var structure = $('<div class="draggable ui-widget-content">BLABLA</div>');
$(document.body).append(structure);
ApplyDrag();
});
});
I have used following code where i used external .js file as well as inline script function.Inline is working fine and label is changed to green color but when i put same function in .js file then it shows me wrong output
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="JScript1.js" type="text/javascript"></script>
<%--<script>
function onLeave1(_input, _labelInput) {
var char = /^[A-z]+$/;
var labelValue = _labelInput;
var check = _input.value;
if (_input.value.match(char)) {
$('.' + _labelInput).css("color", "green");
// var someVariable = document.getElementById("Label8").innerHTML;
// alert(someVariable);
}
else {
$('#Label8').css("color", "red");
}
}
</script>--%>
<style type="text/css">
.style1
{
height: 26px;
}
.style2
{
height: 26px;
width: 131px;
}
.style3
{
width: 131px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td class="style1">
<asp:Label runat="server" ID="lbl1" Text="First Name:-"></asp:Label>
</td>
<td class="style2">
<asp:TextBox ID="txtID2" runat="server" onblur="onLeave1(this,'Label8')"></asp:TextBox>
<asp:Label class="Label8" runat="server" Text="|" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Try to change:
$('#Label8').css("color", "red");
to:
$('.Label8').css("color", "red");
since you've assigned class="Label8" to your label
This code works only with the 2 alerts active in the script block, if you comment the first or the second alert the geocode function doesn't work.
It is a simple asp.net page that try to obtain latitude and longitude from an address, in this case hard coded:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %>
<!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="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/Global/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%">
<div style="width: 50%; clear: left; float: left; text-align: right;">
Latitudine:
</div>
<div style="width: 50%; float: left; text-align: left;">
<asp:TextBox ID="TxbLatitudine" runat="server" Columns="20" />
<asp:Button ID="BtnFind" runat="server" Text="Cerca cordinate" OnClientClick="javascript: findLocation();" />
</div>
</div>
<div style="width: 100%">
<div style="width: 50%; clear: left; float: left; text-align: right;">
Longitudine:
</div>
<div style="width: 30%; float: left; text-align: left;">
<asp:TextBox ID="TxbLongitudine" runat="server" Columns="20" ></asp:TextBox>
</div>
</div>
</form>
<script type="text/javascript">
function findLocation() {
var geocoder = new google.maps.Geocoder();
alert("before"); //if you remove this doesn't work
geocoder.geocode({ 'address': "Cagliari, Italy" }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$('#<%= TxbLatitudine.ClientID %>').val("a");
} else {
$('#<%= TxbLongitudine.ClientID %>').val("not OK");
}
});
alert("after"); //if you remove this doesn't work
}
</script>
</body>
</html>
I replaced the asp:Button with html input button:
<input id="Button1" type="button" value="Find..." onclick="javascript: findLocation();" />
the first one caused page postback that interfered with the client script block function.