Uncaught twilio.exception wrong number of segments - javascript

I'm using Twilio to make a call from a browser to the phone. When I click call I get this error Uncaught twilio.exception wrong number of segments
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
Twilio.Device.setup('#token');
Twilio.Device.ready(function (device) {
$("#log").text("Client '#clientName' is ready");
});
Twilio.Device.error(function (error) {
$("#log").text("Error: " + error.message);
});
Twilio.Device.connect(function (conn) {
$("#log").text("Successfully established call");
});
Twilio.Device.disconnect(function (conn) {
$("#log").text("Call ended");
});
Twilio.Device.incoming(function (conn) {
$("#log").text("Incoming connection from " + conn.parameters.From);
// accept the incoming connection and start two-way audio
conn.accept();
});
function call() {
// get the phone number or client to connect the call to
params = { "PhoneNumber": $("#number").val() };
Twilio.Device.connect(params);
}
function hangup() {
Twilio.Device.disconnectAll();
}
</script>
<div class="hero-unit" style="background-color: white; margin-left: 650px;">
<div class="container">
<h3>Call us and watch us answer!</h3>
<p style="margin-left: -65px;">Use Twilio to call our office and watch us answer on camera!</p>
<button class="call" onclick="call();">
Call
</button>
<button class="hangup" onclick="hangup();">
Hangup
</button>
<input type="text" id="number" name="number"
placeholder="Enter a phone number or client to call" />
</div>
</div>
In the code behind I have:
public string TwilioToken
{
get
{
string accountSid = "*************";
string authToken = "*************";
string applicationSid = "************";
string clientName = "*****";
if (Request["client"] != null)
{
clientName = Request["client"];
}
var capability = new TwilioCapability(accountSid, authToken);
capability.AllowClientOutgoing(applicationSid);
capability.AllowClientIncoming(clientName);
return capability.GenerateToken();
}
}

Twilio evangelist here.
I can't quite tell how you are getting the value of the TwilioToken property to render in your HTML. In this line of the JavaScript:
Twilio.Device.setup('#token');
#token should be being replaced by the value being generated in your code-behind. Since you mention code-behind it sounds like you might be using WebForms. In order to render the value of the TwilioToken property in your HTML you'd need to use something like this syntax:
Twilio.Device.setup('<%= TwilioToken %>');
Once you do that when you load the page in a browser you should see that syntax replaced by a long encoded string of characters that Twilio uses to setup the JavaScript library.
Hope that helps.

The sample code shows lines like this:
$capability = new Services_Twilio_Capability($TWILIO_SID, $TWILIO_TOKEN);
$capability->allowClientOutgoing('APabe7650f654fc34655fc81ae71caa3ff');
$TOKEN = $capability->generateToken();
Followed by later on this:
Twilio.Device.setup("<?php echo $TOKEN; ?>");
I was getting this same error until I realized that I had misspelled $TOKEN and was passing a blank string to Twilio.Device.setup. After fixing it, the error went away.

Related

Javascript type error - The "listener" argument must be of type Function. Received type object

I am trying to create a URL shortener using jsonbase.com and vanilla javascript.
button tag in HTML was not able to recognize the method "shortUrl" from my js file. So, I directly added the code of add event listener in the js file.
index.html
<body>
<div id="app">
<input type="url" id="urlinput">
<input id="mybutton" type="button" value="Short the URL"/>
</input>
</div>
<script src="src/index.js"></script>
</body>
Now, I am getting an error - Javascript type error - The "listener" argument must be of type Function. Received type object - when I am trying to use jsonbase.com for storing the data.
script.js
function shortUrl() {
var longurl = getURL();
genHash();
var uniqueHash = window.location.hash.substr(1);
sendRequest(longurl, uniqueHash);
if (window.location.hash !== "") {
var short = getRequest(uniqueHash);
if (short !== "") {
window.location.herf = "short";
}
}
}
use of jsonbase.com
var jsonbase = require("jsonbase.com");
var token = "mytoken";
var store = jsonbase(token);
var endpoint = `jsonbase.com/${token}`;
//sending request
function sendRequest(longURL, uniqueHash) {
store.write(`${endpoint}/${uniqueHash}`, longURL);
}
//getting request
function getRequest(uniqueHash) {
return store.read(`${endpoint}/${uniqueHash}`).then((response) => {
return response.data;
});
}
generating hash for shorter
function genHash() {
if (window.location.hash === "") {
window.location.hash = getRandomStr();
}
}
Error screenshot -
I have created a reproducible sample code sandbox for my private application - https://codesandbox.io/s/url-shortner-t3ov2
Please let me know if any more info is required.
The issue is not your code, the issue is the package not parsing the JSON correctly, try using a different package
I know this does not answer your question, but it should solve it

