I can't get <div class="inner"> to append correctly so it wraps:
It should be:
<div class="module">
<div class="<h2>...</h2>
<div class="inner">
...
...
...
</div><!-- end .inner-->
</div><!-- end .module-->
Instead, when I inspect in Chrome developer tools, it has the closing tag next to it:
<div class="inner"></div>
Here's the script:
<!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" />
<title>NDM Test</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script>
$(document).ready(function () {
$.get('feed.xml', function (feed) {
$('.module').append('<h2><span>Dynamic heading</span></h2>');
$('.module').append('<div class="inner">');
$(feed).find('section').each(function () {
var title = $(this).find('title').text();
var html = '<div><h3>' + title + '</h3>';
html += '<ol>'
$(this).find('article').each(function () {
var headline = $(this).find('headline').text();
var url = $(this).find('url').text();
html += '<li>' + headline + '</li>';
});
$('.module').append($(html));
$('.module').append('</ol></div>');
});
$('.module').append('</div>'); /* this should close .inner??*/
$('.module').append('<p>More </p>');
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="module">
</div>
</div>
</body>
</html>
Thanks in advance :)
try this code,
var html ='<div class="inner">';
$(feed).find('section').each(function () {
var title = $(this).find('title').text();
html += '<div><h3>' + title + '</h3>';
html += '<ol>';
$(this).find('article').each(function () {
var headline = $(this).find('headline').text();
var url = $(this).find('url').text();
html += '<li>' + headline + '</li>';
});
html += '</ol></div>';
});
html +='</div>';
$('.module').append($(html));
Related
I have created 2 jsp pages.In the 1st jsp screen there is a button called "display".when i click this button the page should redirect to the 2nd jsp screen.
I was able to redirect to the 2nd jsp page using window.location() in javascript but the ajax call fails and goes to the error function(). When i click the display button it does not show any dynamic data that is appended to the 2nd jsp.(shows only static content).`
//this is my javascript
var rowsperpage = 10;
var pageno = 1;
var totalpages = 0;
var tablecount=0;
function display()
{
var flag="two";
$.ajax({
type: "POST",
url: 'maunualmappingloadutility.jsp?value='+flag+'&Rowsperpage='+rowsperpage+'&Pageno='+pageno,
success: function(response)
{
var data = $.parseJSON(response);
var status = data.status;
if(status && status == "sucess")
{
var tbl="";
var textfilemapping=data.textfilemapping;
$.each(textfilemapping, function(key, value)
{
var id = value.id;
var data1 = value.col1;
var data2 = value.col2;
var data3 = value.col3;
var data4 = value.col4;
var data5 = value.col5;
var data6 = value.col6;
var data7 = value.col7;
var data8 = value.col8;
var data9 = value.col9;
tbl += '<tr id="'+id+'">';
tbl += '<td >' + id + '</td>';
tbl += '<td >' + data1 + '</td>';
tbl += '<td >' + data2 + '</td>';
tbl += '<td >' + data3 + '</td>';
tbl += '<td >' + data4 + '</td>';
tbl += '<td >' + data5 + '</td>';
tbl += '<td >' + data6 + '</td>';
tbl += '<td >' + data7 + '</td>';
tbl += '<td >' + data8 + '</td>';
tbl += '<td >' + data9 + '</td>';
tbl += '</tr>';
});
// window.location="display.jsp";
$("#textfiledata").html(tbl);
pageno = data.PAGENO;
totalpages = data.TOTALPAGES;
rowsperpage = data.ROWSPERPAGE;
enablePrevNext();
if(pageno == 1) {
$("#btnPrev").addClass("disabled");
} else if(pageno == totalpages) {
$("#btnNext").addClass("disabled");
}
$("#txtPage").val(pageno);
$('#lblTotalPages').html(totalpages);
}
else
{
alert("Error in displaying snomed info data");
return false;
}
},
error: function()
{
alert("Error in displaying snomed info data");
return false;
}
});
}
function Redirect() {
window.location="display.jsp";
display();
}
function om_nPageRefresh() {
location.reload();
}
//this is the 1st jsp with the display button in it
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/textfileloadutility.js"></script>
</head>
<body>
<div class="blue-nav">
<div class="blue-pad">
<div class="dropdown referal-drop pull-left">
SNOMED CT Manual Mapping Load Utility
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="fileter-wrap">
<form class="form-horizontal" role="form">
<div style=text-align:center;margin:auto;>
<input class="btn btn-blue btn-sm btn-xs " id="clickMe" type="button" value="Load" onclick="check();" />
</div>
<div id="Message"></div>
</form>
<div class="clearfix spacer10"></div>
<div class="clearfix spacer10"></div>
</div>
<div class="fileter-wrap">
<label>Task status:</label>
<div style=text-align:center;margin:auto;>
<input style=text-align:center; id="click" type="submit" value="Display" onclick="Redirect();" />
</div>
</div>
</body>
</html>
//this is the 2nd jsp where the data is to be displayed
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/textfileloadutility.js"></script>
</head>
<body>
<div class="blue-nav">
<div class="blue-pad">
<div class="dropdown referal-drop pull-left">
SNOMED CT Manual Mapping Load Utility
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="fileter-wrap">
<table class="table table-bordered grey-table nomargin" id="">
<thead>
<tr>
<th >ReferenceId</th>
<th >Id</th>
<th >Effective time</th>
<th >Active</th>
<th >Module id</th>
<th >Concept id</th>
<th >Language code</th>
<th >Type id</th>
<th >Term</th>
<th >CaseSignificanceid</th>
</tr>
</thead>
<tbody id="textfiledata">
</tbody>
</table>
<div class="clearfix spacer10"></div>
<div class="col-sm-15 cust-paged">
<div class="col-sm-5">
<button id="btnPrev" class="btn btn-lblue btn-xs" onclick="onClickPrev();">PREVIOUSPAGE</button>
<span>Page</span>
<input type="text" value="" class="search" id="txtPage" onkeydown="search(this)" >
<span>of <label id="lblTotalPages"></label></span>
<button id="btnNext" class="btn btn-lblue btn-xs" onclick="onClickNext();">NEXTPAGE</button>
</div>
</div>
<div class="clearfix spacer10"></div>
</div>
</body>
</html>
I have created 2 jsp pages.In the 1st jsp screen there is a button called "display".when i click this button the page should redirect to the 2nd jsp screen.
I was able to redirect to the 2nd jsp page using window.location() in javascript but the ajax call fails and goes to the error function(). When i click the display button it does not show any dynamic data that is appended to the 2nd jsp.(shows only static content).`
NOTE:if i create the display button in the 2nd jsp the data is getting displayed properly in the 2nd jsp itself.
I want to show the testTag variable to the div after i click the button. When i clicked it only shows the label of the option tag and not the full select tags.
Please help! This is my code.
function showDropdown() {
var textTag = "<select>";
var textOptions = ["option1","option2","option3"];
for (i = 0; i < textOptions.length; i++) {
textTag += '<options value="' + textOptions[i] + '">' + textOptions[i] + "</options>";
}
textTag += "</select>";
document.getElementById("dropdownTest").innerHTML= textTag;
console.log(textTag);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Show dropdown</title>
</head>
<body>
<input type="button" id="showDrop" value="Show dropdown" onClick="showDropdown()">
<div id="dropdownTest"></div>
</body>
</html>
It's called <option>, not <options>:
function showDropdown() {
var textTag = "<select>";
var textOptions = ["option1","option2","option3"];
// declare "i"!
for (var i = 0; i < textOptions.length; i++) {
// change this line
textTag += '<option value="' + textOptions[i] + '">' + textOptions[i] + "</option>";
}
textTag += "</select>";
document.getElementById("dropdownTest").innerHTML = textTag;
console.log(textTag);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Show dropdown</title>
</head>
<body>
<input type="button" id="showDrop" value="Show dropdown" onClick="showDropdown()">
<div id="dropdownTest"></div>
</body>
</html>
I get "Cannot read property '0' of undefined" error. I couldn't find the issue. I think javascript file has a problem but I couldn't see. I wrote the script twice but still js file has a problem.
HTML File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>FreeCodeCamp - Local Weather</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="main" class="text-center container">
<h1>FreeCodeCamp - Weather App</h1>
<div class="row" id="fade">
<div style="margin-top: 200px;">
<span id="city"></span>
<span id="country"></span>
<div id="weather"><img id="w-icon"><span id="temp"></span></div>
<span id="description"></span>
</div>
</div>
<div id="author">
<span> Created by Kaan Karaca</span><br>
<span>#GitHub </span><br>
<span>#FreeCodeCamp </span>
</div>
</div>
</body>
</html>
JavaScript File
$(document).ready(function () {
var cityId;
var city;
var unitsFormat = "metric";
var getWeatherInfo = function () {
$.getJSON("http://api.sypexgeo.net/json")
.done(function (locationData) {
cityId = locationData.city.id;
cityName = locationData.country.iso;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?", {
id: cityId,
units: unitsFormat,
APPID: '610ae7b6406da76bb34ad4bb95cc3673'
})
.done(function (weatherDate) {
$("#w-icon").attr("src", "http://openweathermap.org/img/w/" + weatherDate.weather[0].icon + ".png");
$("#temp").text(Math.round(weatherDate.main.temp) + "°C");
$("#city").text(weatherDate.name + ",");
$("#country").text(cityName);
$("#description").text(weatherDate.weather[0].description);
});
});
}
getWeatherInfo();
});
Your code is too trusting that all these calls will work.
In my case, the json from http://api.sypexgeo.net/json correctly locates me, but http://api.openweathermap.org/data/2.5/weather?" has no clue about that city id. Therefore it passes back a json such as:
{
"cod": "404",
"message": "Error: Not found city"
}
This obviously lacks the array weather, so js throws an undefined.
The solution would be to get the specs from the weather api (and location, while you're at it) and check that the response code is good. (I guessed "200" is good. I never got the success case).
$(document).ready(function() {
var cityId;
var city;
var unitsFormat = "metric";
var getWeatherInfo = function() {
$.getJSON("http://api.sypexgeo.net/json")
.done(function(locationData) {
cityId = locationData.city.id;
cityName = locationData.country.iso;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?", {
id: cityId,
units: unitsFormat,
APPID: '610ae7b6406da76bb34ad4bb95cc3673'
})
.done(function(weatherDate) {
if (weatherDate.cod != "200") {
console.log(weatherDate);
console.log("Couldn't find the weather!!!");
return;
}
$("#w-icon").attr("src", "http://openweathermap.org/img/w/" + weatherDate.weather[0].icon + ".png");
$("#temp").text(Math.round(weatherDate.main.temp) + "°C");
$("#city").text(weatherDate.name + ",");
$("#country").text(cityName);
$("#description").text(weatherDate.weather[0].description);
});
});
}
getWeatherInfo();
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>FreeCodeCamp - Local Weather</title>
<script src="//code.jquery.com/jquery-3.0.0.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main" class="text-center container">
<h1>FreeCodeCamp - Weather App</h1>
<div class="row" id="fade">
<div style="margin-top: 200px;">
<span id="city"></span>
<span id="country"></span>
<div id="weather">
<img id="w-icon"><span id="temp"></span>
</div>
<span id="description"></span>
</div>
</div>
<div id="author">
<span> Created by Kaan Karaca</span>
<br>
<span>#GitHub </span>
<br>
<span>#FreeCodeCamp </span>
</div>
</div>
</body>
</html>
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 wanted to dynamically append a Table/List to HTML page. My code as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lead Manager</title>
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="themes/jquery.mobile.structure-1.2.0.min.css" />
<script src="themes/jquery-1.8.2.min.js"></script>
<script src="themes/jquery.mobile-1.2.0.min.js"></script>
</head>
<body id="body" name="body">
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Lead Manager</h1>
</div>
<div data-role="content" data-theme="a">
<h2>List of Leads</h2>
</div>
</div>
</body>
<script>
$(document).ready(function(e) {
//var data = Android.getLeads();
var data = [{"status":"1","name":"1","campaign":"1","date":"1"},{"status":"2","name":"2","campaign":"2","date":"2"}];
var items = [];
var date;
var name;
var status;
//eval(" var x = " + data + " ; ");
//var y = JSON.stringify(x);
$.each(data, function(key,val){
items.push('<tr><td>' + val.date + '</tr></td>');
});
var text = $('<table/>', { html: items.join('')});
$('<table/>', {
html: items.join('')
}).appendTo('body');
});
</script>
</html>
The Items[] variable is getting filled with the tr and td values. However, the appendTo, doesnt work. The JSON as you can see doesnt require eval as its already in the format required.
Please can you help?
The issue was mainly because of the jquery.mobile script as it wasnt allowing dynamic addition of html code.