I have a task list where I want to add the "hide button" to each item on the list. I have one and every time you click it, it hides the entire list. I want to be able to have a button for each item and only hide that certain item once clicked. I have the fiddle here: https://jsfiddle.net/9cp9twfh/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="asana.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Asana</title>
</head>
<body>
<div class="topnav" id="myTopnav">
</div>
<button class="button">Hide Task</button>
<div class="task-list"></div>
<script src="asana.js"></script>
</body>
</html>
$(document).ready(function(){
$.ajax({
method: 'GET',
url: 'https://app.asana.com/api/1.0/projects/507623085822462/tasks',
headers: {
'Authorization': 'Bearer 0/0c60e78596a717c771c04c1c35b0a451'
},
success: function(result) {
$('.card').find('.taskname').html(result.data.name);
showTaskList(result.data);
}
});
});
$(document).ready(function() {
$('button').click(function() {
$('.task-list').stop(true).toggle('slow');
$('.button').text(function(i, t) {
return t == 'Show Task' ? 'Hide Task' : 'Show Task';
});
});
});
var showTaskList = function(taskList) {
for(var i = 0; i < taskList.length; i++) {
showTask(taskList[i]);
}
};
var showTask = function(taskData){
var taskList = $('.task-list');
var card = $('<div></div>').addClass('card');
var taskName = $('<div></div>').addClass('taskname');
taskName.html(taskData.name);
card.append(taskName);
taskList.append(card);
};
var showTask = function(taskData){
...
card.append(taskName);
card.append("<button class='hide' type='button'>Hide</button>");
taskList.append(card);
}
$(".task-list").on("click", "button.hide", function(){
$(this).closest(".card").hide();
});
Related
I can't download my generated file from app. Code now looks like this:
async handleFileTranslateAction(): Promise<void> {
this.progressSpinerIsVisible = true
this.originLanguageSelect = await this.languageService.getById(this.selectedOriginLanguage).toPromise()
this.destinationLanguageSelect = await this.languageService.getById(this.selectedDestinationLanguage).toPromise()
const result = await this.translateService.getTranslatedJson(
this.fileInput.getFile(),
this.originLanguageSelect,
this.destinationLanguageSelect
)
const result2 = JSON.stringify(result)
console.log(result2)
const blob = new Blob([result2], { type: 'text/json' });
console.log(blob)
this.fileDownloadUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
// const blob = new Blob([result2], { type: 'text/json' });
// const url= window.URL.createObjectURL(blob);
// window.open(url);
const element: HTMLElement = document.getElementById('download-final-json-button') as HTMLElement;
element.click()
this.progressSpinerIsVisible = false
}
When i consol loging result2, everything showing up correctly, all data is fine, but when i try console log blob and even, when i download a file, i always recieving file contains only this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TachoTranslations</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<tt-root></tt-root>
<script src="runtime.js" defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script></body>
</html>
The commented section don't works for me. I just want to download json file.
you can try with
blob = new Blob([response], { type: 'text/json' });
const url = window.URL.createObjectURL(blob);
window.open(url);
edit.
something like this?
downloadFromLocal(path) {
let link = document.createElement('a');
link.setAttribute('type', 'hidden');
link.href = `${path}`; //path to the file
link.download = 'autocertificazione.docx';// name that the file takes
document.body.appendChild(link);
link.click();
link.remove();
}
I have change value in textarea to Decode. I want change from value Decode Html to text normal. How I do it?
$("#editor").kendoTextArea({
change: function (e) {
var value = this.value();
var decoded = $("textarea").html(value).text();
$("#9").text(decoded);
}
});
result example: < strong >sadsadasdas< /strong >.
I want: < strong >sadsadasdas< /strong > =to=> sadsadasdas (normal text)
Here's a kendoTextArea example for you in changing HTML to text. Try this in the DOJO. The HTML is changed into text after two seconds.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<textarea id="description" style="width: 100%;"></textarea>
<script>
$(document).ready(function(){
var textArea = $("#description").kendoTextArea({
value: "<b>Bold text</b>",
rows:5,
change: function(e) {
var value = e.sender.value();
e.sender.value($(value).text());
},
}).data("kendoTextArea");
setTimeout(function() {
textArea.trigger("change");
}, 2000);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>The jQuery AJAX Example</title>
<script type = 'text/javascript'
src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type = 'text/javascript' language = 'javascript'>
$.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?tags=frenchay,uwe&tagmode=any&format=json&jsoncallback=?',
function(data){
$.each(data.items, function(i,item){
$('<img/>').attr('src', item.media.m).appendTo('#images');
if ( i == 10 ) return false;
});
});
</script>
</head>
<body>
<h3>Flickr (images tagged with uwe or frenchay)</h3>
<div id = 'images'>
</div>
</body>
</html>
Hello I am trying to run this code:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery AJAX Example</title>
<script type = 'text/javascript'
src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type = 'text/javascript' language = 'javascript'>
$.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?tags=frenchay,uwe&tagmode=any&format=json&jsoncallback=?',
function(data){
$.each(data.items, function(i,item){
$('<img/>').attr('src', item.media.m).appendTo('#images');
if ( i == 10 ) return false;
});
});
</script>
</head>
<body>
<h3>Flickr (images tagged with uwe or frenchay)</h3>
<div id = 'images'>
</div>
</body>
</html>
If I try to run it on my own machine with xampp on my mac it will not show the photos it is like something about jquery is missing on my laptop.
The code runs in jsfiddle.
For future searches I've attached the solved result here, tightening up the spaces between = and "" fixed it for the original poster of the issue:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery AJAX Example</title>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type='text/javascript' language='javascript'>
$.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?tags=frenchay,uwe&tagmode=any&format=json&jsoncallback=?',
function(data){
$.each(data.items, function(i,item){
$('<img/>').attr('src', item.media.m).appendTo('#images');
if ( i == 10 ) return false;
});
});
</script>
</head>
<body>
<h3>Flickr (images tagged with uwe or frenchay)</h3>
<div id='images'>
</div>
</body>
</html>
I am developing one webproject and in that project i have requirement that
there will be one button there named by auto detect and when ever any one
click on that button visitor will get his location popup in this near textbox,i have created it and seen result in console.
autodetect.html:44 {error_message: "This API project is not authorized to use >this API.", results: Array(0), status: "REQUEST_DENIED"}
Following is the code for it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Auto detect location</title>
</head>
<body>
<button onClick="getLocation()">Get Location</button>
<!--output will display here-->
<div id="output" style="margin-top: 20px;"></div>
<div id="output1" style="margin-top: 20px;"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var x = document.getElementById('output');
var y = document.getElementById('output1');
x.innerHTML = "Here is output";
function getLocation() {
//alert('hi getLocation working');
if (navigator.geolocation) {
// x.innerHTML = "Supporting..";
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Sorry your browser not supporting autodetect location.";
}
}
function showPosition(position) {
// x.innerHTML = position.coords.latitude;
// y.innerHTML = position.coords.longitude;
var locAPI = "https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyCY2xZxxjq0U6iVzYJetKi9uJZnmIrnPGs&latlng=" + position.coords.latitude + "," + position.coords.longitude + "&sensor=true";
// x.innerHTML = locAPI;
$.get({
url: locAPI,
success: function(data) {
console.log(data);
}
});
}
</script>
</body>
</html>
how we can get code corrected so that we will det displayed this location of the visitos ?
From the error message, it looks like you don't have a project with the api enabled, maybe this could help.Also you shouldn't share your api key publicly.
I want to display reviews on a webpage but have trouble with JSON parsing and formatting. Any help is greatly appreciated. I can handle the HTML and CSS markup, I just need to loop through each new review and get the reviewer, reviewtext, pictureurl, etc.
So far, it's only able to get the amount of reviews. I'm new to JSON and am having trouble parsing the reviews and getting the format right.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
var myurl = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/financial-sanity-now-los-angeles-2/reviews";
$.ajax({
url: myurl,
headers: {
'Authorization':'Bearer API-KEY-GOES-HERE',
},
method: 'GET',
dataType: 'json',
success: function(data){
// Grab the results from the API JSON return
var totalresults = data.total;
// If our results are greater than 0, continue
if (totalresults > 0){
// Display a header on the page with the number of results
$('#results').append('<h5>We discovered ' + totalresults + ' reviews!</h5>');
// Itirate through the JSON array of 'reviews' which was returned by the API
$.each(data.reviews[id], function(id, review) {
// Store each review object in a variable
var id = review.id;
var reviewtext = reviews[id].text;
var reviewrating = reviews[id].rating;
// Append our result into our page
$('$results').append(reviewtext + reviewrating + reviews);
});
} else {
// If our results are 0; no reviews were returned by the JSON so we display on the page no results were found
$('#results').append('<h5>We discovered no results!</h5>');
}
}
});
</script>
</body>
</html>
Minor mistakes with the code, but it's fine; your each function was a bit messy and you accidentally used $results as a reference which should've been #results; but it's all good your getting it!
Check out the code below (note Yelp only allows 3 reviews to be fetched; so when you see 8 total; it won't fetch more than 3);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
var myurl = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/financial-sanity-now-los-angeles-2/reviews";
$.ajax({
url: myurl,
headers: {
'Authorization':'Bearer API-KEY-GOES-HERE',
},
method: 'GET',
dataType: 'json',
success: function(data){
// Grab the results from the API JSON return
var totalresults = data.total;
// If our results are greater than 0, continue
if (totalresults > 0){ console.log(data);
// Display a header on the page with the number of results
$('#results').append('<h5>We discovered ' + totalresults + ' reviews!</h5>');
// Itirate through the JSON array of 'reviews' which was returned by the API
$.each(data.reviews, function(i, item) {
// Store each review object in a variable
var author = item.user.name;
var reviewtext = item.text;
var reviewrating = item.rating;
// Append our result into our page
$('#results').append('Author: <b>' + author + '</b><br> Review: ' + reviewtext + '<br>Rating: ' + reviewrating + ' <hr>');
});
} else {
// If our results are 0; no reviews were returned by the JSON so we display on the page no results were found
$('#results').append('<h5>We discovered no results!</h5>');
}
}
});
</script>
</body>
</html>