Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I created a script to display the weather on my site, my problem when I execute it displays nothing.
this is my script :
<!DOCTYPE html>
<html>
<head>
<title>Weather API Test</title>
</head>
<body>
<script type="text/html" id="weather_tmpl">
<div class="weather_wrapper">
<div class="top_wrapper top_wrapper_e">
{{=day0}}
<div class="bt_control" id="meteo_controller">
<a href="javascript://">
<img src="arrow_open.png" id="meteo_trigger_img" width="27" height="17" alt="Arrow" />
</a>
</div>
</div>
<div class="bottom_wrapper" id="meteo_future_days">
<div class="next_days_wrapper">
<div class="day first">
{{=day1}}
<div class="clear"></div>
</div>
<div class="day">
{{=day2}}
<div class="clear"></div>
</div>
<div class="day last">
{{=day3}}
<div class="clear"></div>
</div>
</div>
<div class="bottom"></div>
</div>
</div>
</script>
<script type="text/html" id="detail_tmpl">
<div class="date">{{=date.weekday}},
<br />{{=date.day}} {{=monthname_short}}.</div>
<div class="temp">{{=high.celsius}}</div>
<div class="icon">
<img src="{{=icon_url}}" width="34" height="34" alt="icone" />
</div>
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="t.min.js"></script>
<script type='text/javascript'>
(function(){
var mainTpl = new t($('#weather_tmpl').html()),
detailTpl = new t($('#detail_tmpl').html());
$.getJSON('http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/q/CA/San_Francisco.json')
.done(function(data){
var tplData = {};
$.each(data.forecast.simpleforecast.forecastday, function(index, day){
tplData['day'+index] = detailTpl.render(day);
});
$('body').append(mainTpl.render(tplData));
});
})();
</script>
<script>
var meteostatus = 0; // closed
$('#meteo_controller').click(function() {
if (meteostatus == 0) {
meteostatus = 1;
$('#meteo_future_days').fadeIn('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
} else {
meteostatus = 0;
$('#meteo_future_days').fadeOut('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
}
});
</script>
</body>
</html>
PS:
The data for the current day, and the forecast for the next 3 are in the array data.forecast.simpleforecast.forecastday.
I've used a templating library called t.js which you can find here
have a nice day
Replace the two of your scripts (the one with the id of library and the one with t.min.js) with:
<script src="https://github.com/jasonmoo/t.js/blob/master/t.min.js" />
<script type="https://github.com/jasonmoo/t.js/blob/master/template" id="test">
(function(){
var mainTpl = new t($('#weather_tmpl').html()),
detailTpl = new t($('#detail_tmpl').html());
$.getJSON('http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/q/CA/San_Francisco.json')
.done(function(data){
var tplData = {};
$.each(data.forecast.simpleforecast.forecastday, function(index, day){
tplData['day'+index] = detailTpl.render(day);
});
$('body').append(mainTpl.render(tplData));
});
})();
var meteostatus = 0; // closed
$('#meteo_controller').click(function() {
if (meteostatus === 0) {
meteostatus = 1;
$('#meteo_future_days').fadeIn('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
} else {
meteostatus = 0;
$('#meteo_future_days').fadeOut('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
}
});
</script>
You tried to put a script src as a local path on your server, where the file is being hosted on github.
Also, there is a script error.
Related
I created a code to display data from XML. I need to filter some data from XML and show in the page. Actually I need to show only three nodes in the page. When click the view all button, need to display other nodes. Please help me to implement the code.
Here is the code.
function showCD(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div>`;
$("#xmldata").append(html);
});
}
<div class="row" id="xmldata"></div>
<section>
<div class="container">
<input type="button" value="View All" id="myButton" class="reveal" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hidden'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>
test.xml
<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD category="new">
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD category="hide">
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CATALOG>
It is just like below image.
http://next.plnkr.co/edit/KgmzSWEaIOBRf54M?open=lib%2Fscript.js&preview
I have updated your code as per your requirement Demo
instead of 2 separate xmldata & xmldataall divs you can use only one div & hide all the children > 2 index.
$(document).ready(function(){
$.ajax({
type:"GET",
url:"test.xml",
dataType:"xml",
success:showCD
});
});
function showCD(xml){
xml = $(xml).children();
let i = 0;
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div>`;
i++;
if(i <= 3) {
$("#xmldata").append(html);
$("#xmldataall").append(html);
}
else{
$("#xmldataall").append(html);
}
});
}
$('#myButton1').click(function () {
var self = this;
change(self);
});
function change(el) {
if (el.value === "View All")
el.value = "Hide All";
else
el.value = "View All";
}
function toggler(divId) {
$("#" + divId).toggleClass("hide");
$("#xmldata").toggle();
}
function directLinkModal(hash) {
$(hash).modal('show');
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row" id="xmldata"></div>
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldataall"></div>
</div>
</div>
</div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
I'm doing a memory and got a problem when turning cards. After turning two cards, when I turn a third one, I want the 2 previous cards to be turned again, but for some reason sometimes it works and sometimes only the first of the two cards turned turns. Any idea why this is happening?
JAVASCRIPT (where I think there's the problem):
var cartas = [];
var cartasGiradas = [];
var parejas= 0;
function cambiar_clase(){
cartasGiradas = document.getElementsByClassName("flip-container clicked");
if(cartasGiradas.length==2){
for (var i = 0; i <= cartasGiradas.length; i++) {
cartasGiradas[i].className="flip-container";
this.classList.add("clicked");}
}else if(cartasGiradas.length < 2){
this.classList.add("clicked");
}
}
function inicializar(){
cartas = document.getElementsByClassName("flip-container");
for(var i = 0; i < cartas.length; i++){
document.getElementById("a_girar"+i).addEventListener( 'click', cambiar_clase());
}
}
The HTML source:
<html>
<head>
<script type="text/javascript" src="javascript_memory.js"></script>
<link rel="stylesheet" type="text/css" href="css_memory.css">
<title>MEMORY GUERRA</title>
<meta charset="utf-8">
</head>
<body onload="inicializar()">
<table>
<tr>
<td class='color_fondo'>
<div class='flip-container' id='a_girar0'>
<div class='flipper'>
<div class='front'>
<img src='tras_carta.jpg' class='fotos'>
</div>
<div class='back'>
<img src='cartas/animal_15.jpg' class='fotos'>
</div>
</div>
</div>
</td>
<td class='color_fondo'>
<div class='flip-container' id='a_girar1'>
<div class='flipper'>
<div class='front'>
<img src='tras_carta.jpg' class='fotos'>
</div>
<div class='back'>
<img src='cartas/animal_14.jpg' class='fotos'>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Hope somebody can help and sorry if my english is bad, goodbye!
I am trying to create an onclick event which will show/hide elements of an array however I am struggling with the showSubTabGroup() function below.
Sidenote: Eventually I would like to make this onmouseenter and onmouseleave, rather than 'click' as you see below.
I would like to be able to click on a div and show subsequent div's below as you might expect from a navigation feature.
The console is not returning any errors, however the 'click' function seems alert("CLICKED") properly.
Any help would be greatly appreciated.
Problem:
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', function () {
alert("CLICKED");//Testing 'click' call
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
});
}
function Tab (subTabGroup) {
this.tab = document.getElementsByClassName("tab");
this.subTab = document.getElementsByClassName("sub-tab");
this.subTabGroup = subTabGroup;
}
Tab.prototype.hideSubTabs = function () {
for (var i = 0; i < this.subTab.length; i++) {
this.subTab[i].style.display = "none";
}
}
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', function () {
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
});
}
var tab = new Tab(3);
tab.hideSubTabs();
tab.showSubTabGroup(0,0);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Nav</title>
</head>
<body>
<!-- JQuery CDN -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
</div>
<script type="text/javascript" src="tab.js"></script>
<script type="text/javascript" src="tabEvents.js"></script>
</body>
</html>
The problem of what is this inside the click. It is not your tab code, it is the reference to the element that you clicked on. You need to change that by using bind
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', (function () {
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
}).bind(this));
}
As I read your post, I assume hideSubTabs() is working properly. In that case I will suggest to use in showSubTabGroup():
this.subTab[i].style.display = "initial";
instead of
this.subTab[i].style.display = "";
"initial" will set to its default e.g. as "block" for div and "inline" for span
I see that you also have included jQuery. If I may ask why don't jQuery functions which will do the same with less code:
$('.tab').on('click',function() {
$(this).closest('.container').find('.sub-tab').toggle()
})
$('.tab').click();
$('.tab')[0].click();
So i have an html document with a running some sample pic.
However I want this data to come from a javascript file? Is this possible?
This is what i have so far:
HTML
<link rel="stylesheet" type="text/css" href="FrontEnd.css"/>
<title> Test script for ticker </title>
</head>
<div class="container">
<body>
<div id="allTop">
<h1>
</h1>
<div class="clearfix">
<div class="forecast">
<div id="pic"></div>
<div id="forecast"></div>
<div id="temp"></div>
</div>
</div>
<div id="ticker">
<marquee>
<img
src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg"
Width=80 Height=80 alt="Milford Sound in New Zealand" />NewZealand
</marquee>
</div>
</div>
<div class="captured">
<div class="graph"></div>
</div>
</body>
</div>
</html>
js function
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i] + 'there should be an img coming in from an array here';
listitems.innerHTML = newListItem;
}
}
So I am confused on how can i append data into marquee tags from this function?
Simple append Data not over write
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i]; //'<img something /. etc etc
listitems[0].innerHTML += newListItem;
}
}
At first sorry if i have some typing errors english is not my main language but i try to do my best to explain it at my best.
I am working on a test app with a note database.
It works fine with adding and deleting but there is a small problem...
At the moment that i add a note (on edit.html) and want to go back to the index.html page it is not going back.
i am working with multiple data-page-role pages so each page has his own id.
The code that i use for the note database:
index.html Header:
$("#homePage").live('pageinit', function() {
init();
});
index.html data-page-role
<div data-role="page" id="homePage" data-add-back-btn="true" class="noteclass">
<!-- HEader -->
<div data-role="header" >
<h1>Notitie Database</h1>
</div>
<!-- Main content div -->
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList"></ul><br />
</div>
<div data-role="content">
Voeg notitie toe
</div>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
Edit.html (here u can add/change/remove the notes)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div data-role="page" id="editPage">
<!-- HEader -->
<div data-role="header">
<h1>Write Note</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#Delete').click(function() {
DeleteNote($('#noteId').val());
});
$('#addNote').click(function() {
var data = {title:$("#noteTitle").val(),
body:$("#noteBody").val(),
id:$("#noteId").val()
};
saveNote(data);
});
});
</script>
<div data-role="content">
<form id="editNoteForm" method="post">
<input type="hidden" name="noteId" id="noteId" value="">
<div data-role="fieldcontain">
<label for="noteTitle">Title</label>
<input type="text" name="noteTitle" id="noteTitle">
</div>
<div data-role="fieldcontain">
<label for="noteBody">Note</label>
<textarea name="noteBody" id="noteBody"></textarea>
</div>
<div data-role="fieldcontain">
<button id="addNote">Opslaan</button>
</div>
</form>
<button id="Delete">Verwijder</button>
</div>
Ga terug
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
</body>
</html>
And here is the backend code that i use for the note database
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phoneready();
}
function setupTable(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)");
}
function getEntries() {
dbShell.transaction(function(tx)
{
tx.executeSql("select id,title,body, updated from notes order by id asc", dbErrorHandler, renderEntries)
}, function(){ alert ("Error getentries");
});
}
function renderEntries(tx,results){
if (results.rows.length == 0) {
$("#mainContent").html("<p>Je hebt nog geen notities.</p>");
} else {
var s = "";
for(var i=0; i<results.rows.length; i++) {
s += "<li><a href='edit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).title + "</a></li>";
}
$("#noteTitleList").html(s);
$("#noteTitleList").listview("refresh");
}
}
function saveNote(note) {
//Sometimes you may want to jot down something quickly....
if(note.title == "") note.title = "[Geen Titel]";
dbShell.transaction(function(tx) {
if(note.id == "")
{
tx.executeSql("insert into notes(title,body,updated) values(?,?,?)",[note.title,note.body, new Date()]);
}
else
{
tx.executeSql("update notes set title=?, body=?, updated=? where id=?",[note.title,note.body, new Date(), note.id]);
}
}, function(){ alert ("Error savenote");},
function()
{
window.navigator.location("index.html#homePage");
});
}
function DeleteNote(id){
dbShell.transaction(
function(tx)
{
tx.executeSql('Delete FROM notes where id=' + id);
},
function(){ alert ("Error deletenote");},
function(err)
{
window.navigator.location("index.html#homePage");
});
}
function phoneready(){
dbShell = window.openDatabase("SimpleNotes", 2, "SimpleNotes", 1000000);
setupTable();
}
function init(){
getEntries();
//edit page logic needs to know to get old record (possible)
$("#editPage").live("pagebeforeshow", function() {
//get the location - it is a hash - got to be a better way
var loc = window.location.hash;
if(loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?")+1,loc.length);
var noteId = qs.split("=")[1];
//load the values
dbShell.transaction(
function(tx) {
tx.executeSql("select id,title,body from notes where id=?",[noteId],function(tx,results) {
$("#noteId").val(results.rows.item(0).id);
$("#noteTitle").val(results.rows.item(0).title);
$("#noteBody").val(results.rows.item(0).body);
});
}, dbErrorHandler);
}
});
}
As u can see at saveNote and on deleteNote i call the function window.navigator.location("index.html#homePage");
I did this as far as i tried with $.mobile.changePage("index.html#homePage"); it will go back but then it won't run the init(); function at the header script.
I hope i explained it all correct and if there are any questions please let me know.
I will try then to do my best at explaining it.
edit:
More information:
At first thank you for your answer, i got multiple data-role-pages.
A extra example:
<div data-role="page" id="page5" data-add-back-btn="true">
<!-- Header -->
<div data-role="header" >
<h1>Locatie</h1>
</div>
<!-- Main content div -->
<div data-role="content">
<p id="geolocation" onClick="onDeviceReady()">Op zoek naar uw locatie ...</p>
<img src="" id="map" width="100%" height="" />
<h4>Omgeving</h4>
<img src="" id="map2" width="100%" height="" />
</div>
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
You are trying to change page with deep link "index.html#homePage" .
JqueryMobile does not support that. When you pass a file, he will load ONLY the first page of that file.
This means that when you pass "index.html#homePage", he'll only consider the "index.html" and load the first page on that file.
I don't know it for sure, but if in your index.html file only have the "homePage", change function window.navigator.location to:
$.mobile.changePage("index.html")
And of course do the same for the anchor tag .
I use:
window.location = "#home";