what's wrong here?
OPTIONS https://twitter.com/oauth/request_token 401 (Unauthorized)
jsOAuth-1.3.4.js:483 XMLHttpRequest cannot load
https://twitter.com/oauth/request_token. Origin "http://localhost:8080"
is not allowed by Access-Control-Allow-Origin.Object
<!DOCTYPE html>
<html>
<head>
<!--
A simple example of PIN-based oauth flow with Twitter and jsOAuth.
This is mostly based on/copied from <http://log.coffeesounds.com/oauth-and-pin-based-authorization-in-javascri>.
Get jsOAuth at <https://github.com/bytespider/jsOAuth/downloads>
-->
<meta charset="utf-8">
<title>jsOauth test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jsOAuth-1.3.4.js"></script>
<style type="text/css" media="screen">
</style>
<script>
$(document).ready(function() {
var options = {
consumerKey: 'YOUR_CONSUMER_KEY',
consumerSecret: 'YOUR_CONSUMER_SECRET'
};
var requestParams;
var accessParams;
var oauth = OAuth(options);
oauth.get('https://twitter.com/oauth/request_token',
function(data) {
console.dir(data);
window.open('https://twitter.com/oauth/authorize?'+data.text);
requestParams = data.text
},
function(data) { alert('darn'); console.dir(data) }
);
$('#pinbutton').click(function() {
if ($('#pin').val()) {
oauth.get('https://twitter.com/oauth/access_token?oauth_verifier='+$('#pin').val()+'&'+requestParams,
function(data) {
console.dir(data);
// split the query string as needed
var accessParams = {};
var qvars_tmp = data.text.split('&');
for (var i = 0; i < qvars_tmp.length; i++) {;
var y = qvars_tmp[i].split('=');
accessParams[y[0]] = decodeURIComponent(y[1]);
};
oauth.setAccessToken([accessParams.oauth_token, accessParams.oauth_token_secret]);
getHomeTimeline();
},
function(data) { alert('poop'); console.dir(data); }
);
}
});
function getHomeTimeline() {
oauth.get('https://api.twitter.com/1/statuses/home_timeline.json',
function(data) {
entries = JSON.parse(data.text);
var html = [];
for (var i = 0; i < entries.length; i++) {
html.push(JSON.stringify(entries[i]));
};
$('#timeline').html(html.join('<hr>'));
},
function(data) { alert('lame'); console.dir(data); }
);
}
});
</script>
</head>
<body>
<h1>jsOauth test</h1>
When you get a PIN, enter it here.
<input id="pin" type="text" value=""><button id='pinbutton'>Save</button>
<div id="timeline">
</div>
</body>
</html>
I could give you the answer, but what you're doing is against the Twitter API Terms of Service. OAuthing in JavaScript exposes the secret credentials to anyone who visits the site and that is A Bad Thing. Please do this on your back-end.
Related
I created an web application (js) that connects with Google. It works on PC but not on mobile. The error indicated is popup_closed_by_user while I did not close the popup!! I would like some help please, here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://apis.google.com/js/api:client.js"></script>
<title>Document</title>
</head>
<body>
<h3>warning: there is Script Error bc client id is not entered. this example don't work in stackoverflow code snippet</h3>
<h1>name: <span id="namegoogle">not connected</span></h1>
<h1>image: <img id="img_google" alt="not connected"/></h1>
<button id="customBtn">GOOGLE: click to connect</button>
<p>ERROR: <span id="errorgoogle">[NO ERROR]</span></p><br><br><h3>WARNING: CLIENT ID IS NOT DECLARED</h3>
</body>
<script>var is_google_user_succed_942894 = false;
var google_getGivenName = "";var google_getFamilyName = "";var google_getAvatarUrl = "";
var googleUser = {};var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: '################################################################################################.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
};
startApp();
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
document.getElementById("namegoogle").innerHTML = googleUser.getBasicProfile().getName();
document.getElementById("img_google").src = googleUser.getBasicProfile().getImageUrl();
}, function(error) {
var error_msg = error['error']; document.getElementById('errorgoogle').innerHTML = error_msg;
});
}
</script><script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</html>
I making my own real time youtube subscriber counter but refresh time is to high and when I change refresh time it not happening. Can someone tell me what I am doing wrong?
<html>
<head>
<link rel="stylesheet" href="odometer-theme-default.css"/>
<script src="odometer.js"></script>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
.odometer {
font-size:100px;
}
#ytName {
font-size: 52px;
font-family:Arial;
}
</style>
</head>
<script type="text/javascript">
$(document).ready( function() {
var chanName = "";
loadChannel("UCPKqr9qSEXi6r03B18wRj6g");
function loadChannel(name) {
chanName = name;
var url = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+name+'&key=AIzaSyBPIHea9sWYMSxe8W-tIn7OUvIw-dagDDI';
$.getJSON(url, function(data) {
$("#odometer").html(data.items[0].statistics.subscriberCount);
});
var url1 = 'https://www.googleapis.com/youtube/v3/channels?part=snippet&id='+chanName+'&key=AIzaSyBPIHea9sWYMSxe8W-tIn7OUvIw-dagDDI';
$.getJSON(url1, function(data) {
$('#ytName').html(data.items[0].snippet.title);
$('#ytLink').html('Link');
});
}
setInterval( function() {
var url = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+chanName+'&key=AIzaSyBPIHea9sWYMSxe8W-tIn7OUvIw-dagDDI';
$.getJSON(url, function(data) {
$("#odometer").html(data.items[0].statistics.subscriberCount);
}, 1000);
});
});
</script>
<body background = "bg.jpg">
<center>
<div id="ytName"></div>
<div id="ytLink"></div>
<div id="odometer" class="odometer"></div>
</center>
</body>
Maybe javascript should be written differently?
if you write the new time in milliseconds, the response is a bit
setInterval( function() {
// update code is here
}, 1000)
As mentioned in title, when data is referenced inside of the html template it is undefined.
JS:
var data = [];
for (var i = 0; i < rows.length; i++) {
data.push(rows[i]);
if (i == rows.length - 1) {
fs.readFile('tree.html', 'utf8', function (err, html) {
console.log(data);
var template = _.template(html);
var result = template({ data: data });
res.send(result);
});
}
}
HTML:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
</head>
<body>
<%
console.log(data);
%>
</body>
</html>
I'm new to underscore, but it works fine for me. Check what you've missed.
File Structure:
--test.html
--test.js
test.html
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
</head>
<body>
<%
console.log(data, 'it works! ');
%>
</body>
</html>
test.js
var data = [], rows = [1,2,3,4];
var _ = require('underscore'),
fs = require('fs');
for (var i = 0; i < rows.length; i++) {
data.push(rows[i]);
if (i == rows.length - 1) {
fs.readFile('test.html', 'utf8', function(err, html) {
console.log(html); // correct html file content
var template = _.template(html);
var result = template({
data: data // After console print the html file,
// it runs the script code in html file,
// which in my point of view, means `template` works.
});
// res.send(result);
});
}
}
Run node test.js in the terminal, it works fine.
PS: I did console.log(result) and got the correct result:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
</head>
<body>
</body>
</html>
I am able to retrieve information from the current user in Parse, however, I would like to be able to retrieve information from anyone but the current user.
For example, this is how I retrieve and display information about the current user:
Parse.initialize("ID", "ID");
angular.module('AuthApp', [])
.run(['$rootScope', function($scope) {
$scope.currentUser = Parse.User.current();
than in the html I refer to it as such:
{{currentUser.get('username')}}
I do not want pull information from the current user but another user as determined by their objectID.Hence, my question is how would pull information of lets say a user with objectid 17845
Update:
<script type="text/javascript">
$(document).ready(function() {
// ***************************************************
// NOTE: Replace the following your own keys
// ***************************************************
var userID = document.getElementById("txtUserID").value;
Parse.initialize("ID", "ID");
var userInfo = Parse.Object.extend("User");
var query = new Parse.Query(userInfo);
query.get(userID, {
success: function(userInfo) {
// The object was retrieved successfully.
var score = userInfo.get("Address");
var message = 'Address: ' + score;
document.getElementById('address').innerHTML = message;
},
error: function(object, error) {
// The object was not retrieved successfully.
// error is a Parse.Error with an error code and message.
}
});
});
</script>
</head>
<body ng-app="AuthApp">
<div ng-show="currentUser">
<input name="txtUserIDName" id="txtUserID" type="text" value="Please enter your user ID">
</div>
</div>
</body>
</html>
Update 2:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--======================================================================-->
<!--Custom website css file is linked here-->
<link href="css/style1.css" rel="stylesheet">
<!--Font Awesome CSS link-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--=================================================-->
<!--Javascript file linked here-->
<script src="js/bootstrap.min.js"></script>
<script src="js/personal.js"></script>
<script src="js/functions.js"></script>
<meta charset=utf-8 />
<title>Admin Panel</title>
<script type="text/javascript">
$(document).ready(function() {
// ***************************************************
// NOTE: Replace the following your own keys
// ***************************************************
Parse.initialize("ID", "ID");
app.controller('MainCtrl', function($scope) {
$scope.userIdChanged = function () {
var query = new Parse.Query(Parse.User);
query.get($scope.userId, {
success: function(userInfo) {
// The object was retrieved successfully.
var address = userInfo.get("Address");
$scope.address = 'Address: ' + address;
},
error: function(object, error) {
// The object was not retrieved successfully.
// error is a Parse.Error with an error code and message.
}
});
};
});
</script>
</head>
<body ng-Controller="MainCtrl">
userId: <input type="text" ng-model="userId" ng-blur="userIdChanged()"/>
<div>{{address}}</div>
</body>
</html>
var query = new Parse.Query(Parse.User);
query.get('17845', {
success: function(userInfo) {
// The object was retrieved successfully.
},
error: function(object, error) {
// The object was not retrieved successfully.
// error is a Parse.Error with an error code and message.
}
});
Update answer:
Instead of using dom manipulation javascript such as document.getElementById and jquery $(document).ready, you should use angular databinding. There is no need to use var userInfo = Parse.Object.extend("User"); as that is already available in Parse.User.
app.controller('MainCtrl', function($scope) {
$scope.userIdChanged = function () {
var query = new Parse.Query(Parse.User);
query.get($scope.userId, {
success: function(userInfo) {
// The object was retrieved successfully.
var address = userInfo.get("Address");
$scope.address = 'Address: ' + address;
},
error: function(object, error) {
// The object was not retrieved successfully.
// error is a Parse.Error with an error code and message.
}
});
};
});
Html:
I'm using ng-blur here which will call userIdChanged method on scope when value is changed and textbox has lost focus. You could also have a button and use ng-click.
<body ng-Controller="MainCtrl">
userId: <input type="text" ng-model="userId" ng-blur="userIdChanged()"/>
<div>{{address}}</div>
</body>
I'm using JStree to display an XML file, and after displaying it the user can create, rename, or delete some nodes, and sor sure these changes appear only on the displayed xml and not reflected on the original file, I want to know how to reflect this changes to the original XML fie back after clicking like a submit button, or at least how to get the data changed.
Update
The code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu-editor</title>
<script type="text/javascript" src="src/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="src/jstree/jquery.cookie.js"></script>
<script type="text/javascript" src="src/jstree/jquery.hotkeys.js"></script>
<script type="text/javascript" src="src/jstree/jquery.jstree.js"></script>
<link href="themes/!style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="src/jstree/!script.js"></script>
<script type="text/javascript" src="src/UIMTreeProcessor.js"></script>
<style type="text/css">
.
.
.
//css stuff
</style>
</head>
<body>
<div id="dummy"></div>
<div id="mylist">
<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>
</div>
<div id="submit" class="submit_btn">Submit</div>
</body>
<script type="text/javascript" class="source below">
var _url = "cafe.xml";
var _uimTree = null;
$(function () {
getTopContent();
});
getTopContent = function(){
$.ajax({
type: "GET",
url: _url,
dataType:"xml",
cache: false,
beforeSend:function(){
//do something before send
},
success: function(data){
processXML(data);
},
error:function(e){
alert("Error: "+e);
}
});
}
processXML = function(root){
_uimTree = new UIMTreeProcessor(root, $("#mylist"));
_uimTree.doProcess();
}
$('#submit').on('click',function(){
//alert the entire XML after edits via (getXML)
});
</script>
And the UIMtreeprocessor Library code
function UIMTreeProcessor(data, treeEl) {
this.data = data;
this.treeEl = treeEl;
}
UIMTreeProcessor.prototype.initTree = function(data){
this.treeEl.jstree({
"json_data" : {
"data":data,
"progressive_render":"true"
},
"plugins" : ["themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"],
"core":{"animation":0}
});
}
UIMTreeProcessor.prototype.doProcess = function(){
//Find root:
var _root = $(this.data).children(':first-child');
var _a_feed = new Array();
this.vsTraverse($(_root), _a_feed);
var _treedata = [{"data":_root[0].nodeName,"children":_a_feed, "state":"open"}];
this.initTree(_treedata);
}
UIMTreeProcessor.prototype.vsTraverse = function(node, arr){
var _ch = $(node).children();
for(var i=0; i<_ch.length; i++){
var _vsArr = new Array();
this.vsTraverse(_ch[i], _vsArr);
var _a_att = this.vsTraverseAtt(_ch[i]);
if(null!=_a_att){
_vsArr.push([{"data":"Attributes "+"["+_ch[i].nodeName+"]","children":_a_att, attr : { "class" : "uim_attr"}}]);
}
if(null!=_ch[i].firstChild && 3==_ch[i].firstChild.nodeType){
arr.push([{"data":_ch[i].nodeName + ": " + _ch[i].firstChild.textContent,"children":_vsArr, "state":"open"}]);
}else{
arr.push([{"data":_ch[i].nodeName,"children":_vsArr, "state":"open"}]);
}
}
}
UIMTreeProcessor.prototype.vsTraverseAtt = function(node){
var _a_atts = null;
if(null!=node.attributes && node.attributes.length > 0){
_a_atts = new Array();
for(var i=0; i<node.attributes.length; i++){
_a_atts.push(node.attributes[i].nodeName + ":" + node.attributes[i].nodeValue);
}
}
return _a_atts;
}
Edit: I was really wrong in my original answer.
There is a get_xml method in the xml_data plugin, which is supposed to do what you describe. I have not tested it myself, but if it's anything like json_data.getJSON, the output will contain all kinds of JStree metadata which you will not want to put back into your XML.