I'm populating an email template and I'm having some issues with the button onclick event.
What I am trying to achieve is when clicking on the button it should open a URL in a new window rather than a new tab.
Currently when the email gets sent it is losing the onclick event functionality. Any recommendations on how can I achieve this?
I have also tried creating the button in the html template rather than replacing the tags as code below, but still run into the same issue.
HTML Code:
<p>
Hi,
</p>
<p>
A [JobType], to start on [JobStartDate]
<br />
Click here to view the job: [JobUrl]
</p>
<p>
<b>Job Details:</b>
<br />
- Reference: [JobReferenceNumber]
<br />
- Checklist: [AnswerEvaluationName]
<br />
- Created by: [JobCreator]
<br />
</p>
<p>
Kind regards<br />
</p>
<p class="auto-style6">
Please do not reply to this system generated email
</p>
</body>
public void CreateEmailNotificationForNewJob()
{
// Populate the Email Template
string EmailRecipientTestingNotes = "";
string EmailSubject = "";
string EmailTemplate = EmailSender.LoadEmailTemplate("EmailNewJob.html");
string EmailTo = "";
string TestButton = ("<input type=\"button\" onclick=\"window.open('https://www.google.com/','mywin','width=500,height=500');\" >");
EmailSubject = "Job/task ";
EmailTemplate = EmailTemplate.Replace("[JobReferenceNumber]", "Reference");
EmailTemplate = EmailTemplate.Replace("[AnswerEvaluationName]", "Daily Update");
EmailTemplate = EmailTemplate.Replace("[JobStartDate]", "Today");
EmailTemplate = EmailTemplate.Replace("[JobType]", "1");
EmailTemplate = EmailTemplate.Replace("[CompanySiteName]", "");
EmailTemplate = EmailTemplate.Replace("[SiteName]", "");
EmailTemplate = EmailTemplate.Replace("[JobUrl]", TestButton);
EmailTo = "test#test.co.za";
try
{
// Send email code
}
catch (Exception ex)
{
// Add handling
}
}
Most email clients don't allow execution of JavaScript like a browser would (usually this is for security reasons).
But if you want to create a link to a URL to display in the email, you can just use a hyperlink instead of a button. (You can of course always use CSS to make it look like a button, if you wish.)
string TestButton = ("<a href='https://www.google.com/'>Click here</a>");
Email clients won't accept JavaScript.
The best you can do is to use a standard link with the target attribute set to _blank:
string TestButton = ("<a href='www.blah.com' target='_blank'>link text</a>");
Having said that, most email clients will open in a new/blank tab anyway. However, this is helpful still for those who use click "view this email in your browser" (on Outlook desktop, for example, this is generated automatically).
Just use a hyperlink instead of a button because email clients won't accept JavaScript.
Of course you can use css to make it looks like a button.
Button:
string TestButton = ("<a class='button' href='https://www.google.com/'>Click here</a>");
Css:
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
Related
I want to add color and border to a javascript variable using css. Below is my code;
var msg = "OK"; //i want this to colored and bordered with green.
msg = "Conflict"; // i want this to be colored and bordered with red.
I tried another answer from other questions but it doesn't seem to work with me.
If you're just trying to add styles to a JavaScript variable you can't do that, and I don't understand what you would hope to achieve by doing that.
I am therefore going to assume you want to add styles to an html element that you have extracted as a JavaScript variable like so
let msgElement = document.getElementById('msg')
let msg = "OK"
msgElement.innerHTML = msg
In this case, you can add styles to the element like so
msgElement.style.color = "red"
msgElement.style.border = "2px solid red"
In your example, when you change the value of msg to "Conflict", you are doing just that - changing it. You can't have two separate values held by the same variable.
As one of the comments says, this is basic web development, so I would advise some further reading, or an online course such as those provided by Codeacademy
As the other answers state, you can't apply a CSS rule to a variable. You can, however, do something like this:
<html>
<head>
<style>
.redgreen {border-style: solid; border-color: green; color: red;}
</style>
<script>
function foo() {
let msg = "<div class='redgreen'>Hello, world!</div>";
document.getElementById("themsg").innerHTML = msg;
}
</script>
</head>
<body onload='foo();'>
<p id='themsg'>Your message here</p>
</body>
</html>
That is, define "msg" as an HTML element instead of a text string.
You can't add CSS to a javascript variable.
if you are create element using javascript
html:
<div class="parent-div">
</div>
js:
var msg = "OK";
element = document.createElement('p');
// Give the new element some content and css
element.innerHTML = msg;
element.style.color = 'green';
element.style.border = "1px solid red";
// append element to parent div
document.querySelector('.parent-div').appendChild(element);
Just do without javascript
html:
<div class="parent-div">
<p class="child-one">OK</p>
<p class="child-two">Conflict</p>
</div>
css:
.parent-div .child-one {
color: red;
border: 1px solid green;
}
.parent-div .child-two {
color: green;
border: 1px solid red;
}
I have an icon of a trash can for a delete button on a Django site.
It's just an anchor tag with an i tag inside that has its href set to a delete view passing the id of the model element.
It works perfectly fine, but I want to create a dialog popup that asks for confirmation before deleting it.
I have seen a few ways to do this but they all require it to be input instead of an anchor.
I also need to make this work on touch devices as well.
How can I change it to an input element and keep the icon as the button rather than showing a submit button. And how can I get the dialog to popup and when Yes is clicked, pass the correct url and id to the submit?
Any advice would be much appreciated.
The easiest way is to add a confirm prompt:
<a ... onclick="return confirm('Are you sure you want to delete this?')">Delete</a>
But you should not do inline javascript so try to add a class and abstract it away. Here it is with jquery:
<a class="confirm-delete" ...>Delete</a>
$(document).on('click', '.confirm-delete', function(){
return confirm('Are you sure you want to delete this?');
})
Let this be your anchor tag:
<a class="icon-trash" id="delete-object" data-object-id="{{ object.id }}">Delete</a>
Note that we have object.id with an attribute. We are going to need that in javascript part.
And you can write something like this at bottom of the page right before body tag closed:
UPDATE WITH SNIPPET
Here you can try the demo. it should work when you put the code right before body tag closed:
var elm = document.getElementById('delete-object');
var objectID = elm.getAttribute('data-object-id');
var resultDiv = document.getElementById('result');
elm.addEventListener('click', function() {
var ask = confirm('r u sure?');
if (ask && objectID) {
var r = "Page will be redirected to </object/delete/" + objectID + "/>";
resultDiv.textContent = r;
} else {
resultDiv.textContent = "User cancelled the dialog box...";
}
return false;
});
.delete-link {
background-color: red;
color: white;
border: 1px solid white;
cursor: pointer;
padding: 3px;
}
#result {
margin: 20px;
padding: 10px;
border: 1px solid orange;
}
<a class="delete-link" id="delete-object" data-object-id="3">Delete</a>
<div id="result"></div>
Just adding this attribute on your a / button tag will do the Job:
onclick="return confirm('Are you sure you want to delete?')"
I am creating a help site for our product. It will be deployed by our customer services group on the web (for logged in customers), and it will be deployed with our software. We wanted to create a feedback mechanism, but we can't use a server-side script, since in some cases, users will be viewing the help site locally.
We are working on a long term solution, but for now we are trying to do this with a simple <a href="mailto"> link (which we've formatted to look like a button):
<p class="docfeedback"><a href="mailto:example#example.com?subject=Documentation Feedback" title="We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: example#example.com>
What I want is to get the value of the <title> element and put that in the Subject, and I'd like to get the url pathname (pathname only) in the body line.
I've read several answers that give me part of the solution, but I'm hoping to put it all together, and coded the right way.
I've been reading about using javascript to get the URL, which I was able to do successfully in the body of the message. But then I tried to use this answer to put the first H1 in the topic as the subject of the message. I then changed it to get the title element. (My project has access to jquery [1.8.3] automatically, so I don't have to specifically call it.)
So, that worked, but I am not sure how to put them both together. Here is the current code in my HTML.
<script>
$(document).ready(function(){
var mailtoHref = $('#mailme a').attr('href'); //get href
var h1Text = $('title').text(); //get h1 text
$('#mailme a').attr('href', mailtoHref + h1Text ); //append it to mailto://
});
</script>
<div id="mailme">
<p class="docfeedback">
Send us documentation feedback
</p>
</div>
p.docfeedback /* only used on master page for feedback link */
{
text-align: center;
font: bold 11px Arial;
text-decoration: none !important;
background-color: #EEEEEE;
padding: 5px 9px 5px 9px;
border: 1px solid #CCCCCC;
border-radius: 10px;
width: 225px;
}
p.docfeedback a:link,
p.docfeedback a:visited,
p.docfeedback a:hover,
p.docfeedback a:active
{
color: #666;
text-decoration: none !important;
}
<head>
<title>This is the name of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<script>/* <![CDATA[ */
$(document).ready(function(){
var mailtoHref = $('#mailme a').attr('href'); //get href
var h1Text = $('title').text(); //get h1 text
$('#mailme a').attr('href', mailtoHref + h1Text ); //append it to mailto://
});
/* ]]> */</script>
<div id="mailme">
<p class="docfeedback">Send us documentation feedback
</p>
</div>
Any help you can provide, I would greatly appreciate.
jQuery for adding current url to body of email is below
$(document).ready(function() {
var url = window.location.href; //get url
var h1Text = $('title').text(); //get h1 text
var email = 'example#example.com';
var body = url;
var subject = 'Documentation Feedback for topic: '+h1Text;
var hrefTitle = 'We welcome your feedback on this documentation. If you cannot send mail from this server, please send your feedback to: '+email;
$('#mailto').attr('href','mailto:'+email+'?body='+body+'&subject='+subject);
$('#mailto').attr('title', hrefTitle);
});
And html mailto link is like this now
<a id="mailto" href="" title="">Send us documentation feedback</a>
Full code is here https://jsfiddle.net/50c99uan/2/
I can't seem to figure out any way to remove the "No file selected" text that shows up next to inputs of type "file".
Do you guys know any way how to remove this text?
input[type='file'] {
color: transparent;
}
Enjoy
There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.
You can do this by defining a width to the input and hiding the exceeding content (the undesired "No file selected" text).
input {
width: 132px;
overflow:hidden;
}
Here is the demonstration on jsfiddle.
Beware: each language has its own default text and it may render different input sizes. In brazilian portuguese that 132px width is fine!
My answer was based on this similar question on stackoverflow.
You can replace the file field with a button with the answer to this question: file upload button without input field?
CSS
<style>
#image_file{
position: relative;
width: 188px;
border: 1px solid #BBB;
margin: 1px;
cursor: pointer;
float: left;
}
</style>
HTML
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/>
<div style='height: 0px;width: 0px; overflow:hidden;'>
<input type="file" id="PinSpot_file">
</div>
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" >
JAVASCRIPT
function getFile(){
document.getElementById("PinSpot_file").click();
}
// Event when change fields
$('#PinSpot_file').live('change', function(e) {
var file = this.value;
var fileName = file.split("\\");
document.getElementById("image_file").value = fileName[fileName.length-1];
//AJAX
}
This is a really good hack and its a lot cleaner.
HTML
<div id="file_info' style='display:inline;'>Browse</div>
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/>
JS
function displayFileName() {
var files = $('input[type="file"]')[0].files;
document.getElementById('file_info').innerHTML = files.length + " images to upload";`
}
Well, since there is no way to completely disable the text, I'd suggest either placing an element over the text or try the following solution..
CSS
input[type="file"] {
width: 90px; /* Keep it under 100px in order to hide the unwanted text. */
}
and add an html inline-title attribute to the element to hide the "No File Chosen" hover text.
HTML
<input type="file" id="FileId" title="">
or, you could do it all with JavaScript.
JS
document.addEventListener('DOMContentLoad', myFunction);
function myFunction() {
const FilePicker = document.getElementById('FileId');
FilePicker.style.width = "90px";
FilePicker.title = ""; // Leave This Empty
}
You can try this. Its work for me firefox browser
<style type="">
input[type='file'] {
color: transparent;
}
</style>
The question might not be clear, so i will explain further.
I saw some page like wordpress new post tag, they have something like
[input]
x tag | x tag | x tag
or Facebook Notes when you post a image...
the when you input a tag and press enter, a new tag is insert in to element in the page...
I don't quite understand how can you parse that out and then submit to the form.
if anyone know please give me an idea.
Thanks
If I am getting it right, you are talking about sending AJAX-based post requests "under the hood" and get "dynamic reflections" back on the same page.
Well, if this is the case, there are actually more than just submitting data to the server.
Here is the big picture:
You need a javascript which is loaded in the page that has the form to submit.
Inside that script, you need to define the event which will trigger the AJAX-based post request. Basically you would love trigger such an event when the content in that particular field has been just changed (an onChange event, that is).
Then you can use script like the following:
$.ajax
({
type: 'POST',
cache: false,
async: false,
timeout: 10000,
url : '/path/to/your/serverside/function',
dataType : 'json',
data:
{
'tag' : //whatever you want to be used as the tag
},
success : function(message)
{
//this will be called when this post was successfully been carried out.
//you should update the view (the same page) here using some jQuery script.
//such as : $('#tag').html(message.tag);
},
error : function(message)
{
//this is for displaying error messages (perhaps due to networking problems?)
}
});
Since there are really a lot to write about. I suggest you post whatever you have finished up here so we can give it a check.
At least from my consideration, this scenario require the following knowledge to get everything right(though you can always choose to use less tech):
onChange event triggered
|
|
jQuery =====sending JSON formatted tag info ======> serverside function
|
|
decode JSON tag info
|
|
process(saving it into database?)
|
|
encode feedback info
|
jQuery callback function <===== JSON info==================
|
|
update the view(the same page)
.
.
.
.
.
aforementioned process is before form is submitted via normal POST/GET.
One way is to keep track of the tags you add in a hidden form field, but actually display using divs or spans or whatever UI you want. In the case of facebook, I'd imagine they're doing something somewhat similar, though I guess they could actually be adding form elements dynamically. Forgive the nasty code/css - just tossed it together. If you add tags and then hit submit, you'll see the querystring that all the values are there.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btnSuggest").click(function(){
var $tagSuggest = $("#tagSuggest");
if($tagSuggest.val() != "")
AddTag($tagSuggest.val());
});
$("#tagSuggest").keyup(function(e){
if(e.keyCode == 13 && $(this).val() != "")
AddTag($(this).val());
});
});
function AddTag(tag){
$("<div>").text(tag).appendTo("#tags").click(function(){
$(this).remove();
UpdateTags();
}).hover(function(){
$(this).addClass("over");
},function(){
$(this).removeClass("over");
});
UpdateTags();
}
function UpdateTags(){
var allTags = "";
$("#tags div").each(function(){
allTags += "," + $(this).text();
});
$("#hidTags").val(allTags.substring(1));
$("#tagSuggest").val("");
}
</script>
<style type="text/css">
.main
{
width: 400px;
padding: 10px;
margin: auto;
border: 1px solid black;
background-color: #e6e6e6;
height: 600px;
}
#tags div
{
padding: 3px;
border: 1px solid black;
background-color: #e6e6e6;
margin: 3px;
height: 15px;
width: auto;
float: left;
cursor: pointer;
}
#tags div.over
{
background-color: red;
}
</style>
</head>
<body>
<div class="main">
<form action="" method="get">
<input type="hidden" name="hidTags" id="hidTags">
<textarea name="Wallpost" style="width: 390px; height: 100px;"></textarea>
<br />
<input type="text" id="tagSuggest" style="width: 280px;" />
<input type="button" id="btnSuggest" value="Add Tag" style="float: right;"/>
<br />
<input type="Submit" name="cmdSubmit" value="Share" style="float: right;"/>
</form>
<div id="tags">
</div>
</div>
</body>
</html>