I have to make a work with the trello API, but I'm getting error 400 (invalid token) and I have no idea why.
This is my code (I have replaced my actual key with mykey)
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://trello.com/1/client.js?key=mykey"></script>
<script type="text/javascript">
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication"); },
error: function() { console.log("Failed authentication"); }
});
</script>
</html>
You should put all your code logic inside document.ready, so the entire document will be ready and then only you will get the popup for authentication / authorization. you can get a valid app key here : https://trello.com/app-key See the code example :
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
<div id="loggedin">
<div id="header">
Logged in to as <span id="fullName"></span>
</div>
<div id="output"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://api.trello.com/1/client.js?key=[appKeygoeshere]"></script>
<script type="text/javascript">
$(window).load(function(){
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication");
Trello.members.get("me", function(member){
$("#fullName").text(member.fullName);
var $cards = $("<div>")
.text("Loading Cards...")
.appendTo("#output");
// Output a list of all of the cards that the member
// is assigned to
Trello.get("members/senthil192/cards/all", function(cards) {
$cards.empty();
$.each(cards, function(ix, card) {
//alert(card.name);
$("<a>")
.attr({href: card.url, target: "trello"})
.addClass("card")
.text(card.name)
.appendTo($cards);
});
});
});
},
error: function() { console.log("Failed authentication"); }
});
});
</script>
</html>
code ref url : http://jsfiddle.net/danlec/nNesx/
Related
I am using Jquery to fetch remote data but getting error
Uncaught TypeError: $(...).autocomplete is not a function.
I have tried a lot but did not find out the issue behind this I think must be an error in the library.
Using API: link also not fetching data from API
Data is coming in form of Json:
[{"PubId":"1","Title":"Punjab Kesari","Place":"1"}]
Code:
//But it is not fetching data
$(function() {
$("#pub").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://myimpact.in/deletearticle/services/publication.php",
type: "GET",
data: request,
dataType: "JSON",
minLength: 2,
success: function(data) {
response($.map(data, function(el) {
return {
label: el.Title,
value: el.PubId
};
}));
}
});
},
select: function(event, ui) {
this.value = ui.item.label;
event.preventDefault();
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<div class="input-group">
<label class="label"> Publication </label>
<input class="input--style-4" type="text" id="pub" name="publication">
<div id="pub"> </div>
</div>
</body>
</html>
There can be 2 scenarios …
You are calling the autocomplete function before calling the
jQuery library.
Another version of jQuery is included with the other version.
You can use the below code in your query. I hope it will resolve the issue.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
This is simple but my JS is a bit rusty..
I am trying to trigger a get request by pressing a JQuery Mobile element.
I can see the button but failing to do an actual Get Request
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
<p><input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="generator_button"></p>
</form>
</body>
<script>
$("p").on("tap",function(){
$.ajax({
'url' : '192.168.8.110:5000/generator_on',
'type' : 'GET',
'success' : function(data) {
if (data == "success") {
alert('request sent!');
}
}
});
</script>
Please, note: in your markup there is a Flip switch of type checkbox, not a button, so I believe you may better check the state of the underlying checkbox instead of stick to a tap event.
Reference: jQuery Mobile Flip switch
Moreover, you it would be nice to provide a JQM page structure to the whole stuff.
Here is an example:
function sendRequest() {
$.ajax({
'url': '192.168.8.110:5000/generator_on',
'type': 'GET',
'success': function(data) {
if (data == "success") {
alert('request sent!');
}
}
});
}
$(document).on("change", "#generator_button", function() {
var state = $("#generator_button").prop("checked");
if (state === true) {
// Flip switch is on
console.log("Request sent.");
//sendRequest(); // uncomment
} else {
// Flip switch is off
//...endpoint _off
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Header</h1>
</div>
<div role="main" class="ui-content">
<label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="generator_button" id="generator_button">
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
You are missing }); on last line of your javascript.
Your javascript code should look like this
$("p").on("tap",function(){
$.ajax({
'url' : '192.168.8.110:5000/generator_on',
'type' : 'GET',
'success' : function(data) {
if (data == "success") {
alert('request sent!');
}
}
});
});
Ok, so I had to change the url to: 'http://192.168.8.110:5000/generator_on and tested it on a browser without an adblock I mentioned to make it work!
I am loading content (HTML) to my website with ajax. This includes, inter alia, this snippet:
Hover me...
As described here: bootstrap 3 > tooltip, i need to initialize it. How can i initialize it after ajax success?
Edit: Full working example. Here i simulate an "ajax call". The problem is the duration. When you delete the timeout it would work:
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div id="html" style="margin-top: 50px;">
That works: Hover me 1...
</div>
<div style="margin-top: 50px;">Ajax: <span id="ajax"></span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
// Document ready
$(document).ready(function ()
{
loadResult();
activateTooltip();
});
// Result
function loadResult()
{
// "Ajax call"
setTimeout(function(){
var result = 'Hover me 2...';
$("#ajax").html(result);
}, 2000); // Simulate Ajax duration
activateTooltip();
}
// Tooltip
function activateTooltip()
{
$('[data-toggle="tooltip"]').tooltip();
}
</script>
</body>
</html>
https://plnkr.co/edit/KBsJK27F9Sb5kV2Ozy56
Hover me...
and reactivate tooltip function in ajax success:
function loadResult()
{
$.ajax({
type: "POST",
url: "index.php?action=loadResult",
data: "id=1",
dataType: 'text',
success: function(data){
var json = $.parseJSON(data);
$("#result").html(json.result);
activateTooltip();
}
});
}
Just add this attribute:
data-placement="right"
So after I start my server, go to my local host, and either click the sign up or login button, I get an error popping up in my console saying
"Uncaught ReferenceError: Handlebars is not defined" I don't know what exactly the issue is. I tried re- npm installing it because maybe I didn't have it installed. The error that immediately pops up in the console before I actually click the buttons is this:
http://s23.postimg.org/bgbykf3qh/Screen_Shot_2015_12_16_at_10_02_14_AM.png
I also thought maybe it was because I put the script in the wrong section of my HTML file. However, I keep getting the same error.
Here is what my index.html file looks like.
<html>
<head>
<title>Wishes Project</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Wish List</h1>
<button id="sign-up">Sign Up</button><br>
<button id="login">Log In</button><br>
<template id="status-template">
<h3 id="status"></h3>
</template>
<div id="form-container"></div>
<!-- LOGIN ===================== -->
<template id="login-template">
<div id="login-container" data-id="{{_id}}">
<input type="text" id="username" placeholder="username"/><br>
<input type="text" id="password" placeholder="password"/><br>
<button id="login-button" data-id="{{_id}}">Log In!</button>
</div>
</template>
<!-- NEW USER ===================== -->
<template id="signup-template">
<div id="signup-container" data-id="{{_id}}">
<input type-"text" id="username" placeholder="username"/></br>
<input type="text" id="password" placeholder="password"/></br>
<input type="text" data-id="{{_id}}">Register!</button>
</div>
</template>
<!-- NEW WISH ======================= -->
<template id="new-wish-template">
<div id="new_wish-container" data-id="{{_id}}">
<input type="text" id="wish" placeholder="make a wish"/><br>
<button id="make-wish" data-id="{{_id}}">Create Wish!</button>
</div>
</template>
<button id="logout">Logout</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0 4/handlebars.js"></script>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.js"></script>
</body>
</html>
Here is what my app.js file looks like.
console.log('app.js');
$(function() {
$('#sign-up').click(signUpForm);
$('#login').click(loginForm);
$('#logout').click(delCookie).hide();
if( Cookies.get('loggedinId') != undefined ) {
wishForm();
};
});
var formContainer = $('#form-container');
//LOGIN ==============================
var loginForm = function() {
console.log('showing login form');
$('#sign-up').hide();
$('#login').hide();
var template = Handlebars.compile($('#login-template').html());
formContainer.append(template);
$('#login-button').click(function() {
console.log('clicked');
loginPost()
});
};
var loginPost = function() {
user = {
username: $('#username').val(),
password: $('#password').val(),
};
$.ajax({
url: 'http://localhost:3000/login',
method: "POST",
dataType: 'json',
data: user
}).done(function(data) {
console.log(data.username+"login successful");
user = Cookies.get("loggedinId");
wishForm()
});
};
//LOG OUT =========================
var delCookie = function() {
Cookies.remove('loggedinId');
loginForm();
};
//NEW USER =========================
var signUpForm = function() {
console.log('showing sign up form');
$('#sign-up').hide();
var template = Handlebars.compile($('#signup-template').html());
formContainer.append(template);
$('#register').click(function(){
console.log('clicked register');
newUser();
});
};
var newUser = function() {
user = {
username: $('#username').val(),
password: $('#password').val(),
};
console.log(user);
$.ajax({
url: "http://localhost:3000/users",
method: "POST",
data: user
}).done(function(data){
wishForm();
});
user = Cookies.get(user.username);
};
var wishForm = function() {
console.log('showing wish form');
$('#sign-up').hide();
$('#login').hide();
$('#logout').show();
formContainer.empty();
var template = Handlebars.compile($('#new-wish-template').html());
formContainer.append(template);
$('#make-wish').click(function() {
console.log('clicked make wish');
newWish();
});
};
var newWish = function() {
console.log('showing wish form');
var wish = {
content: $('#wish').
Can anybody help? Thank you.
Typo.
Try:
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js
Instead of:
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0 4/handlebars.js
You are loading .js which path is error 404. Do:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.js"></script>
More information about Handlebars CDN
I am new into web devlopment. I am trying to use select2-bootstrap. It working fine. Just need a css help.
Initial display of widget :
There is an indent between the bars(between Search for a movie and No matches found)
After clicking on the widget it looks fine as shown here and thereafter the dent disappears even on subsequent use.
Can someone suggest how to remove the dent between two bars in the first pic above.
NOTE :
CSS Added : select2.css, select2-bootstrap.css and bootstrap.css
JS Added : bootstrap.js, jquery-1.9.1.js, select2.js
Also please suggest how to avoid the No matches found display immediately after page loads.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2-bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
$(document)
.ready(
function() {
MultiAjaxAutoComplete('#e6',contextPath + "/getData");
$('#save').click(function() {
alert($('#e6').val());
});
});
</script>
<script type="text/javascript">
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder : "Search for a movie",
//minimumInputLength : 1,
multiple : true,
ajax : {
url : url,
dataType : 'json',
data : function(term, page) {
return {
q : term,
page_limit : 10,
};
},
results : function(data, page) {
console.log("page = " + page);
return {
results : data.results
};
}
},
formatResult : formatResult,
formatSelection : formatSelection,
initSelection : function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id : item[0],
country : item[1]
});
});
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.country + '</div>';
};
function formatSelection(data) {
return data.country;
};
</script>
</head>
<body style="background-color: #F9F9F6">
<h1>Serach Movies</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<input type='hidden' id="e6" class="span8" />
</div>
<div class="span3">
<button id="save">Save</button>
</div>
</div>
</div>
</body>
</html>