The idea of the code was to make a separate text box and button so i can create class for each one and make them work like fileupload.
But the javascript runs twice and the fileupload value gets erased.
<style type="text/css">
div.fileinputs
{
position: relative;
}
div.fakefile
{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file
{
visibility:hidden;
}
</style>
<script type="text/javascript" language="javascript">
function uploadFileChange() {
alert("start");
document.getElementById('FileName').value = document.getElementById("FileUpload1").value;
alert("end");
}
</script>
<div class="fileinputs" style="width: 50%;">
<!-- Upload file invisivel-->
<asp:FileUpload ID="FileUpload1" ClientIDMode="Static" class="file" runat="server"
onpropertychange="uploadFileChange();" />
<!-- button e textbox falsas para poder dar syles ao button-->
<div class="fakefile">
<asp:TextBox ID="FileName" CssClass="textbox" ClientIDMode="Static" runat="server" Width="31%" ></asp:TextBox>
<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..."
ForeColor="White" onClick="document.getElementeByID('FileUpload1').click()" />
</div>
</div>
Whats wrong???
Thanks in advance
little correction to your code,
<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..." ForeColor="White" onClientClick="document.getElementeByID('FileUpload1').click();return false;" />
writing return false to clickevent will not post back, the reason why you are losing fileuplaod value is because the page is getting post backed.
or else you could try this,
<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..." ForeColor="White" onClientClick="CallClick();return false;" />
function CallClick(){
document.getElementeByID('FileUpload1').click();
return false;
}
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 want to show 4 popup windows, at the same time, which show 4 different flash slides after a respective image button is clicked.
I used JavaScript to make the popup window but cannot complete the rest of the image button. When i click on the button random flash slide plays.
Please refer below code :-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico"/>
<script src="ddmenu/ddmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("[id*=a]").live("click", function () {
$("#dialog26").dialog({
title: "DMD Officers",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=b]").live("click", function () {
$("#dialog27").dialog({
title: "Outsourced Photographs",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=c]").live("click", function () {
$("#dialog28").dialog({
title: "DMD Dog Squad",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=d]").live("click", function () {
$("#dialog29").dialog({
title: "Snake awareness campaign",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td colspan="3" class="auto-style9">
<nav id="ddmenu">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div id="dialog26" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div id="dialog27" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div id="dialog28" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div id="dialog29" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
This code here $("[id*=btnPopup]") is means that is capture all buttons that contains the btnPopup !, since the rest buttons contains that because of the name (btnPopup2,btnPopup3,btnPopup4) you have capture all with the same (first) code, and what ever you press only the first is fired.
So rename the first button to btnPopup0 if you like to use this code as it is and make it work.
Reference :
https://api.jquery.com/attribute-contains-selector/
But I see more bugs...
in this line $("#dialog").dialog({ that exist on every call, is still call the same part of the page to make it dialog, but I see that the other parts have names like dialog1, dialog2 etc... so this is something that you must fix also.
lots and lots of mistake in your code !!! .Let me point out one by one.
1. $("[id*=a]").live("click" : Similar code exist in other 3 sections. Do Not Use Live to bind events. Its deprecated, and deprecated for good reasons. Taken from the doc
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Also in your scenario [id*=a] is not required. Simply id=a would be sufficient.
live() jquery API Document
2. $("#dialog").dialog({ : You have the same code in other 3 sections as well. You are binding events to the same id. Which is a BIG NO. Do not use same Id's Id's has to be unique in the entire DOM. You can make use of class. Just put the same class name to all the divs and then bind events using the class name.
- When you bind events by using ids Jquery will find the first element with that id in the DOM (reading from top) and binds the event to onle that element.
You are repeating the same script logic multiple times, make it Generic. So cleaning up your HTML and SCripts, Below is what you actually need.
HTML
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" class="imageDialog" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Officers" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" class="imageDialog" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div class="dialog" data-dialog-title="Outsourced photographs" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" class="imageDialog" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Dog Squad" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" class="imageDialog" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div class="dialog" data-dialog-title="Snake awareness campaign" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
Note: I added a class to all the imageButton, And then changed the div id to class. Also added data-dialog-title attribute to hold the titles for the dialog. More About data Attribute You will see its usage below.
Script
<script type="text/javascript">
$(function(){
$.each('.dialog',function(){ //loop all the div's and apply plugin for all of them
$(this).dialog({
title: $(this).data('dialog-title'), //extract the title here.
height: 700,
width: 1000,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
});
$(".imageDialog").on("click", function() {
$(this).closest('td').find(".dialog").dialog( "open" ); //this is how you open the dialog, taken from the plugin site.
});
});
</script>
On document ready apply the dialog plugin to all the div's with class dialog
Bind event to all imageButton by just using class selector .imageDialog
trace up to the parent td, then trace down to find the div with class name 'dialog' and open it.
I need to update an UpdatePanel on onkeyup event of textbox, I've writed this code:
<%# Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="elenco.aspx.vb" Inherits="GestioneCommesse.WebForm1" EnableEventValidation = "false"%>
<asp:Content ID="BodyContent" ContentPlaceHolderID="Main" runat="server">
<asp:CheckBox ID="chc_tutti_anni" runat="server" Text="Cerca in tutti gli anni" AutoPostBack="true" style="top: 151px; left: 10px; position: absolute; " />
<asp:TextBox ID="txt_commessa" runat="server" onkeyup="javascript:__doPostBack('<%= UpdatePanel1.UniqueID %>','')" style="top: 90px; left: 250px; position: absolute; width: 199px"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chc_tutti_anni" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
The problem is that the javascript:__doPostBack('<%= UpdatePanel1.UniqueID %>','') performs a full page postback, instead of postpack only the UpdatePanel.
On event CheckedChange everything is fine.
I've also tried this line:
<asp:TextBox ID="txt_commessa" runat="server" onkeyup="javascript:__doPostBack('<%= UpdatePanel1.UniqueID %>','')" autopostback="true" style="top: 90px; left: 250px; position: absolute; width: 199px"></asp:TextBox>
Someone could help me?
------EDIT------
I've just tried this solution, same problem
How to trigger an UpdatePanel by a TextBox control?
------EDIT------
The question still unsolved, please help me.
Your textbox should be inside UpdatePanel->ContentTemplate.
I trying to show the modal pop using jQuery, ajax updateprocess with progress bar. I'm not good in both. I searched in google and got some example. This code is working without updatepanel. Please help me to work this code with updatepanel.
------------------code without updatepanel--------------
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
z-index: 99;
background-color: transparent;
opacity: 0.8;
filter: alpha(opacity=90);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
position: fixed;
background-color: transparent;
z-index: 999;
}
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
<asp:Button ID="btnSubmit" onclick="btnInvoke_Click" OnClientClick="ShowProgress()"
runat="server" Text="Submit Time" Width="170px" />
<div class="loading" align="center" style="display:none">
<img src="images/a1.gif" alt="" />
</div>
---------------with update panel--------------
<asp:UpdateProgress ID="updProgress" runat="server">
<ProgressTemplate>
<div class="loading" align="center" style="display:none">
<img src="images/a1.gif" alt="" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblText" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="btnInvoke" runat="server" Text="Click" OnClientClick="ShowProgress()"
onclick="btnInvoke_Click" />
</ContentTemplate>
</asp:UpdatePanel>
When I'm using updatepanel how can I close this popup and loader.please help me to write that jQuery.
Please suggest good example with popup with progress bar in updatepanel or any other way to do it.
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1"
AssociatedUpdatePanelID="UpdatePanel1" runat="server">
Update in Progress……..
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
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