I made this clipboard copy function. it work at my Laravel. But there are some problem. I can copy but when I click the COPY button current page reload.
Another thngs is I would like to make cool design like Github'S "Clone with HTTPS" under "Use Git or checkout with SVN using the web URL. " sentence
at small window's image.
Could you teach me what is wrong my code please?
Laravel's form is here I need to write like this but when click the clipboard copy I don't want to go nextpage
<form action="{{ url('nextpage') }}" method="post">
index.blade.php
<p><span class="js-copytext">{{$post_data['somedata']}}</span></p>
<p><button class="js-copybtn">copy</button></p>
js file
<script>
var copyEmailBtn = document.querySelector('.js-copybtn');
copyEmailBtn.addEventListener('click', function(event) {
var copyText = document.querySelector('.js-copytext');
var range = document.createRange();
range.selectNode(copyText);
window.getSelection().addRange(range);
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
} catch(err) {
console.log('error');
}
window.getSelection().removeAllRanges();
});
</script>
You need to add event.preventDefault() inside your handler.
copyEmailBtn.addEventListener('click', function(event) {
event.preventDefault();
// The rest of your code...
});
Related
I have a script making a file from data (from a form or not). I have access to the URL to download the file in any browser, using window.URL.createObjectURL. But I would like to add a button to send the file by email. (I have a server and PHP).
Here is my code:
First creating File from 'test':
function makeFile(text) {
var test =
"Here is my " + text;
var data = new File([test], { type: "text/plain" });
if (myFile !== null) {
window.URL.revokeObjectURL(myFile);
}
myFile = window.URL.createObjectURL(data);
return myFile;
}
Now my unsuccessful attempt:
<form action="emailthijob.php" method="post">
<a class="download hide" id="sendbyemail" onclick="myFile.submit()";>⇧ Email</a>
</form>
So I would appreciate help with 1/button to click and send mail, 2/ PHP code to actually get the result.
Thank you very much for your help,
Best,
--Fred
I am trying to use SignalR for ASP.NET Core 2.0, but when I try to implement the SignalR client in my View, I get the error that the variable "signalR" is undefined despite auto-completion working fine in my editor, Here is the script :
<script type="text/javascript">
var _transport = signalR.TransportType.WebSockets; //HERE
var connection = new signalR.HubConnection(`http://${document.location.host}/chat`, {transport: _transport});
var messageInput = document.getElementById('message');
var name = '#User.Identity.Name';
var button = document.getElementById('sendMessage');
connection.on('broadcastMessage', (name, message) => {
var text = document.createElement('p');
text.innerHTML = '<strong>' + name + '</strong>' + " : " + message;
document.getElementById('messageArea').appendChild(text);
});
button.addEventListener("click", event => {
connection.invoke('send', name, messageInput.value);
messageInput.value = '';
messageInput.focus();
});
connection.start();
I have added the signalr.js in my _Layout.cshtml
Here is the tree structure of my wwwroot where I've added the .js files for signalr :
And finally, here is the debugger structure in Firefox where I can see that the signalr.js has been loaded, and so are jQuery and bootstrap..
So why is "signalR" undefined? What am I missing? Is it because I've added the signalr javascript files manually in my project? (Probably...)
I think your script is executed before the signalr.js is loaded. Try to use an event to execute your code. IF we do this on document load then we'll be sure that it's defined.
$(document).load(function(){
// your code here
});
I'm using emailjs to send email through my free subdomain website.There are two problems with it
1). My emailjs account-id, service-id and template-id is getting public so anybody can access it and send email through it.
2). to solve it I used following code but it steel appears in browser "inspect Element"(Developer tool).
<?php echo "
<script>
(function(){
emailjs.init(my user id);
})();
</script>" ; ?>
<?php
echo "<script src='js/formfilled.js'></script>";
?>
now my form submiting button is like this
<button onclick="email();">
Send
</button>
now my formfill file is like this
var myform = $("form#myform");
function email(){
var service_id = "default_service";
var template_id = "xxxxxxxxx";
myform.find("button").text("Sending...");
emailjs.sendForm(service_id,template_id,"myform")
.then(function(){
alert("Sent!");
myform.find("button").text("Send");
}, function(err) {
alert("Send email failed!\r\n Response:\n " + JSON.stringify(err));
myform.find("button").text("Send");
});
}
problem is that when I click the button rather than sending an email it reload the page .
Sorry if it is too silly i am totally beginner and Thanks in advance.
UPDATE
it is working if i put the code in the same file(not using external js)
code:--
<head>
<script type="text/javascript">
(function(){
emailjs.init("xxxxxxxxxxxxxxxxxxxxx");
})(); </head>
</script>
<body>
<!-- form is here-->
<script>
var myform = $("form#myform");
myform.submit(function(event){
event.preventDefault();
// Change to your service ID, or keep using the default service
var service_id = "default_service";
var template_id = "xxxxxxxxxxxxxxxxxxx";
myform.find("button").text("Sending...");
emailjs.sendForm(service_id,template_id,"myform")
.then(function(){
alert("Sent!");
myform.find("button").text("Send");
}, function(err) {
alert("Send email failed!\r\n Response:\n " + JSON.stringify(err));
myform.find("button").text("Send");
});
return false;
});
</script>
</body>
but if i put this code in formfilled.js it is not working.
what would be the reason behind it?
Answer:
to use
event.preventDefault();
and loading the file before the button is loaded.
Using Node-Webkit, The following page,
https://github.com/rogerwang/node-webkit/wiki/File-dialogs
Describes that you can use
[input type="file" nwsaveas="filename.txt" /]
to open a File Save dialog.
However it does not explain how would you write the data to the filesystem.
I expected/imagined something simple like,
var directory = FileOpen();
fs.writeFile(directory+"myfile.png", buffer);
Is there any explanation for this?
You are right, after you trigger the Save As dialog, you will be prompted a dialog, specify the name, and you could receive the file path by doing this.
Sample Code (using jQuery):
$("#save").trigger("click");
$("#save").on("change", function () {
var filePath = $(this).val();
if (filePath !== "") {
var fs = require("fs");
fs.writeFile(filePath, "Hello World", function (err) {
if (err)
alert("Unable to save file");
else
console.log("saved. ");
});
}
else {
// User cancelled
}
});
I am trying to build a chrome extension. Which would do some search on the page and post the results to the extensions.
I am having a hard time running this. Whenever I try to run the extension it is just stuck on Injecting Script.
my re.js
function printDetails(document_r) {
var test = document_r.body;
var text = test.innerText;
var delim="^^ validatedCache :";
var endlim="</site>";
var idx = text.indexOf(delim);
var endInd=text.indexOf(endlim);
var tag = "accountName";
var regex = "<" + tag + ">(.*?)<\/" + tag + ">";
var regexg = new RegExp(regex,"g");
var matches = [];
while (match = regexg.exec(text.substring(idx+delim.length,endInd))) matches.push("Account Name::::::"+match[1]);
return matches;
}
chrome.extension.sendMessage({
action: "getSource",
source: "\n\n\n DETAILS>>>>>\n\n"+printDetails(document)
});
selection.js
chrome.extension.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
message.innerText = request.source;
}
});
function onWindowLoad() {
var message = document.querySelector('#message');
chrome.tabs.executeScript(null, {
file: "re.js"
}, function() {
// If you try and inject into an extensions page or the webstore/NTP you'll get an error
if (chrome.extension.lastError) {
message.innerText = 'There was an error injecting script : \n' + chrome.extension.lastError.message;
}
});
}
window.onload = onWindowLoad;
popup.html
<!DOCTYPE html>
<html style=''>
<head>
<script src='selection.js'></script>
</head>
<body style="background-image:url(12.png);width:400px; border: 2px solid black;background-color:white;">
<div id='message'>Injecting Script....</div>
</body>
</html>
I know there is some problem with these 2 lines only.
var test = document_r.body;
var text = test.innerText;
What I wan't is to extract the webpage ( contents ) into a string which I am hopefully doing by the above two lines of code.
Then do some string manipulation on the code.If I run directly this code in a console with a dummy string . I can execute it so figure something is wrong with these two lines.
My extension is stuck on " Injecting Script..."
Some help would be appreciated.
PS:yes I was able to run it earlier with the same code but somehow it doesn't run now.