We Keep Coding

Whatsapp share button for web version

I have this script but its only share from mobile version.
$(document).ready(function() {
$(document).on("click", '.mc_whatsapp_btn', function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var text = $(this).attr("data-text");
var url = $(this).attr("data-link");
var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
var whatsapp_url = ".whatsapp://send?text=" + message;
window.location.href = whatsapp_url;
} else {
alert("Please use an Mobile Device to Share this Status");
}
});
});
Can anyone modify this?

This line
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
checks for mobile and if true, the share logic is executed. In the else branch (meaning it's not a mobile) you get an error message. If you want the same to happen in both versions, just omit the if:
$(document).ready(function() {
$(document).on("click", '.mc_whatsapp_btn', function() {
//if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var text = $(this).attr("data-text");
var url = $(this).attr("data-link");
var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
var whatsapp_url = ".whatsapp://send?text=" + message;
window.location.href = whatsapp_url;
//} else {
//alert("Please use an Mobile Device to Share this Status");
}
});
});

According the WhatsApp docs: https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat/?lang=en
To create a link with just a pre-filled message, use https://wa.me/?text=urlencodedtext
Example: https://wa.me/?text=I'm%20inquiring%20about%20the%20apartment%20listing`
The result should be something like:
$(document).ready(function() {
$(document).on("click", '.mc_whatsapp_btn', function() {
// this 3 rows will be used for both - desktop and mobile
var text = $(this).attr("data-text");
var url = $(this).attr("data-link");
var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var whatsapp_url = ".whatsapp://send?text=" + message;
} else {
var whatsapp_url = "https://wa.me/?text=" + message;
}
// again for both
window.location.href = whatsapp_url;
});
});

cannot access element within function in javascript custom object

When I run this code it generates the appropriate file upload ui and adds the event listener to the upload button. However the first line in the upload function throws an error - Cannot read property 'style' of undefined - for this.missingFile. What am I doing wrong here?
function FileUploader(props) {
var div = document.querySelector(props.element);
var uid = generateGuid();
var templateHtml = "<p><div id=\"dvMissingFile-" + uid + "\" class=\"missing-file\"> Please choose a file.</div><input type=\"file\" id=\"flUploadedFile-" + uid + "\" name=\"flUploadedFile-" + uid + "\"/></p><div class=\"dvProgressBar\" id=\"progress-" + uid + "\"><div></div></div>";
div.innerHTML = templateHtml;
this.uploadButton = document.querySelector(props.uploadButton);
this.fileInput = document.querySelector("#flUploadedFile-" + uid);
this.missingFile = document.querySelector("#dvMissingFile-" + uid);
this.progress = document.querySelector("#progress-" + uid);
this.url = props.postUrl;
this.upload = function() {
this.missingFile.style.display = "none";
if (this.fileInput.files.length === 0) {
this.missingFile.style.display = "";
}
else {
var file = this.fileInput.files[0];
var xhr = new XMLHttpRequest();
var pbar = document.querySelector("#progress-" + uid + ">div");
if (xhr.upload) {
// do upload
}
}
}
this.uploadButton.addEventListener("click", this.upload);
}
Usage example
<div id="dvUploader"></div>
<button type="button" id="btnUpload" class="btn btn-primary">Upload</button>
<script>
var uploader = new FileUploader({
element: "#dvUploader",
uploadButton: "#btnUpload",
postUrl: "myposturl"
});
</script>

One small update to your code can help:
this.upload = function() {
// ...
}.bind(this);

Textfields values are not appearing in Javascript when click on submit button ....using eembeddable widget in nodejs

