I am trying to load some data from an API into html. But it is not returning anything. My code is below. I have inspected it with developer tools but no errors. Kindly help please.
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('http://uapi.staging.simplestream.com//tvplayer/channels/programmes/2013-09-01/referer/tvplayer?format=json',function(data){
$('#content').empty();
$.each(data, function(entryIndex, entry){
var html = '<div class="data">';
html += '<div class="title">' + entry['title'] + '</h3>';
html += '<div class="shortDesc">' + entry['synopsis'] + '</div>';
html += '<div class="duration">' + entry['duration'] + '</div>';
$('#content').append(html);
});
});
return false;
});
</script>
</head>
<body>
<div id="content" style="width:500px; height:800px;">
<div class="ellipsis title"></div>
<div class="ellipsis shortDesc"></div>
<div class="duration"></div>
</div>
</body>
</html>
Related
How to make the function of adding new sections and subsections work on the created sections.
'use strict';
const btnNewChapter = document.querySelector('.btn-new-chapter');
const btnAddChapter = document.querySelector('.btn-add-chapter');
const btnAddSubChapter = document.querySelector('.btn-add-sub-chapter');
const main = document.querySelector('.main');
const mainBody = document.querySelector('.main-body');
const chapterListBody = document.querySelector('.chapter-list-body');
let appData = [];
btnNewChapter.addEventListener('click', function(){
const ol = document.createElement('ol');
ol.classList.add('main-body');
ol.innerHTML = '<ul class="chapter-list">' +
'<li class="chapter-list-title">' +
'<div class="data">' +
'<h1 class="title">' +
'<input type="text" class="chapter-title" placeholder="Chapter Title">' +
'</h1>' +
'<button class="btn-add-chapter">Add Body Text</button>' +
'<button class="btn-add-sub-chapter">Add SubBody Text</button>' +
'</div>' +
'</li>' +
'</ul>' +
'<ul class="chapter-list-body">' +
'<li class="chapter-list-text">' +
'<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>' +
'</li>' +
'</ul>';
main.append(ol);
})
btnAddChapter.addEventListener('click', function(){
const li = document.createElement('li');
li.classList.add('chapter-list-text');
li.innerHTML = '<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>';
chapterListBody.append(li);
});
btnAddSubChapter.addEventListener('click', function(){
const li = document.createElement('li');
li.classList.add('sub-chapter-list-text');
li.innerHTML = '<div class="subchapter">' +
'<input type="text" class="sub-chapter-text" placeholder="SubChapter Body">' +
'</div>';
chapterListBody.append(li);
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/normalize.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body class='main'>
<button class="btn-new-chapter">Add New Chapter</button>
<ol class="main-body">
<ul class="chapter-list">
<li class="chapter-list-title">
<div class="data">
<h1 class="title">
<input type="text" class="chapter-title" placeholder="Chapter Title">
</h1>
<button class="btn-add-chapter">Add Body Text</button>
<button class="btn-add-sub-chapter">Add SubBody Text</button>
</div>
</li>
</ul>
<ul class="chapter-list-body">
<li class="chapter-list-text">
<div class="chapter">
<input type="text" class="chapter-text" placeholder="Chapter Body">
</div>
</li>
<!-- <li class="sub-chapter-list-text">
<div class="subchapter">
<input type="text" class="sub-chapter-text" placeholder="Тело Подраздела">
</div>
</li> -->
</ul>
</ol>
<script src="/scripts/script.js"></script>
</body>
</html>
Next I am going to add button "Save Data", what will add inputs value and chapters to local storage and "remove" button, what will remove chapters, subchapters or titles from local storage and update the page?
In your code you're creating the event listeners before you insert the HTML.
That way your listeners can't be attached to those new items.
You also can't just re-run the event listener after you added the HTML or the events will stack up on the already added HTML resulting in duplication of functionality.
What I did here is I added a counter variable that keeps track of what event goes where.
I also removed the HTML from you HTML file and re-used the same function again for the very first run. That way you don't have the HTML in your code twice.
You don't have to use a counter. You could also use a class you add or remove to keep track of what already has the event but I thought this was the easiest to explain.
'use strict';
const main = document.querySelector('.main');
let counter = 0;
function addChapterHtml(counter) {
const chapterListBody = document.querySelector(`.chapter-list-body.counter${counter}`);
const li = document.createElement('li');
li.classList.add('chapter-list-text');
li.innerHTML = '<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>';
chapterListBody.append(li);
}
function addSubChapterHtml(counter) {
const chapterListBody = document.querySelector(`.chapter-list-body.counter${counter}`);
const li = document.createElement('li');
li.classList.add('sub-chapter-list-text');
li.innerHTML = '<div class="subchapter">' +
'<input type="text" class="sub-chapter-text" placeholder="SubChapter Body">' +
'</div>';
chapterListBody.append(li);
}
function addNewChapterHtml() {
counter ++;
const ol = document.createElement('ol');
ol.classList.add('main-body');
ol.innerHTML = '<ul class="chapter-list">' +
'<li class="chapter-list-title">' +
'<div class="data">' +
'<h1 class="title">' +
'<input type="text" class="chapter-title" placeholder="Chapter Title">' +
'</h1>' +
'<button class="btn-add-chapter counter' + counter + '">Add Body Text</button>' +
'<button class="btn-add-sub-chapter counter' + counter + '">Add SubBody Text</button>' +
'</div>' +
'</li>' +
'</ul>' +
'<ul class="chapter-list-body counter' + counter + '">' +
'<li class="chapter-list-text">' +
'<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>' +
'</li>' +
'</ul>';
main.append(ol);
// after adding the HTML into your DOM we attach the event listeners to those new buttons
document
.querySelector(`.btn-add-chapter.counter${counter}`)
.addEventListener('click', () => addChapterHtml(counter));
document
.querySelector(`.btn-add-sub-chapter.counter${counter}`)
.addEventListener('click', () => addSubChapterHtml(counter));
}
// this event listener can be added right now since the button is in the HTML already
document
.querySelector('.btn-new-chapter')
.addEventListener('click', addNewChapterHtml);
// Now let's use the functions we created above to add the first sections
addNewChapterHtml();
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/normalize.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body class='main'>
<button class="btn-new-chapter">Add New Chapter</button>
<script src="/scripts/script.js"></script>
</body>
</html>
I am trying to make a chatbox. Everything is working properly but when I click the "Start Chat" button, the alert shows "Object Object". Otherwise data fetching is perfect. I just can't see the modal chat box.
There is another almost similar example but in it the issue got solved by putting the <div id="user_model_details"></div> while that doesn't seem to be the case in this one.
<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/User.js"></script>
<link rel="stylesheet" href="https://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>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/User.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<div class="split Connect_Content" id="Connect_Cnt">
<div id="user_model_details"></div>
<script>
$(document).ready(function() {
fetch_user();
setInterval(function() {
fetch_user();
}, 5000);
function fetch_user() {
$.ajax({
url: "include/abcde.php",
method: "POST",
success: function(data) {
$('#Connect').html(data);
}
})
}
function make_chat_dialog_box(to_user_id, to_username) {
var modal_content = '<div id="user_dialog_' + to_user_id + '" class="user_dialog" title="Chat window with ' + to_username + '">';
//alert (modal_content);
modal_content += '<div style="height:30%; border:1px solid #ccc; overflow-y: scroll; margin-bottom:3%; padding:5%;" class="chat_history" data-toid="' + to_user_id + '" id="chat_history_' + to_user_id + '">';
modal_content += '</div>';
modal_content += '<div class="form-group">';
modal_content += '<textarea name="chat_message_' + to_user_id + '" id="chat_message_' + to_user_id + '" class="form-control"></textarea>';
modal_content += '</div><div class="form-group" align="right">';
modal_content += '<button type="button" name="send_chat" id="' + to_user_id + '" class="btn btn-info send_chat">Send</button></div></div>';
alert(modal_content);
var test = $('#user_model_details').html(modal_content);
alert(test);
}
$(document).on('click', '.start_chat', function() {
var to_user_id = $(this).data('toid');
var to_username = $(this).data('tousername');
//alert (to_user_id);
//alert (to_username);
make_chat_dialog_box(to_user_id, to_username);
$("#user_dialog_" + to_user_id).dialog({
autoOpen: false,
width: 400
});
$('#user_dialog_' + to_user_id).dialog('open');
});
});
</script>
</div>
Finally found the mistake in this one. Extreme silly mistake.I closed the </div> at the end of the page rather then closing it in the same line like this:
<div class="split Connect_Content" id="Connect_Cnt"></div>
</div> at end of page needs to be erased. It solved the problem. Sorry to disturb you guys.
I'm trying to execute foo function when a button is clicked, how can I prevent running scripts onload, sorry for this question, here's an interactive code, my goal is run the function after button click and then display some divs with data. Thanks!
<html>
<head>
<title>Bitcoin Price</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="name"></h1>
<p id="cointime"></p>
<div id="dollar"></div>
<div id="gbp"></div>
<div id="euro"></div>
<h6 id="disc" style="width:50%"></h6>
<br>
<button style="width: 200px" onclick="foo()">Load Data</button>
<script>
$.getJSON(
"https://api.coindesk.com/v1/bpi/currentprice.json",
function foo(data)
{
$("#name").append(data.chartName);
$("#cointime").append(data.time.updated);
$("#dollar").append(data.bpi.USD.rate + ' ' + data.bpi.USD.symbol);
$("#gbp").append(data.bpi.GBP.rate + ' ' + data.bpi.GBP.symbol);
$("#euro").append(data.bpi.EUR.rate + ' ' + data.bpi.EUR.symbol);
$("#disc").append(data.disclaimer);
}
)
</script>
</body>
</html>
Wrap the getJSON call into a function, e.g. refresh, and call the refresh function when clicking the button.
<html>
<head>
<title>Bitcoin Price</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="name"></h1>
<p id="cointime"></p>
<div id="dollar"></div>
<div id="gbp"></div>
<div id="euro"></div>
<h6 id="disc" style="width:50%"></h6>
<br>
<button style="width: 200px" onclick="refresh()">Load Data</button>
<script>
function refresh () {
$.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) {
$("#name").append(data.chartName);
$("#cointime").append(data.time.updated);
$("#dollar").append(data.bpi.USD.rate + ' ' + data.bpi.USD.symbol);
$("#gbp").append(data.bpi.GBP.rate + ' ' + data.bpi.GBP.symbol);
$("#euro").append(data.bpi.EUR.rate + ' ' + data.bpi.EUR.symbol);
$("#disc").append(data.disclaimer);
})
}
</script>
</body>
</html>
I'd suggest to not mix the HTML with JavaScript, but use addEventListener in the JavaScript side to add the events:
<html>
<head>
<title>Bitcoin Price</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="name"></h1>
<p id="cointime"></p>
<div id="dollar"></div>
<div id="gbp"></div>
<div id="euro"></div>
<h6 id="disc" style="width:50%"></h6>
<br>
<button style="width: 200px" id="refreshBtn">Load Data</button>
<script>
document.getElementById("refreshBtn").addEventListener("click", function () {
$.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) {
$("#name").append(data.chartName);
$("#cointime").append(data.time.updated);
$("#dollar").append(data.bpi.USD.rate + ' ' + data.bpi.USD.symbol);
$("#gbp").append(data.bpi.GBP.rate + ' ' + data.bpi.GBP.symbol);
$("#euro").append(data.bpi.EUR.rate + ' ' + data.bpi.EUR.symbol);
$("#disc").append(data.disclaimer);
})
});
</script>
</body>
</html>
the toggle function work in descrip and example as shown, but the problem is it does not work when I add a new definition via the input from the user. please help!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.descrip').click(function(){
$(this).next('.def').slideToggle("slow");
});
});
function addDef () {
//window.alert (1);
var def= document.getElementById("defInput").value;
//window.alert (def);
document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>";
document.getElementById("addf").innerHTML += "<div class= 'def'> "+def+" </div>";
$(document).ready(function(){});
}
</script>
</head>
<body>
<div class = "descrip"> descrip</div>
<div class = "def"> example </div>
enter def for apple: <input type= "text" id = "defInput"> </input> <br> <br>
<button onclick="addDef()">ADD</button>
<div id = "addf"> </div>
</body>
</html>
Use event delegation
$(this).on("click", ".descrip", function() {
$(this).next('.def').slideToggle("slow");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(this).on("click", ".descrip", function() {
$(this).next('.def').slideToggle("slow");
});
});
function addDef() {
//window.alert (1);
var def = document.getElementById("defInput").value;
//window.alert (def);
document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>";
document.getElementById("addf").innerHTML += "<div class= 'def'> " + def + " </div>";
}
</script>
</head>
<body>
<div class="descrip">descrip</div>
<div class="def">example</div>
enter def for apple:
<input type="text" id="defInput">
<br>
<br>
<button onclick="addDef()">ADD</button>
<div id="addf"></div>
</body>
</html>
I am newbie to javascript ,Help me to display image and description in list view on html page get from the json object ..
Here i am parsed a json object and retrieved image URL and image description. Now I have to display the Image and Description in listview on html page. But I am Not getting How..Plese help me to solve this..
Here is My HTML Page:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jsonData.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(searchAPI);
})
</script>
</head>
<body>
<input type="text" id="search1" value="search here" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy- images.jpg" style="width:200px;height:200px;">
<p id="p2"> </p>
</div>
</div>
</body>
</html>
My js file is:
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
}
});
}
Please help me How to display this Image and Description in list view like this
I think this works for you.
modify js like :
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:inline-block'/> <p style='display:inline-block'>"+desc+"</p></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}