In the last few days I am facing always some problem with phonegap and jquery. I need to build phonebook application with list and filter and link on user details. Therefore I have few questions.
At first I had problem with getting data from a web server (I used PHP script to return json data and made an ajax request) than I had to configure it to work with cross domain and that went fine ( I am storing data also in the local device database). Is this the right approach?
After that I wanted to make a new html page for the user details. Everything went fine until I added new javascript file in this new html page. Javascript didnt work, I dont know for what reason. I even made the basic hello page and included js file and just one line like alert(hello); in it and still nothing. Like all js files are only loaded in index.html and not in any other page. My code for this was (userdetail.js):
document.addEventListener("deviceready", onDeviceReady, false);
var db = null;
// Cordova is ready
//
function onDeviceReady() {
console.log("opening database");
db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
console.log("database");
//db.transaction(getUser, errorCB);
alert("hello");
}
and for html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,width=device-width" />
<title>Hello</title>
</head>
<body>
<div id="userPage" data-role="page">
<div data-role="content">hallo
<div id="userDetail"></div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userdetail.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and still didnt get it working. Than I decided, well I will make everything just in one page with javascript. Am I missing something here? I didnt even get the console.log info. I am redirecting the user with this part (links are made with javascript and appended to index.html page in this part):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Hello World</title>
</head>
<body>
<div id="userListPage1" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">
<h1> </h1>
<!--
<div id="custom-border-radius">
No text
</div>
-->
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div data-role="content" >
<ul id="userList1" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
</ul>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>Private</h1>
</div>
<!--
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-corners="false" data-theme="b" data-overlay-theme="a">
<ul data-role="listview">
<li data-icon="delete">Close menu</li>
<li>Accordion</li>
<li>Ajax Navigation</li>
<li>Autocomplete</li>
</ul>
</div>
-->
</div>
<div id="userListPage2" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">
<h1> </h1>
<div data-role="navbar" data-iconpos="bottom" >
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div data-role="content">
<ul id="userList2" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
</ul>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>Companies</h1>
</div>
</div>
<div id="userListPage3" data-role="page">
<div data-role="header" data-theme="b" data-position="fixed" style="overflow:hidden;">
<h1> </h1>
<div data-role="navbar" data-iconpos="bottom" >
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div data-role="content">
<ul id="userList3" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
</ul>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>Organisations</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userlist.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and here is the js that generates userList1 from above
function querySuccess(tx, results) {
var len = results.rows.length;
console.log("TELEFONBOOK table: " + len + " rows found.");
$('#userList1 li').remove();
$('#userList2 li').remove();
$('#userList3 li').remove();
for (var i=0; i<len; i++){
//append the users to userlist, show the data
if(results.rows.item(i).typ == "p"){
$('#userList1').append('<li> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></li>');
}else if(results.rows.item(i).typ == "f"){
$('#userList2').append('<li> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></li>');
}else if(results.rows.item(i).typ == "o"){
$('#userList3').append('<li> ' + results.rows.item(i).nachname + ' ' + results.rows.item(i).vorname + '<p>' + results.rows.item(i).strasse + ' ' + results.rows.item(i).strasse_nr + '</p></li>');
}
console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data);
}
$('#userList1:visible').listview('refresh');
$('#userList2:visible').listview('refresh');
$('#userList3:visible').listview('refresh');
}
Here is the user_details.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,width=device-width" />
<title>Hello</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userdetails.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</head>
<body>
<div id="userPage" data-role="page">
<div data-role="content">hallo
<div id="fullName"></div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>Privat</h1>
</div>
</div>
</body>
</html>
and here is the userdetails.js
var id = getUrlVars()["id"];
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
var db = null;
// Cordova is ready
//
function onDeviceReady() {
console.log("opening database");
db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
console.log("database");
db.transaction(getUser, errorCB);
alert("hello");
}
// Query the database
//
function getUser(tx) {
var sql = "SELECT * FROM TELEFONBOOK WHERE id=:id";
tx.executeSql(sql, [id], getUserSuccess);
}
// Query the success callback
//
function getUserSuccess(tx, results) {
var user = results.rows.item(0);
$('#fullName').text(user.nachname + ' ' + user.vorname);
alert("hallo");
}
// Transaction error callback
//
function errorCB(err) {
alert("Error processing SQL: "+err);
}
//function to get the id value
function getUrlVars() {
alert("test");
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
After that, my final question. I made in the index.html page listview like this:
<div data-role="content">
<ul id="userList3" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
</ul>
</div>
and now I am facing a problem every time I click on the filter field. I get a top border and bottom border white line. For example (notice the white line between two red lines when i click in the filter field):
I dont know is this really normal when using phonegap and jquery mobile to have so many problems. But any help or advice would really help. Thank you.
UPDATE
2.After really hard searching and testing, I found the solution here Pageshow not triggered after changepage
3.I have managed to find the problem. In the jquery mobile css change the
ui-footer-fixed.ui-fixed-hidden to
ui-footer-fixed.ui-fixed-hidden{bottom:-1px;padding-bottom:1px}
and same for the header:
ui-header-fixed.ui-fixed-hidden{top:-1px;padding-top:1px}
Thanks for the edits. For the 2nd point, here are some advices:
The code inside your userdetail.js will only be fired on real terminal, not when debugging on a browser on a desktop computer, due to the deviceready event which is not thrown by desktop browsers. If you want to simulate this part, you should replace
document.addEventListener("deviceready", onDeviceReady, false);
by
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
in your userdetail.js file. (and change the match test to add windws phone userAgent if needed ;-)
To clean the mess: put all your scripts at the end of the head in your index:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/userdetail.js"></script>
<script type="text/javascript" src="js/userlist.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</head>
<body>
...
</body>
</html>
With this order, you will get the console.log event. Don't forget that localStorage used in userdetails.js will not work on a desktop browser also.
Last (but not least), to populate your listviews, you will have to call your querySuccess method from somewhere, I did not see it right now.
UPDATE: as you also find, you can also add the scripts in your 2nd page inside the page div (see SO Pageshow not triggered after changepage)
Related
guys im trying to implement jquery mobile listview just as this example with thumbnails
http://demos.jquerymobile.com/1.4.3/listview/
however, if i copy past the source code into my html it works fine, however if im trying to add it to the list using javascript it doesnt work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>App Title</title>
<!-- Framework's CSS Files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Our CSS Files -->
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h2>PolyMovie</h2>
</div>
<div data-role="main" class="ui-content">
<form onsubmit="getMovies(event)">
<input type="search"id="searchText"/>
</form>
</div>
<ul data-role="listview" id="movies">
<!-- if i add it here it works fine, but using the javascript the image is not formatted -->
</ul>
<div data-role="footer">
<h2>Copyright 2018</h2>
</div>
</div>
<!-- APIs js scripts -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Our js Scripts -->
<script type="text/javascript" src="js/main.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
and this is my javascript function
function getMovies(event) {
var searchText = document.getElementById("searchText").value;
event.preventDefault();
axios.get("https://api.themoviedb.org/3/search/movie?query=" + searchText + "&api_key=" + api_key + "&language=en-US&page=1&include_adult=false")
.then((response) => {
console.log(response);
let movies = response.data.results;
let output = '';
$.each(movies, (index, movie) => {
output += `
<li><a href="#">
<img src="http://image.tmdb.org/t/p/w185/${movie.poster_path}">
<h2>${movie.title}</h2>
<p>${movie.release_date}</p></a>
</li>
`
});
document.getElementById("pageone").innerHTML = "<ul data-role='listview' id='movies'>"+output+"</ul>";
})
.catch((err) => {
console.log(err);
});
}
I really dont understand why this is happening, but i think it's because of the innerhtml
any help would be appreciated
Whenever a jquery element is added dynamically, the element needs to be refreshed for the styling to take effect. The format is:
$(selector).elementName("refresh");
so in your case it would be
$("#movies").listview("refresh");
my html page contain three links in a list. i want to display the details on another page ** reportlist.html ** by clicking those links.
nextpage.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<center>
<body id="category_id">
<div data-role="page" id="catlist">
<div id="loading" > </div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>category</h1>
</div>
<div data-role="main" class="ui-content">
<form id="nextForm" >
<ul data-role="listview" data-inset="true" id="category">
<li>
</li>
</ul>
</form>
</div>
</div>
</body>
</center>
</html>
nextpage.js
var base_url="http://dev.edfutura.com/nithin/jps/edfuturaMob/";
$(document).on("pageinit","#catlist", function() {
var submitUrl = base_url+"categorylist/get_categorylist";
//$("#loading").css("display", "block");
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response)
{
var categoryList = $('#category');
var category;
for(var i = 0, len = response.length; i < len; i++)
{
category = response[i];
var a = $('<a>').attr('href', 'reportlist.html').html(category.category_name);
categoryList.append($('<li>').attr('id', category.category_id).append(a));
}
},
error: function()
{
alert("error");
}
});
// do something next pls, iam not familiar with ajax and javascript
im trying to display the details on reportlist.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<body>
<div data-role="page" id="reportlist" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
Close
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="report">
<li></li>
</ul>
</div>
</div>
</body>
</html>
actually my reportlist.html contains report_name which is from my database by clicking those links
My code works fine when viewing the web page on a computer, but when I use the emulator or iPhone with xCode the entire page does not load. Perhaps the top 10 - 25% of the page appears and the rest is cut off. Below is an example of code. All help is appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
object {
width: 100%;
min-height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery-mobile-slide-menu.css" type="text/css" />
<script type="text/javascript" src="js/jquery-mobile-slide-menu.js"></script>
<script>
function MyFunction(id) {
var num=id;
if (num == "foxnews") {
$("#content").mobile.loadPage("http://m.foxnews.com");
}
if (num == "cnn") {
$('#content').load('http://m.cnn.com');
$('#content').trigger("pagecreate").trigger("refresh");
}
if (num == "home") {
location.reload();
}
//$("#content").html('<object data="http://www.foxnews.com" />');
//document.getElementById("content").innerHTML="<img src='Background.png'>";
}
</script>
</head>
<body>
<div id="side-menu">
<ul>
<li><a id="home" href="" onclick="MyFunction(this.id);">Home</a></li>
<li><a id="cnn" href="#" onclick="MyFunction(this.id);">   CNN</a></li>
<li><a id="foxnews" href="#" onclick="MyFunction(this.id);">   Fox News</a></li>
<li>Page 2<span class="icon"></span></li>
<li>Page 3<span class="icon"></span></li>
</ul>
</div>
<div data-role="page" id="about-the-band" data-title="Page Title" data-theme="b" class="pages">
<div data-role="header" data-theme="b">
Menu
<h1>Header</h1>
</div>
<div id="content" data-role="content">
<p>Content Goes Here</p>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#side-menu').slideMenu();
});
</script>
</body>
</html>
keyword: crossdomain
Excerpt from deprecated Jquery Mobile:
"When jQuery Mobile attempts to load an external page, the request runs through $.mobile.loadPage(). This will only allow cross-domain requests if the $.mobile.allowCrossDomainPages configuration option is set to true."
Load page to a div jQuery Mobile:
$("#landingPage").live('pageinit', function() {
jQuery.support.cors = true;
$.mobile.allowCrossDomainPages=true;
});
but maybe i am completely on the wrong scent; but you should open a jsfiddle, otherwise its just like searching a needle in a haystack.
I need some help with a web application I'm building.
I'm using jQuery tabs. I have two pages, index.aspx and login.aspx. You start on the index page and when you log in you come to the login page.
If I'm running Google Chrome the tabs are working on both pages. But if I'm running IE the first page (index.aspx) works perfectly, but when I come to login.aspx the program breaks and jumps to the JavaScript file and there stops.
In the JavaScript file I have the following code:
$(document).ready(function () {
$(function () {
$("#tabs").tabs();
});
});
$(document).ready(function () {
var index = 'key';
var dataStore = window.sessionStorage;
try {
var oldIndex = dataStore.getItem(index);
}
catch (e) {
var oldIndex = 0;
}
$('#tabs').tabs({
active: oldIndex,
activate: function (event, ui) {
var newIndex = ui.newTab.parent().children().index(ui.newTab);
dataStore.setItem(index, newIndex)
}
});
});
It first stops at the bottom function and if I press continue it stops at the top function.
The error message I get is 'Object doesn't support this property or method'
login.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="Projekt.login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="myform" runat="server">
<div id="content-wrapper">
<div id="content">
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</div>
</div>
<div id="header-wrapper">
<div id="header" style="height: 81px; top: 0px; left: -1px;">
</div>
</div>
<div id="footer-wrapper">
<div id="footer">
</div>
</div>
</form>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<link rel="stylesheet" href="myCSS.css" type="text/css"/>
<script src="JSprojekt.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-2.0.3.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js" type="text/javascript"></script>
</body>
</html>
Please keep it simple, I'm new to this. Thank you very much!
The problem is here:
<script src="http://code.jquery.com/jquery-2.0.3.js" type="text/javascript"></script>
jquery 2.x doesn't support IE<10
you likely don't need both jquery includes anyway, just remove it.
I'm kinda new to jQuery/HTML5 stuff, so I'm running into some problems. Hope you can help.
I'm loading a local json file and want to add the items of it to a list. This works just fine. But, the list is not using the jQuery styling?
I tried it without loading the json file and instead I put the data directly in the code and it worked. What might be my problem?
Here is the code which does not style correct:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Zurück
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
Info
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function()
{
$(document).ready(function(){
$.getJSON("institute.js",function(data) {
$.each(data.institute,function(i,el){
$("<li><a href='#'>"+el.id+". "+el.name+"</a> </li>").appendTo("#taskList");
});
});
});
})
</script>
</body>
</html>
And here is the code which gives me the correct styling
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Zurück
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
Info
</div>
</div>
<script type="text/javascript" charset="utf-8">
var institute_json =
[
{"id":"1","name":"Adaptronik und Funktionsintegration"},
{"id":"2","name":"Analysis und Algebra"},
{"id":"3","name":"Angewandte Mechanik"},
{"id":"4","name":"Angewandte Physik"},
{"id":"5","name":"Anorganische und Analytische Chemie"},
{"id":"6","name":"Architekturbezogene Kunst (IAK)"},
{"id":"7","name":"Automobilwirtschaft u Industrielle Produktion"},
];
$.each(institute_json,function(i,el)
{
$("<li><a href='#'>"+el.id+". "+el.name+"</a></li>").appendTo("#taskList");
});
</script>
</body>
</html>
When you add elements dynamically to the listview, after rendering you need to refresh it.
$("ul").listview("refresh");
Can you give us the content of institute.js
Try this :
$.getJSON("institute.js",function(data) {
$.each(data,function(i,el)