Hello i'm new in nodejs i'm using nodejs widget now want to embed a signup form in it and the text values in javascript form should appear in the browser like in simple javascript it uses
function myFunction() {
document.getElementById("demo").innerHTML = document.getElementById('fname').value;
document.getElementById("demo1").innerHTML = document.getElementById('lname').value;
}
<input type="text" id="fname" name="firstname" value="" placeholder="Enter your First Name" maxlength="110">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
But it is not using in nodejs widget code
this is paltform.js where all javascript code is
/*eslint-disable no-extra-parens */
'use strict';
enter code here
console.log('hello from server');
(function(global) {
var serverHost = '<%= serverHost %>';
var partyId = '<%= partyId %>';
var useIframe = <%= useIframe %>;
init();
injectStyles();
function init() {
var fooWidgets = document.querySelectorAll('.foo-widget');
for (var i = 0; i < fooWidgets.length; ++i) {
var fooWidget = fooWidgets[i];
processFooWidget(fooWidget);
}
}
function processFooWidget(fooWidget) {
var id = fooWidget.getAttribute('data-foo-id');
var processed = fooWidget.getAttribute('data-foo-processed');
if (!id || processed === 'done') {
//skip this one as it has either already been processed, or lacks an ID
//This is done to ensure logic is not executed twice in the event that the
//user erroneously embeds the script tag more than once on a single page
console.log('skipping element:', fooWidget);
return;
}
function myFunction() {
document.getElementById('f').innerHTML = document.getElementById('fname').value;
}
createFooWidget(fooWidget, id);
}
function createFooWidget(fooWidget, id) {
<% if (useIframe) { %>
var iframe = document.createElement('iframe');
iframe.setAttribute('src', serverHost+'/api/3rd/foo/widget/'+id+'/init?iframe=true&partyId='+partyId);
iframe.setAttribute('class', 'foo-widget-iframe');
iframe.setAttribute('data-foo-id', id);
iframe.setAttribute('width', '200px');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('scrolling', 'no');
iframe.style.border = 'none';
iframe.style.height = '500px';
iframe.style.width = '500px';
iframe.style.position = 'relative';
iframe.style.overflow = 'hidden';
fooWidget.appendChild(iframe);
fooWidget.setAttribute('data-foo-processed', 'done');
<% } else { %>
var xhr = new XMLHttpRequest();
xhr.onload = function() {
fooWidget.innerHTML = this.responseText;
fooWidget.setAttribute('data-foo-processed', 'done');
var fooWidgetButton = fooWidget.querySelector('.bar-button');
if (!fooWidgetButton) {
return;
}
var fooWidgetButtonFunction = function() {
//TODO disable the button temporarily to prevent accidental double-click
var barXhr = new XMLHttpRequest();
barXhr.onload = function() {
var result = JSON.parse(this.responseText);
console.log(result);
var barPara = fooWidget.querySelector('.bar');
if (barPara) {
barPara.innerHTML = JSON.stringify(result);
}
};
barXhr.open('POST', serverHost+'/api/3rd/foo/widget/'+id+'/bar?partyId='+partyId);
var content = {
fooId: id,
};
content = JSON.stringify(content);
barXhr.setRequestHeader('Content-type', 'application/json');
barXhr.send(content);
};
if (fooWidgetButton.addEventListener) {
fooWidgetButton.addEventListener('click', fooWidgetButtonFunction);
}
else if (fooWidgetButton.attachEvent) {
fooWidgetButton.attachEvent('onclick', fooWidgetButtonFunction);
}
else {
fooWidgetButton.onclick = fooWidgetButtonFunction;
}
};
xhr.open("GET", serverHost+'/api/3rd/foo/widget/'+id+'/init?partyId='+partyId);
xhr.send();
<% } %>
}
//See http://css-tricks.com/snippets/javascript/inject-new-css-rules
function injectStyles() {
var css = '<%= inlineCss %>';
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
}
else {
style.appendChild(document.createTextNode(css));
}
var head = document.head || document.querySelector('head');
head.appendChild(style);
}
}());
function injectStyle(rule) {
var div = $("<div />", {
html: '­<style>' + rule + '</style>'
}).appendTo("body");
}
Following is the widget-init.html code
<input type="text" id="fname" name="firstname" value="" placeholder="Enter your First Name" maxlength="110">
<input class="btn-submit" id="btn-search" onclick="myFunction()" type="submit" value="Submit">
<p id="f"></p>
var serverHost = '<%= serverHost %>';
var id = '<%= id %>';
var partyId = '<%= partyId %>';
var fooWidget = document;
var fooWidgetButton = document.querySelector('.bar-button');
if (!fooWidgetButton) {
return;
}
var fooWidgetButtonFunction = function() {
//TODO disable the button temporarily to prevent accidental double-click
var barXhr = new XMLHttpRequest();
barXhr.onload = function() {
var result = JSON.parse(this.responseText);
console.log(result);
var barPara = document.querySelector('.bar');
if (barPara) {
barPara.innerHTML = JSON.stringify(result);
}
};
barXhr.open('POST', serverHost+'/api/3rd/foo/widget/'+id+'/bar?partyId='+partyId);
var content = {
fooId: id,
};
content = JSON.stringify(content);
barXhr.setRequestHeader('Content-type', 'application/json');
barXhr.send(content);
};
if (fooWidgetButton.addEventListener) {
fooWidgetButton.addEventListener('click', fooWidgetButtonFunction);
}
else if (fooWidgetButton.attachEvent) {
fooWidgetButton.attachEvent('onclick', fooWidgetButtonFunction);
}
else {
fooWidgetButton.onclick = fooWidgetButtonFunction;
}
//myFunction Button Click
var myFunctionButtonFunction = function() {
//TODO disable the button temporarily to prevent accidental double-click
var barXhr = new XMLHttpRequest();
barXhr.onload = function() {
var result = JSON.parse(this.responseText);
console.log(result);
var barPara = document.querySelector('.func');
if (barPara) {
barPara.innerHTML = JSON.stringify(result);
}
};
barXhr.open('POST', serverHost+'/api/3rd/foo/widget/'+id+'/func?partyId='+partyId);
var content = {
fooId: id,
};
content = JSON.stringify(content);
barXhr.setRequestHeader('Content-type', 'application/json');
barXhr.send(content);
};
if (myFunctionButton.addEventListener) {
myFunctionButton.addEventListener('click', myFunctionButtonFunction);
}
else if (myFunctionButton.attachEvent) {
myFunctionButton.attachEvent('onclick', myFunctionButtonFunction);
}
else {
myFunctionButton.onclick = myFunctionButtonFunction;
}

