I'm a newbie programmer and i've been reading the Instagram search tutorial over at EduVoyage (http://eduvoyage.com/instagram-search-app.html). Impressed by this, i've decided to try my hand at it to learn jquery and such. Problem is, I cant get his example to work. I've dumbed my app down and can get it to display the default "cat" search, but when i search on the web form, i get nothing. No errors, no results, nothing. I'm banging my head here trying to find out what I'm doing incorrectly. i know its probably something simple im missing, but any help is greatly appreciated.
Here is js code:
var Instagram = {};
(function () {
function toScreen(photos) {
$.each(photos.data, function (index, photo) {
photo = "<div class='photo'>" +
"<a href='" + photo.link + "' target='_blank'>" +
"<img class='main' src='" + photo.images.low_resolution.url + "' width='250' height='250' />" +
"</a>" +
"<img class='avatar' width='40' height='40' src='" + photo.user.profile_picture + "' />" +
"<span class='heart'><strong>" + photo.likes.count + "</strong></span>" +
"</div>";
$('div#photos-wrap').prepend(photo);
});
}
function search(tag) {
var url = "https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&client_id=XXXXXXXXXXXXXXXXXX"
$.getJSON(url, toScreen);
}
$(function () {
$('form#search button').click(function () {
var tag = $('input.search-tag').val();
Instagram.search(tag);
});
Instagram.search('cats');
});
Instagram.search = search;
})();
and the HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' charset='utf-8'></script><script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script>
<link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='photos-wrap'>
<form id='search'>
<button type='submit' id='search-button' tabindex='2'>
<span class='button-content'>Search</span>
</button>
<div class='search-wrap'>
<input class='search-tag' type='text' tabindex='1' />
</div>
</form>
</div>
</body>
</html>
Related
I am working on a homework to do list application based in HTML and Javascript. I am currently trying to implement an edit function but cannot figure out how to call a div tag within a child element. The edit function needs to be able to copy the contents displayed in the tag into the text area.
Here is my code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="utf-8">
<title>Homework</title>
</head>
<body>
<h1>Homework Tracker</h1>
<br>
<div class="AddNewSub"> <i class="material-icons" style="font-size:30px; vertical-align: middle;">receipt</i>
<textarea id="addhw" placeholder="Input Homework"></textarea>
<button type="button" id="addbutton" onclick="add()"> Add </button>
</div>
<br>
<div id="MainContents"> </div>
<script>
document.getElementById("MainContents").innerHTML = JSON.parse(localStorage.getItem('UserInputCon'));
function add() {
var contents = document.getElementById('addhw').value;
contents = contents.replace(/\r?\n/g, '<br />');
var newline = document.createElement('div');
newline.setAttribute("class", "close");
newline.setAttribute("id", "UserConDiv")
newline.innerHTML = "<div id='contentdiv'>" + contents + "</div>" + " " + "<button type='button' id='delbutton' onclick='deletehw(this)'>Delete</button>" + "<button type='button' id='delbutton' onclick='edithw(this)'>Edit</button>" + "<br>";
document.getElementById("MainContents").appendChild(newline);
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
function deletehw(element) {
let container = element.parentElement;
container.parentNode.removeChild(container);
localStorage.removeItem('UserInputCon');
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
function edithw(element) {
var conDiv = document.getElementById('contentdiv').innerHTML;
var i;
for (i = 0; i < conDiv.length; i++) {
document.getElementById('addhw').value = conDiv[i].innerHTML;
var container = element.parentElement;
container.parentNode.removeChild(container);
localStorage.removeItem('UserInputCon');
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
}
</script>
</body>
</html>
This is what you edithw function could be:
function edithw(element)
{
let text = element.parentElement.getElementsByTagName('div')[0].innerHTML
document.getElementById('addhw').value = text;
}
What you are missing in your edithw function is needing to get the innerHtml from a div that was within the generated parent div.
You don't need to worry about looping over anything, since you already have the parent element of the data you want.
element.parentElement gets your the parent div, but you cannot call getElementById from a parentElement, instead use getElementsByTagName, then get the innerHtml of whatever child you want, in this case it was the first element.
You can console.log() it out as you go to see what you get from each call to make it easier to understand:
function edithw(element)
{
console.log('element',element);
console.log('element.parentElement',element.parentElement);
console.log('element.parentElement.getElementsByTagName',element.parentElement.getElementsByTagName('div'));
let text = element.parentElement.getElementsByTagName('div')[0].innerHTML
document.getElementById('addhw').value = text;
}
Here is the full code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="utf-8">
<title>Homework</title>
</head>
<body>
<h1>Homework Tracker</h1>
<br>
<div class="AddNewSub"> <i class="material-icons" style="font-size:30px; vertical-align: middle;">receipt</i>
<textarea id="addhw" placeholder="Input Homework"></textarea>
<button type="button" id="addbutton" onclick="add()"> Add </button>
</div>
<br>
<div id="MainContents"> </div>
<script>
document.getElementById("MainContents").innerHTML = JSON.parse(localStorage.getItem('UserInputCon'));
function add() {
var contents = document.getElementById('addhw').value;
contents = contents.replace(/\r?\n/g, '<br />');
var newline = document.createElement('div');
newline.setAttribute("class", "close");
newline.setAttribute("id", "UserConDiv")
newline.innerHTML =
"<div id='contentdiv'>" +
contents +
"</div>" +
" " +
"<button type='button' id='delbutton' onclick='deletehw(this)'>Delete</button>" +
"<button type='button' id='editbutton' onclick='edithw(this)'>Edit</button>" +
"<br>";
document.getElementById("MainContents").appendChild(newline);
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
function deletehw(element) {
let container = element.parentElement;
container.parentNode.removeChild(container);
localStorage.removeItem('UserInputCon');
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
function edithw(element)
{
console.log('element',element);
console.log('element.parentElement',element.parentElement);
console.log('element.parentElement.getElementsByTagName',element.parentElement.getElementsByTagName('div'));
let text = element.parentElement.getElementsByTagName('div')[0].innerHTML
document.getElementById('addhw').value = text;
}
</script>
</body>
</html>
I am new to JS and learning from a JAVASCRIPT and JQUERY book by JON DUCKETT.
I was struck at a problem regarding the document.title usage
I wrote a code on how to use document objects.
Every property and methods are working except for the title
I attached a code please have a look and help me how to get the title
property working.
The code is as following :
<!DOCTYPE html>
<html>
<head>
<title>Hammer</title>
</head>
<body>
<h1>THANOS</h1>
<div id="tony"></div>
</body>
<script>
var lord = "<p> The title of the page is :" + document.title + "</p>";
lord += "<p>address of the page is : " + document.URL + "</p>";
lord += " <p>Last modified is : " + document.lastModified + "</p>";
var man = document.getElementById("tony");
man.innerHTML = lord;
</script>
</html>
output:
THANOS
The title of the page is :
address of the page is : https://fiddle.jshell.net/_display/
Last modified is : 07/14/2018 10:28:57
title not displaying why?
And what is the meaning of the += in the code please help
Sorry I don't have the reputation of 10 to post an image I had to write this code.
Your code is actually working. See it live by hitting the Run the code button below:
var lord = "<p> The title of the page is :" + document.title + "</p>";
lord += "<p>address of the page is : " + document.URL + "</p>";
lord += " <p>Last modified is : " + document.lastModified + "</p>";
var man = document.getElementById("tony");
man.innerHTML = lord;
<!DOCTYPE html>
<html>
<head>
<title>Hammer</title>
</head>
<body>
<h1>THANOS</h1>
<div id="tony"></div>
</body>
</html>
And, when we write something like a += b in any programming language (not just JavaScript), it is simply a shorthand to write a = a + b. Nothing more, nothing Less. :)
your code is on, it is just jsfiddle is setting the title to nothing.
see jsbin
http://jsbin.com/yorivec/edit?html,output
<!DOCTYPE html>
<html>
<head>
<title>Hammer</title>
</head>
<body>
<h1>THANOS</h1>
<div id="tony"></div>
</body>
<script>
var lord = "<p> The title of the page is :" + document.title + "</p>";
lord += "<p>address of the page is : " + document.URL + "</p>";
lord += " <p>Last modified is : " + document.lastModified + "</p>";
var man = document.getElementById("tony");
man.innerHTML = lord;
</script>
</html>
plz check all code
given bello
<!DOCTYPE html>
<html>
<head>
<title>Hammer</title>
<script>
function myFunction() {
var d = new Date();
document.getElementById("time").innerHTML="last update:"+d;
document.getElementById("url").innerHTML="url:"+window.location.href+".....current page....."+window.location.pathname+".........websitename......"+window.location.hostname;
document.getElementById("title").innerHTML="Title:"+document.title;
}
</script>
<style>
body {
font-family: Calibri, sans-serif;
font-size:15px;
line-height:1.5;
padding:0;
margin:0;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1 id="title">This is a Headhing</h1>
<p id="url">This is a paragraph.</p>
<p id="time">This is a paragraph.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>
I have this code which adds a new line with a link I want be clickable. It creates two div tags and I would like to add html in the .we div. I have tried different combinations but nothing seems to work
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="test"></div>
<input type="button" id="add" value="Add New Line" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
var id = new Date().getTime();
var common_fields = "<div style='background-color:#f0f0f0' class='move_line'><div id='we'></div><input type='hidden' value=''>" +
"<a href='#' class='new_user'>Add User</a><br /><br />Common field 1: <input type='text' id='" + id + "'/> <hr></div>";
$("#test").append(common_fields);
});
$("body").on("click", ".new_user", function () {
$(this).closest("div.move_line").closest("div.we").append("<span>prosper</span>");
});
});
</script>
</body>
</html>
Thanks
You create divs with the ID of we (<div id='we'>), but then look for the div with the CLASS we ("div.we"). Note that IDs must be unique anyway, and that .closest() searches up the DOM whereas you want .find() which searches descendants.
This corrects those errors:
$("#add").click(function () {
var id = new Date().getTime();
var common_fields = "<div style='background-color:#f0f0f0' class='move_line'><div class='we'></div><input type='hidden' value=''>" +
"<a href='#' class='new_user'>Add User</a><br /><br />Common field 1: <input type='text' id='" + id + "'/> <hr></div>";
$("#test").append(common_fields);
});
$("body").on("click", ".new_user", function () {
$(this).closest("div.move_line").find("div.we").append("<span>prosper</span>");
});
jsFiddle example
I am new to javacript. I used an API for implementing custom search feature. But in my search page results show only after I enter the first search key. If I enter another search key, the results for the second key don't show up until I refresh the page.
How can I get the results to auto-update when entering more characters into the search box?
HTML code:
<!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>
function display() {
document.location = "contentpage.html";
}
$(document).ready(function () {
$("#submit").click(searchAPI);
});
</script>
</head>
<body>
<input type="text" id="search1" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" >
<p id="desc"> </p>
<p></p>
</div>
</body>
</html>
My JS Code:
function searchAPI(){
var key= $("#search1").val();
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=' + key + ' &format=json&pretty=1&callback=?', function(data) {
var htmlContent = '<ul>';
for (var i = 0; i < data.RelatedTopics.length; i++) {
var desc = data.RelatedTopics[i].Text;
var url = data.RelatedTopics[i].Icon.URL;
var link = data.RelatedTopics[i].FirstURL;
document.getElementById('link').href = link;
var y = document.getElementById("link");
y.innerHTML = link;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:block'/> " +
"<p id='desc'>" + desc + "</p>" + "<a target='_blank' id='link' href=" + link + " >go to website</a></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}
Can anyone help me to solve this issue...Thanks in advance.
I'm displaying the alphabets in a grid view,whenever i click on each alphabet it has to display the corresponding words of that alphabet,for that i could able to get the position of each alphabet,so how can i retrieve or pass the data from database?
here is the screenshot of that
the code for that grid view is
var a2zArray =['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
$(document).ready(function()
{
createA2ZGrid();
});
function createA2ZGrid(){
var rowElem='';
for (var i=0; i < a2zArray.length; i++){
rowElem = rowElem +" "+ "<label id='elementId' onclick=onClicked('"+a2zArray[i]+"')>" + a2zArray[i] + "</label>";
}
$("#A2Z-GridId").html(rowElem);
}
function onClicked(element){
alert("Onclicked : "+element);
};
how can i pass the argument from html to js?
In case you are using phonegap, you have to dive in to jquery mobile
In your index.html page in your header: (or see phonegap documentation)
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/webtoolkit.base64.js"></script>
<script type="text/javascript" src="js/MacAddress.js"></script>
<script type="text/javascript" src="js/your_own_javascript.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
then for your code: I tested this:
<label id='elementId' onclick="onClicked('Test')">test</label>
and in your javascript.js (or in the html code in script tags):
function onClicked(element){
navigator.notification.alert("Onclicked : "+element);
};
and this works
as far as I can see in your code, you are missing the quotes around the function
"<label id='elementId' onclick=onClicked('"+a2zArray[i]+"')>" + a2zArray[i] + "</label>"
will result in
<label id='elementId' onclick=onClicked('something')>something</label>
and it should be:
<label id='elementId' onclick="onClicked('something')">something</label>
so this should work:
"<label id='elementId' onclick='onClicked('"+a2zArray[i]+"')'>" + a2zArray[i] + "</label>"