SMS not sending to intl numbers using Branch.io and intl-tel-input

My form will only send to 10 digit US numbers. I'd like to send to Intl numbers once the country is selected. After looking through the Intl-Tel-Input docs, this code might be needed but I'm not having any luck with it: myInput.val(myInput.intlTelInput("getNumber"));
Here is the Branch.io text me the app doc, which is mostly the code below with the update of using phoneSMS.
How do I send to Intl numbers using branch.io and Intl-Tel-Input?
<script type="text/javascript">
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setIdentity track validateCode".split(" "), 0);
branch.init('YOUR-BRANCH-KEY');
function sendSMS(form) {
var phone = form.phoneSMS.value;
var linkData = {
tags: [],
channel: 'Website',
feature: 'TextMeTheApp',
data: {
'foo': 'bar'
}
};
var options = {};
var callback = function(err, result) {
if (err) {
alert("Sorry, something went wrong.");
}
else {
alert("SMS sent!");
}
};
branch.sendSMS(phone, linkData, options, callback);
form.phone.value = "";
}
</script>
HTML
<form onsubmit="sendSMS(this); return false;">
<input type="tel" name="phoneSMS" id="phoneSMS">
<input type="submit"/>
</form>
Intl Tel Input plugin:
<script type="text/javascript" src="{{ site.baseurl }}js/intlTelInput.js"></script>
<script>
$("#phoneSMS").intlTelInput({
utilsScript: "{{ site.baseurl }}/js/utils.js"
});
</script>
Alex from Branch.io here: Branch does support international phone numbers with the text-me-the-app feature, and we're hoping to have a country selector like Intl-Tel-Input integrated at some point soon.
For right now, you need to append the country code and + manually. We have a section describing this on our docs here (it's a little buried...sorry!). Basically you need to update that snippet with var phone = "+91" + form.phone.value; like so:
<script type="text/javascript">
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setIdentity track validateCode".split(" "), 0);
branch.init('YOUR-BRANCH-KEY');
function sendSMS(form) {
var phone = "+91" + form.phone.value;
var linkData = {
tags: [],
channel: 'Website',
feature: 'TextMeTheApp',
data: {
'foo': 'bar'
}
};
var options = {};
var callback = function(err, result) {
if (err) {
alert("Sorry, something went wrong.");
}
else {
alert("SMS sent!");
}
};
branch.sendSMS(phone, linkData, options, callback);
form.phone.value = "";
}
</script>
In theory you should be able to feed the output of Intl-Tel-Input into that variable.
If you do get this working, please let me know! We'd love to get it incorporated directly into the SDK.
The easiest way you could accomplish prepending the number with the international prefix is instead of var phone = form.phoneSMS.value in your sendSMS() function to update it to ask the intlTelInput itself for the number - it gives you international format.
Example:
var phone = $('#phoneSMS').intlTelInput("getNumber")
For further reference, check out intlTelInput's public methods.

javascript Local Storage not working

I am unable to use local storage for javascript. This is my first time trying local storage. I have two seperate HTML docs each with their own set of javascript code.
Doc 1 Javascript:
<script>
function callData() {
document.getElementById("1").innerHTML = localStorage.getItem("name1");
document.getElementById("2").innerHTML = localStorage.getItem("name2");
document.getElementById("3").innerHTML = localStorage.getItem("name3");
setNames();
}
function setNames() {
var 1st = document.getElementById("1").innerHTML;
var 2nd = document.getElementById("2").innerHTML;
var 3rd = document.getElementById("3").innerHTML;
if (typeof(Storage) != "undefined") {
localStorage.setItem("1", 1st);
localStorage.setItem("2", 2nd);
localStorage.setItem("3", 3rd);
}
else {
alert("Sorry, your browser does not support Web Storage"); }
}
</script>
Doc 1 Html
<body onLoad = "callData()">
<a style="text-align:left;" href= cameraApp.html>New Contact</a>
<h1 style="background-color:black; color:white; font-family:helvettica;">Address Book</h1>
<h3 style="background-color:blue; color:white; font-family:helvettica;">Contacts</h3>
<a id=1></a>
<a id=2></a>
<a id=3></a>
</body
Doc 2 JavaScript
<script>
function done() {
var 1st = localStorage.getItem("1");
var 2nd = localStorage.getItem("2");
var 3rd = localStorage.getItem("3");
var name = document.getElementById('nameTextfield').value;
if(1st = "") {
localStorage.setItem("name1",name);
alert("Success, Contact created");
} else if(2nd = "") {
localStorage.setItem("name2",name);
alert("Success, Contact created");
} else if(3rd = "") {
localStorage.setItem("name3",name);
alert("Success, Contact created");
} else {
alert("Sorry, Maximum contact limit reached");
}
}
</script>
</head>
Doc 2 HTML
<body>
<a style="text-align:left;" href= phonebook.html>Back</a>
<h1 style="background-color:black; color:white; font-family:helvettica;">Create a Contact</h1><br>
<form name="info">
<p id="name">Name: </p><input id="nameTextfield" type="textfield"/><br>
</form>
<button onclick="done()">Done</button>
</form>
</body>
The Doc 2 is meant to store the name given by the user and pass it to the Local Storage. Doc 1 is then supposed to display the names that have been stored in the local storage. Whenever I try to use this, after clicking the done button on doc 2 the page just refreshes and when I go back to doc 1 no names are added. I am using the Android SDK for the coding. I have tried using local storage for a hello world document so I know that it works for SDK.
Variable names can't start with numbers (Correct me if i'm wrong).
Which is throwing error
Uncaught SyntaxError: Unexpected token ILLEGAL.
Also, you're checking whether the value exists or not by comparing to empty string (""), which will not also work,
You can check it instead like
if(!variable){
//variable does not exist
}
fixing these seems to solve the issue
Doc1
Doc2

