I tried sending email by referring various links but in vain.I just want to send email and below is my code for sending email. Please suggest the changes .
Thanks in advance :)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/ng-cordova.min.js"></script>
<script src="js/cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="ExampleController">
<ion-pane>
<ion-content>
<div class="padding">
<button class="button button-icon icon ion-email" ng-click="vesitEmail()">
Send Email
</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
App.js
var example=angular.module('starter', ['ionic','ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
example.controller('ExampleController', function($scope,$cordovaEmailComposer) {
$cordovaEmailComposer.isAvailable().then(function() {
// is available
alert("available");
}, function () {
// not available
alert("not available");
});
$scope.vesitEmail = function(){
var email = {
to: 'siddhesh.kalgaonkar#ves.ac.in',
cc: 'monish.gupte#mservices.in',
bcc: null,
attachments: null,
subject: 'Mail subject',
body: 'How are you? Nice greetings from Leipzig',
isHtml: true
};
$cordovaEmailComposer.open(email).then(null, function () {
// user cancelled email
});
}
window.alert("Message Sent");
});
When i test in browser it shows below error :
TypeError: Cannot read property 'plugins' of undefined
and when i test it on mobile phone it doesnt work on it as well.
For email, you will have to install Cordova Email Plugin. The plugin provides access to the standard interface that manages the editing and sending an email message. Install using CLI
cordova plugin add https://github.com/katzer/cordova-plugin-email-composer.git
$scope.vesitEmail = function(){
cordova.plugins.email.isAvailable(
function (isAvailable) {
if(isAvailable){
cordova.plugins.email.open({
to: [''],
cc: [''],
bcc: [''],
subject: '',
body: ''
});
}else{
alert('Service is not available.');
}
}
);
};
I have used like this after installing Cordova Email Plugin in my project.. hope it may help...
$scope.sendEmail = function () {
if (window.plugins && window.plugins.emailComposer) {
window.plugins.emailComposer.showEmailComposerWithCallback(function (result) {
alert(result);
},
"Feedback Form", // Subject
$scope.emailText[0].body, // Body
["ameerhamza810#gmail.com"], // To
null, // CC
null, // BCC
false, // isHTML
null, // Attachments
null); // Attachment Data
}
}
Related
I've been trying to implement a service worker for my Vuejs PWA, and the code I have throws this error in the console right after the fetch event for my localhost URL, http://localhost:8080/
Uncaught (in promise) TypeError: Failed to fetch
This is my code in the sw.js file, which I have in the root folder (/public) along with index.html and manifest.js.
self.addEventListener("install", function(event) {
event.waitUntil(preLoad());
});
var preLoad = async function(){
// console.log("Installing web app");
return caches.open("offline").then(function(cache) {
// console.log("caching index and important routes");
return cache.addAll(["/"]);
});
};
self.addEventListener("fetch", function(event) {
// console.log('Fetching:', event.request.url);
event.respondWith(checkResponse(event.request).catch(function() {
// console.log(event.request);
return returnFromCache(event.request);
}));
event.waitUntil(addToCache(event.request));
});
var checkResponse = function(request){
return new Promise(function(fulfill, reject) {
fetch(request).then(function(response){
if(response.status !== 404) {
fulfill(response);
} else {
reject();
}
}, reject);
});
};
var addToCache = async function(request){
return caches.open("offline").then(function (cache) {
return fetch(request).then(function (response) {
// console.log(response.url + " was cached");
return cache.put(request, response);
});
});
};
var returnFromCache = async function(request){
return caches.open("offline").then(function (cache) {
return cache.match(request).then(function (matching) {
if(!matching || matching.status == 404) {
return cache.match("offline.html");
} else {
return matching;
}
});
});
};
This is the index.html file:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="theme-color" content="#296f9c"/>
<meta name="description" content="Descubre más de 160 recetas de cócteles en el app de coctelería del Cantinero Kentubano.">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/cantinero-logo-apple-touch.png">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>Cantinero App</title>
</head>
<body>
<script>
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register("/sw.js").then(function(reg) {
console.log("Service worker has been registered for scope: " + reg.scope);
});
}
</script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
Anyone know why this is happening and how I can fix it?
Thanks!
Send Email Directly From JavaScript using EmailJS.
Please look the below answer and I'm getting so many comments for malicious attacks.. because this file is loading in browser so malicious user can easily get your key configuration. So, how to avoid it?
var templateParams = {
to_name: 'xyz',
from_name: 'abc',
message_html: 'Please Find out the attached file'
};
emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
});
Hi you can directly send email through using EmailJS without using the server side code. It'll totally client side.
For sending you need to configure below details.
1)First,Go to this site [https://www.emailjs.com/] and create free account.
2)below 'Connect your email service' button click and configure. You'll get 'YOUR_SERVICE_ID'
3)Then 'Create email template' button click and configure. You'll get 'YOUR_TEMPLATE_ID'
4)click on 'Send email from JavaScript' button. You'll get code.
5)You'll get the 'YOUR_USER_ID' in [https://dashboard.emailjs.com/account]
I did all configuration and added code please check. below code.
NOTE : - "Please encrypted or embedded your use_id for malicious attacks."
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com#2.4.0/dist/email.min.js">
</script>
<script type="text/javascript">
(function() {
emailjs.init("YOUR_USER_ID"); //please encrypted user id for malicious attacks
})();
//set the parameter as per you template parameter[https://dashboard.emailjs.com/templates]
var templateParams = {
to_name: 'xyz',
from_name: 'abc',
message_html: 'Please Find out the attached file'
};
emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
});
</script>
Using JavaScript can expose your credentials like user id , service id to the public. For this , you can store these keys values in a variable (half value) and then manipulating it in runtime like appending remaining half of the key etc. But its not totally safe.
Code :
<html>
<head>
<title>Contact Us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com#2/dist/email.min.js"></script>
</head>
<body>
<div class="container">
<div class="card col-md-6 offset-md-3" style="margin-top:50px;">
<div class="card-body">
<h2>Contact Us</h2>
<label for="thename">Name</label>
<input type="text" class="form-control" id="thename" placeholder="Enter Name">
<label for="themail">Email:</label>
<input type="email" class="form-control" id="themail" placeholder="Enter Email">
<label for="themsg">Message</label>
<textarea class="form-control" id="themsg" placeholder="Enter Message"></textarea>
<button class="btn btn-danger btn-sm" style="margin-top:10px;" onCLick="sendemail();">Send</button>
</form>
</div>
</div>
</div>
<script>
function sendemail() {
var userid = "YourUserID"
emailjs.init(userid);
var thename = document.getElementById('thename').value;
var themail = document.getElementById('themail').value;
var themsg = document.getElementById('themsg').value;
var validmail = /^w+([.-]?w+)*#w+([.-]?w+)*(.w{2,3})+$/;
if (thename == "") {
alert("Please Enter Name");
}
else if (themail == "" || themail.match(!validmail)) {
alert("Please Enter Valid Email");
}
else if (themsg == "") {
alert("Please Enter Message");
}
else {
var contactdetail = {
from_name: thename,
from_email: themail,
message: themsg
};
emailjs.send('YourServiceID', 'YourTemplateID', contactdetail).then(function (res) {
alert("Email Sent Successfully");
},
reason => {
alert("Error Occur");
})
}
}
</script>
</body>
</html>
Make sure to replace "YourUserID" , "YourServiceID" & "YourTemplateID" with your own ids
Reference : Narendra Dwivedi - Send Email From JavaScript
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com#2.4.0/dist/email.min.js">
</script>
<script type="text/javascript">
(function() {
emailjs.init("service_ud48moz"); //please encrypted user id for malicious attacks
})();
//set the parameter as per you template parameter[https://dashboard.emailjs.com/templates]
var templateParams = {
to_name: 'xyz',
from_name: 'abc',
message_html: 'Please Find out the attached file'
};
emailjs.send('service_ud48moz', 'template_njhhxon', templateParams)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
});
</script>
I am creating a simple rest api in javascript, I want upon initialization, the widget must display a list of all characters.
here is folder structure :
├───book
└───book.js
├───store
│ └───store.js
here is my store.js
window.Store = {
create: function() {
var self = {};
var props = {
name: 'string',
species: 'string',
picture: 'string',
description: 'string'
};
var listProps = ['name', 'species'];
var detailProps = ['name', 'species', 'picture', 'description'];
var characters = [
{
id: makeID(),
name: 'Ndiefi',
species: 'Wookie',
picture: 'store/img/ndiefi.png',
description: 'A legendary Wookiee warrior and Han Solo’s co-pilot aboard the Millennium Falcon, Chewbacca was part of a core group of Rebels who restored freedom to the galaxy. Known for his short temper and accuracy with a bowcaster, Chewie also has a big heart -- and is unwavering in his loyalty to his friends. He has stuck with Han through years of turmoil that have changed both the galaxy and their lives.',
_delay: 500
},
];
}
}
here is index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Character Book</title>
<!-- 3rd party vendor libraries -->
<link rel="stylesheet" href="vendor/font-awesome-4.6.3/css/font-awesome.min.css">
<script src="vendor/jquery-3.1.0.min.js"></script>
<script src="vendor/underscore-1.8.3.min.js"></script>
<!-- 1st party internal libraries -->
<script src="store/store.js"></script>
<script src="tests/start-test.js"></script>
<script src="tests/test-book.js"></script>
<!-- The source of the 'Book' widget -->
<link href="book/book.css" rel="stylesheet">
<script src="book/book.js"></script>
<script>
$(function() {
var frame = $('#test-frame');
var run = $('#test-run');
var results = $('#test-results');
var store = Store.create();
run.click(function() {
run.prop('disabled', true).text('Running Tests');
results.removeClass('test-pass test-fail').text('');
testBook(frame).then(
function success() {
run.prop('disabled', false).text('Run Tests');
results.addClass('test-pass').text('All tests passed');
},
function failure(err) {
run.prop('disabled', false).text('Run Tests');
results.addClass('test-fail').text('Test failed, see console');
}
);
});
Book.init(frame, store);
});
</script>
</head>
<body>
<button id="test-run">Run Tests</button>
<span id="test-results"></span>
<div id="test-frame">
</div>
</body>
</html>
here is what I have tried :
books.js
var data = JSON.parse(characters);
data.forEach(characters => {
console.log(characters.name)
});
so when I run the app in my browser I see the following error :
Uncaught ReferenceError: characters is not defined
what is wrong with my code ? any suggestion or help will be helpfull thanks
Having issues integrating socket io + express js onto my Bluehost server.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Poll App</title>
<link rel="stylesheet" href="/style.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container" id="react-container">
<h1>Live Polling</h1>
</div>
<!-- <script src="/socket.io-client/dist/socket.io.js"></script> -->
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script src="./dist/bundle.js"></script>
<!-- <script src="/socket.io/socket.io.js"></script> -->
</body>
</html>
here's my app.js
var React = require('react');
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;
var Header = require('./parts/Header');
var io = require('socket.io-client');
var APP = React.createClass({
getInitialState(){
return {
status : 'disconnected',
title : '',
member : {},
audience: [],
speaker : '',
questions: [],
currentQuestion: false
}
},
componentWillMount(){
this.socket = io('react-test.derrickmv.com');
this.socket.on('connect', this.connect);
this.socket.on('disconnect', this.disconnect);
this.socket.on('welcome', this.updateState);
this.socket.on('joined', this.joined);
this.socket.on('audience', this.updateAudience);
this.socket.on('start', this.start);
this.socket.on('end', this.updateState);
this.socket.on('ask', this.ask);
},
emit(eventName, payload){
this.socket.emit(eventName, payload);
},
connect(){
var member = (sessionStorage.member) ? JSON.parse(sessionStorage.member): null;
if (member && member.type ==='audience'){
this.emit('join', member);
} else if (member && member.type === 'speaker'){
this.emit('start', {name: member.name, title : sessionStorage.title});
}
this.setState({ status: 'connected'});
},
disconnect(){
this.setState({
status: 'disconnected',
title: 'disconnected',
speaker: ''
});
},
updateState(serverState){
this.setState(serverState);
},
joined(member){
sessionStorage.member = JSON.stringify(member);
this.setState({ member: member});
},
start(presentation){
if( this.state.member.type === 'speaker'){
sessionStorage.title = presentation.title;
}
this.setState(presentation);
},
ask(question){
sessionStorage.answer = '';
this.setState({ currentQuestion: question });
},
updateAudience(newAudience){
this.setState({ audience: newAudience});
},
render(){
return (
<div>
<Header {...this.state} />
<RouteHandler emit={this.emit} {...this.state} />
</div>
);
}
});
module.exports = APP;
After placing everything into my server, I get the following errors in the console log stating a 404 (Not Found) Error.
Here's my app-server.js:
Thanks so much for helping!
Trying to do 2 things
request offline and user_events permission
perminant session key
Need a feed from facebook for events and there is no rss for it.
Any help would be greatly appreciated!!!
Currently have the following
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--<title>Connect JavaScript - jQuery Login Example</title>-->
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<div>
<button id="login">Login</button>
<button id="logout">Logout</button>
<button id="disconnect">Disconnect</button>
</div>
<div id="fb-root"></div>
<script type="text/javascript">
// initialize the library with the API key
FB.init({ apiKey: 'apikey' });
// fetch the status on load
FB.getLoginStatus(handleSessionResponse);
$('#login').bind('click', function () {
FB.Connect.showPermissionDialog('publish_stream');
});
$('#logout').bind('click', function () {
FB.logout(handleSessionResponse);
});
$('#disconnect').bind('click', function () {
FB.api({ method: 'Auth.revokeAuthorization' }, function (response) {
clearDisplay();
});
});
// no user, clear display
function clearDisplay() {
$('#user-info').hide('fast');
}
// handle a session response from any of the auth related calls
function handleSessionResponse(response) {
// if we dont have a session, just hide the user info
if (!response.session) {
clearDisplay();
return;
}
// if we have a session, query for the user's profile picture and name
FB.api(
{
method: 'fql.query',
//Event pull
query: 'SELECT eid, name, tagline, pic_big, host, description, event_type, event_subtype, start_time, end_time, creator, location, venue FROM event WHERE eid IN (SELECT eid FROM event_member WHERE uid =' + FB.getSession().uid + ')'
},
function (response) {
var user = response[0];
$('#user-info').html('eid: ' + user.eid).show('fast');
}
);
}
</script>
</body>
</html>
I don't think this helps with your entire issue, however the login code i've used in the past looks something more like this:
$('#login').bind('click', function () {
FB.init({appId: "<appid goes here>", status: true, cookie: true});
FB.login(function(response) {
if (response.session) {
// user logged in, do whatever here
} else {
// user cancelled login
}
},{perms:"offline_access,user_events"});
return false;
});