You need to write JavaScript code inside <script> tag in the file
<input type="text" id="fname" name="firstname" value="" placeholder="Enter your First Name" maxlength="110">
<input class="btn-submit" id="btn-search" onclick="myFunction()" type="submit" value="Submit">
<p id="f"></p>
<script>
var serverHost = '<%= serverHost %>';
var id = '<%= id %>';
var partyId = '<%= partyId %>';
var fooWidget = document;
var fooWidgetButton = document.querySelector('.bar-button');
if (!fooWidgetButton) {
return;
}
var fooWidgetButtonFunction = function() {
//TODO disable the button temporarily to prevent accidental double-click
var barXhr = new XMLHttpRequest();
barXhr.onload = function() {
var result = JSON.parse(this.responseText);
console.log(result);
var barPara = document.querySelector('.bar');
if (barPara) {
barPara.innerHTML = JSON.stringify(result);
}
};
barXhr.open('POST', serverHost+'/api/3rd/foo/widget/'+id+'/bar?partyId='+partyId);
var content = {
fooId: id,
};
content = JSON.stringify(content);
barXhr.setRequestHeader('Content-type', 'application/json');
barXhr.send(content);
};
if (fooWidgetButton.addEventListener) {
fooWidgetButton.addEventListener('click', fooWidgetButtonFunction);
}
else if (fooWidgetButton.attachEvent) {
fooWidgetButton.attachEvent('onclick', fooWidgetButtonFunction);
}
else {
fooWidgetButton.onclick = fooWidgetButtonFunction;
}
//myFunction Button Click
var myFunctionButtonFunction = function() {
//TODO disable the button temporarily to prevent accidental double-click
var barXhr = new XMLHttpRequest();
barXhr.onload = function() {
var result = JSON.parse(this.responseText);
console.log(result);
var barPara = document.querySelector('.func');
if (barPara) {
barPara.innerHTML = JSON.stringify(result);
}
};
barXhr.open('POST', serverHost+'/api/3rd/foo/widget/'+id+'/func?partyId='+partyId);
var content = {
fooId: id,
};
content = JSON.stringify(content);
barXhr.setRequestHeader('Content-type', 'application/json');
barXhr.send(content);
};
if (myFunctionButton.addEventListener) {
myFunctionButton.addEventListener('click', myFunctionButtonFunction);
}
else if (myFunctionButton.attachEvent) {
myFunctionButton.attachEvent('onclick', myFunctionButtonFunction);
}
else {
myFunctionButton.onclick = myFunctionButtonFunction;
}
</script>

