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.
Related
I'm trying to make a website where you can write and customize a mail then send it. I have a problem where the line breaks from a text-area doesn't preserve. When I send the mail with c#, there are no line breaks (sorry for my bad English, not my first language).
Here's my code:
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Mail;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Web_Mail_Manager
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string YourUsername = "(Just gonna cover my Email)";
string YourPassword = "(Just gonna cover my password)";
string Destination = DestinationAdress.Value;
string YourMessageSubject = MailSubject.Value;
string YourMessageBody = MailBody.Value;
try
{
using (SmtpClient client = new SmtpClient("smtp.gmail.com", 587))
{
client.EnableSsl = true;
client.DeliveryMethod = SmtpDeliveryMethod.Network;
client.UseDefaultCredentials = false;
client.Credentials = new NetworkCredential(YourUsername, YourPassword);
System.Net.Mail.MailMessage msgObj = new System.Net.Mail.MailMessage();
msgObj.To.Add(Destination);
msgObj.From = new MailAddress(YourUsername);
msgObj.Subject = YourMessageSubject;
msgObj.Body = YourMessageBody;
msgObj.IsBodyHtml = true;
client.Send(msgObj);
}
}
catch (Exception)
{
}
}
}
}
ASPX:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Web_Mail_Manager.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
<style>
body {
background-color: lightgray;
font-family: 'Poppins', sans-serif;
}
.mailPreview {
background-color: white;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%);
width: 45vw;
height: fit-content;
padding: 15px;
}
#MailBody {
white-space: pre-wrap;
}
#MailbodyContent {
white-space: pre-line;
}
#MailBody {
white-space: pre-line;
}
</style>
<script>
function changeTo(val) {
document.getElementById("toMail").innerHTML = val;
}
function changeSubject(val) {
document.getElementById("subject").innerHTML = val;
}
function changeBody(val) {
var text = val;
document.getElementById("MailbodyContent").textContent = text;
document.getElementById("MailbodyContent").innerHTML.replace(/\n/g, '<br>\n');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="DestinationAdress" oninput="changeTo(value)" runat="server" type="text" placeholder="Recievers E-mail adress" /><br />
<input id="MailSubject" oninput="changeSubject(value)" runat="server" type="text" placeholder="Subject" /><br />
<textarea id="MailBody" oninput="changeBody(value)" runat="server" cols="40" rows="5" placeholder="Content"></textarea><br />
<br />
<div class="mailPreview" id="mailPreview">
<h3>To: <span id="toMail"></span></h3>
<h3>From: (Just gonna cover my email)</h3>
<br />
<h3>Subject: <span id="subject"></span></h3>
<br />
<h3>Content:</h3>
<h4 runat="server" id="MailbodyContent"></h4>
<asp:HiddenField ID="HiddenField1" runat="server" />
</div>
<asp:Button ID="Button1" runat="server" Text="Send mail!" OnClick="Button1_Click" />
</form>
</body>
</html>
Any help would be greatly appriciated!
Since you are sending HTML E-Mails (msgObj.IsBodyHtml = true;) you need to replace newlines with the <br /> tag.
Replace the line
string YourMessageBody = MailBody.Value;
with
string YourMessageBody = MailBody.Value.Replace(Environment.NewLine, "<br />");
I am trying to make a button that cleans specific fields of my page. This is what I have, but it does not work. Not sure what else to do. Some folks tried to help me on the commends of another topic but since I could not make it work I opened this new question.
Thanks
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Landing Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
</script>
<style>
#formTable {
/*border: 1px solid black;*/
margin: 0 auto;
}
#outer {
width: 100%;
height: 700px;
display: flex;
align-items: center;
/*background-color: gray;*/
}
#inner {
width: 300px;
height: 350px;
margin: 0 auto;
/*background-color: yellow;*/
}
</style>
</h:head>
<h:body>
<div id="outer">
<div id="inner">
<h:form class="signupform">
<p>Sign-up for more:</p>
<table id="formTable">
<tr>
<td>First Name:</td>
<td><h:inputText id="inputFirstName" value="#{visitor.firstName}"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><h:inputText id="inputLastName" value="#{visitor.lastName}"/></td>
</tr>
<tr>
<td>Email:</td>
<td><h:inputText id="inputEmail" value="#{visitor.email}"/></td>
</tr>
</table>
<p><h:commandButton id="submit" value="Submit" action="#{visitor.registerVisitor()}"/>
<h:outputText id="outputText" value="#{visitor.result}"/></p>
</h:form>
<button class="clear">Clear</button>
</div>
</div>
</h:body>
</html>
You're calling $('.clear') before the elements exist.
Therefore, you're adding the event handler to an empty set.
You need to run your <script> block after the elements.
Maybe you can try, instead of:
<script>
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
</script>
Instead have:
<script>
$(document).ready(function () {
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
});
</script>
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
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.
HTML Code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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>
<style type="text/css">
.msg_body
{
display: none;
}
</style>
<script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".msg_head").click(function () {
$(this).next(".msg_body").slideToggle();
})
$(".msg_headRoot").click(function () {
$(this).next(".msg_bodyRoot").slideToggle();
})
.toggle(function () {
$(this).children("span").text("[+]");
}, function () {
$(this).children("span").text("[-]");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="msg_headRoot" style="cursor: pointer;">
<p class="msg_headRoot" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
<span>[+] </span>Root
</p>
<div class="msg_bodyRoot">
<div class="msg_head" style="cursor: pointer;">
<p class="msg_head" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
<span>[+] </span>Hello
</p>
<div class="msg_body">
Div text
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Query
Right now it is keeping the div opened. I want to keep the div closed by default and user should click the plus to open it.
EDIT
Forgot to mention the root div. I have actually one nested div. I meant on click the plus of outer dive should open the inner div
CSS:
.msg_body, .msg_bodyRoot {display: none;}
Updated JS:
$(document).ready(function() {
var toggler = function(elem) {
elem.slideToggle(500, function() {
if (elem.is(':visible')) {
elem.parent().find("p:first > span").text("[-]");
} else {
elem.parent().find("p:first > span").text("[+]");
}
});
};
$('div.msg_headRoot').click(function(e) {
toggler($(this).children(".msg_bodyRoot"));
e.preventDefault();
return false;
});
$("div.msg_head").click(function(e) {
toggler($(this).children(".msg_body"));
e.preventDefault();
return false;
});
});
Working fiddle: http://jsfiddle.net/N9E9b/2/
Add some CSS to your markup:
.msg_body { display: none; }
You are missing a semi-colon, and no toggle on the inner part. I made some assumptions on my part that the root should work with its child and the inner with its child. I surely hope I have not made an oversimplification of what you want here.
EDIT: REMOVED BAD CODE THAT HAD BUGS
Just to follow up with the simpler: (and fix a minor issue with +/- text in prior version)
$(document).ready(function() {
$(".msg_head,.msg_headRoot").click(function() {
$(this).next(".msg_body").slideToggle();
var clickp = $(this).children("span:contains('+')");
var clickm = $(this).children("span:contains('-')");
clickp.text("[-]");
clickm.text("[+]");
});
});
<div>
<p class="msg_headRoot"><span>[-] </span>Root</p>
<div class="msg_body">
<p class="msg_head"><span>[+] </span>Hello</p>
<div class="msg_body">Div text</div>
</div>
</div>
.msg_headRoot,.msg_head{margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold; cursor:pointer;}
.msg_body div.msg_body{display:none;}
Example here: http://jsfiddle.net/ykRaY/3/