Javascript for onblur event

Building a registration form using webmatrix,asp.net & Javascript,sql server CE. I'm writing an onblur event for the Username textbox.When focus leaves the textbox, it checks if there is an exisiting username in database and displays a label if yes.The foll. code is not working as js code is ignored if inside the "#{}" block. It works fine outside the "#{}" block but then i cant give a condition there.Please help me out.
<html>
<head>
<script>
function RegUsernameLeave()
{
#{
regusername=Request.Form["regusername"];
if(!regusername.IsEmpty())
{
var db = Database.Open("myshop");
int usercount = db.QueryValue("select count(*) from webusers where username=#0",regusername);
db.Close();
if(usercount!=0){
document.getElementById("msg").innerHTML="Username already exists";}
}
}
}
</script>
</head>
<body>
<label>Username:</label>
<p><input type="text" id="regusername" onblur="RegUsernameLeave()"/>
<label id="msg"></label></p>
</body>
</html>
I'm taking a complete stab in the dark here.. but maybe something along these lines?
Basically - I'm assuming that anything #{} is printed out into the JS - so if we can executed the server side code and output it equal to your JS variable userCount then you can use that JS Variable to do your checking and output the error message (if necessary)
#functions{
public int GetUserCount() {
string regusername = Request.Form["regusername"].ToString();
if(!regusername.IsEmpty())
{
var db = Database.Open("myshop");
int usercount = db.QueryValue("select count(*) from webusers where username='#0'",regusername);
db.Close();
return usercount;
}
return 0;
}
}
function RegUsernameLeave()
{
var userCount = #GetUserCount();
if (userCount > 0)
document.getElementById("msg").innerHTML="Username already exists";
}

Not sure how to do ajax functions inside of Javascript to get to mysql

I'm not quite sure how to go about putting an ajax function inside of my Javascript timer so that every time it restarts then it'll add one of the item into the database. I've been looking and I found this: http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php but I'm not quite sure how to implement it into the code, so if you could help me it'd be appreciated.
Here's my code so far:
<head>
<script type="text/javascript">
var c=10;
var mineCount = 0;
var t;
var timer_is_on=0;
function timedCount() {
document.getElementById('txt').value = c;
c = c - 1;
if (c <= -1) {
mineCount++;
var _message = "You have mined " + mineCount + " iron ore" + (((mineCount > 1) ? "s" : "") + "!");
document.getElementById('message').innerHTML = _message;
startover();
}
}
function startover() {
c = 10;
clearTimeout(t);
timer_is_on=0;
doMining();
}
function doMining() {
if (!timer_is_on) {
timer_is_on = true;
t = setInterval(function () {
timedCount();
}, 1000);
}
}
</script>
<SPAN STYLE="float:left">
<form>
<input type="button" value="Mining" onClick="doMining()">
<input type="text" id="txt">
</form>
</SPAN>
<html>
<center>
<div id='message'></div>
try including jquery and put $.post('path/to/file.php', {param1: value1}); in your doMining() function
Idea of AJAX is, we will send sync/async request to server from the client side by using any scripting language like Javascript, and in server side processing we will do the desired functionality and send response as required.
I am not sure about PHP, as i generally work in dotnet.
So in PHP i hope there would be some way to create a web service or to create a web page, in that Page or Service get the appropriate parameters by using query string or post and then call the desired functionality of updating the DB. Then you can write in response to send the response back to JS client. JS can parse the reponse and can update UI as required.
Some references:
Using XmlHttp in Javascript

Categories