Javascript Drag and Drop Files, then Sort

I am trying to Sort files I pull from File Explorer by name, they sort by when they load, how would I sort them by name instead using my code below?
(function() {
// getElementById
function $id(id) {
return document.getElementById(id);
}
// output information
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}
// file drag hover
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
// file selection
function FileSelectHandler(e) {
// cancel event and hover styling
FileDragHover(e);
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
}
}
// output file information
function ParseFile(file) {
// display an image
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"<p align=center><strong>" + file.name + ":</strong><br />" +
'<img src="' + e.target.result + '"></p>'
);
}
reader.readAsDataURL(file);
}
// display text
if (file.type.indexOf("text") == 0) {
var reader = new FileReader();
reader.onload = function(e) {
Output(
"<p><strong>" + file.name + ":</strong></p><pre>" +
e.target.result.replace(/</g, "<").replace(/>/g, ">") +
"</pre>"
);
}
reader.readAsText(file);
}
}
// initialize
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton");
// file select
fileselect.addEventListener("change", FileSelectHandler, false);
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
// remove submit button
submitbutton.style.display = "none";
}
}
// call initialization file
if (window.File && window.FileList && window.FileReader) {
Init();
}
})();
This code drags and drops the Files in my program and loads them, but does not sort in alphabetical, what would be the best way to sort them with my code below?

var files;
(function() {
// getElementById
function $id(id) {
return document.getElementById(id);
}
// output information
function Output(msg) {
var m = $id("messages");
m.innerHTML = msg + m.innerHTML;
}
// file drag hover
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
// file selection
function FileSelectHandler(e) {
// cancel event and hover styling
FileDragHover(e);
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
}
}
// output file information
function ParseFile(file) {
// display an image
var basename = file.name.substring(0,file.name.length-4);
files.push("<div style=\"width: 100%; overflow: hidden;\"><div style=\"width: 600px; float: left;\">" +
"<strong>" + basename + ".pdf:</strong><br />" +
'<iframe src="\\\\sovarchpri01\\d$\\1000Sunrise\\Process\\stage\\' + basename +".pdf#view=fit" + '"height="75%" width="500px"></iframe></p>' +
"</div><div style=\"margin-left: 620px;\">" +
"<strong>" + basename + ".png:</strong><br />" +
"<img src=\"\\\\sovarchpri01\\d$\\Fleissner\\ORG_5535_Documents\\" + basename + ".png\" height=\"75%\" width=\"500px\">" +
"</div> ");
}
function sortFiles() {
files.sort().reverse();
for (var i = 0; i < files.length; ++i) {
Output(files[i]);
}
}
function resetWindow(){
window.location.reload(true)
}
// initialize
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton"),
sortbutton = $id("sortbutton"),
resetbutton = $id("resetbutton")
resetbutton2 = $id("resetbutton2");;
files = new Array();
// file select
fileselect.addEventListener("change", FileSelectHandler, false);
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file drop
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
// remove submit button
submitbutton.addEventListener("click", sortFiles , false); //style.display = "none";
sortbutton.addEventListener("click", sortFiles , false);
resetbutton.addEventListener("click", resetWindow , false);
resetbutton2.addEventListener("click", resetWindow , false);
}
}
// call initialization file
if (window.FileReader) {
Init();
}
})();

jQuery dnd file upload for multiple targets

I'm using jQuery dnd file upload plugin for a project. All example of dnd uploader use id as a selector. For multiple items they used different dropzone declaration.
How can I change the plugin setting for multiple dropzone where the selector will be a class or something else to grab multiple elements with a single dropzone initiation?

Since this is using jQuery, couldn't you use the standard jQuery multiple selector method? It would look like this:
$("#drop1, #drop2, #drop3").dropzone();
Or if you are trying to do a class, you would do this:
$(".drop_zone").dropzone();
This isn't tested, and I have never used this plugin. I'm just assuming this would work since it is based off jQuery.
Since that isn't working, try replacing the code for jquery.dnd-file-upload.js with the following:
(function ($) {
$.fn.dropzone = function (options) {
var opts = {};
var uploadFiles = function (files) {
$.fn.dropzone.newFilesDropped(); for (var i = 0; i < files.length; i++) {
var file = filesi?;
// create a new xhr object var xhr = new XMLHttpRequest(); var upload = xhr.upload; upload.fileIndex = i; upload.fileObj = file; upload.downloadStartTime = new Date().getTime(); upload.currentStart = upload.downloadStartTime; upload.currentProgress = 0; upload.startData = 0;
// add listeners upload.addEventListener("progress", progress, false);
xhr.onload = function (event) {
load(event, xhr);
};
xhr.open(opts.method, opts.url); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.send(file);
$.fn.dropzone.uploadStarted(i, file);
}
};
var drop = function (event) {
var dt = event.dataTransfer; var files = dt.files;
event.preventDefault(); uploadFiles(files);
return false;
};
var log = function (logMsg) {
if (opts.printLogs) {
// console && console.log(logMsg);
}
};
// invoked when the input field has changed and new files have been dropped // or selected var change = function (event) {
event.preventDefault();
// get all files ... var files = this.files;
// ... and upload them uploadFiles(files);
};
var progress = function (event) {
if (event.lengthComputable) {
var percentage = Math.round((event.loaded 100) / event.total); if (this.currentProgress != percentage) {
// log(this.fileIndex + " --> " + percentage + "%");
this.currentProgress = percentage; $.fn.dropzone.fileUploadProgressUpdated(this.fileIndex, this.fileObj, this.currentProgress);
var elapsed = new Date().getTime(); var diffTime = elapsed - this.currentStart; if (diffTime >= opts.uploadRateRefreshTime) {
var diffData = event.loaded - this.startData; var speed = diffData / diffTime; // in KB/sec
$.fn.dropzone.fileUploadSpeedUpdated(this.fileIndex, this.fileObj, speed);
this.startData = event.loaded; this.currentStart = elapsed;
}
}
}
};
var load = function (event, xhr) {
var now = new Date().getTime(); var timeDiff = now - this.downloadStartTime; if (opts.onLoadComplete) {
opts.onLoadComplete(xhr.responseText);
} $.fn.dropzone.uploadFinished(this.fileIndex, this.fileObj, timeDiff); log("finished loading of file " + this.fileIndex);
};
var dragenter = function (event) {
event.stopPropagation(); event.preventDefault(); return false;
};
var dragover = function (event) {
event.stopPropagation(); event.preventDefault(); return false;
};
// Extend our default options with those provided. opts = $.extend({}, $.fn.dropzone.defaults, options);
var id = this.attr("id"); var dropzone = document.getElementById(id);
log("adding dnd-file-upload functionalities to element with id: " + id);
// hack for safari on windows: due to not supported drop/dragenter/dragover events we have to create a invisible <input type="file" /> tag instead if ($.client.browser == "Safari" && $.client.os == "Windows") {
var fileInput = $("<input>"); fileInput.attr({
type: "file"
}); fileInput.bind("change", change); fileInput.css({
'opacity': '0', 'width': '100%', 'height': '100%'
}); fileInput.attr("multiple", "multiple"); fileInput.click(function () {
return false;
}); this.append(fileInput);
} else {
dropzone.addEventListener("drop", drop, true); var jQueryDropzone = $("#" + id); jQueryDropzone.bind("dragenter", dragenter); jQueryDropzone.bind("dragover", dragover);
}
return this;
};
$.fn.dropzone.defaults = {
url: "", method: "POST", numConcurrentUploads: 3, printLogs: false, // update upload speed every second uploadRateRefreshTime: 1000
};
// invoked when new files are dropped $.fn.dropzone.newFilesDropped = function () { };
// invoked when the upload for given file has been started $.fn.dropzone.uploadStarted = function (fileIndex, file) { };
// invoked when the upload for given file has been finished $.fn.dropzone.uploadFinished = function (fileIndex, file, time) { };
// invoked when the progress for given file has changed $.fn.dropzone.fileUploadProgressUpdated = function (fileIndex, file,
newProgress) {
};
// invoked when the upload speed of given file has changed $.fn.dropzone.fileUploadSpeedUpdated = function (fileIndex, file,
KBperSecond) {
};
})(jQuery);
This was suggested by the user rik.leigh#gmail.com here http://code.google.com/p/dnd-file-upload/wiki/howto