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");
Related
I tried a template where I put the layout in a folder (/views/layout) and named it mainlayout.blade.php.
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="description" content="Ogani Template">
<meta name="keywords" content="Ogani, unica, creative, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Web | {{ $title }}</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#200;300;400;600;900&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="css/nice-select.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Then, I create the first page to simulate on how the pages interact. Let's call it PAGE 1 (/views/Frontend)
#extends('Layout.mainlayout')
<!DOCTYPE html>
<html lang="zxx">
<body>
<!-- Listing -->
#foreach ($blog as $post)
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="blog__item">
<div class="blog__item__pic">
<img src="img/blog/blog-2.jpg" alt="">
</div>
<div class="blog__item__text">
<ul>
<li><i class="fa fa-calendar-o"></i> May 4,2019</li>
<li><i class="fa fa-comment-o"></i> 5</li>
</ul>
<h5>{{ $post["title"] }}</h5>
<p>{{ $post["writings"] }} </p>
Selengkapnya <span class="arrow_right"></span>
</div>
</div>
</div>
#endforeach
As you can see, I tried to simulate where I picked data from a 'database', called the 'slugs' and 'writings' variable. To demonstrate this, I build PAGE 1 ROUTE
Route::get('/blog', function () {
$blog_posts = [
[
"title" => "Judul Post 1",
"slug" => "judul-post-1",
"author" => "Author 1",
"images" => "Gambar 1",
"writings" => "Tulisan 1",
],
];
return view('FrontEnd.blog', [
"title" => "Blog",
"blog" => $blog_posts
]);
});
From that one, I tried to redirect it to another page, let's call it PAGE 2 (/views/Frontend)
#extends('Layout.mainlayout')
<!DOCTYPE html>
<html lang="zxx">
<body>
<!-- Content -->
<!-- Content End -->
</body>
To connect those pages, I create PAGE 2 ROUTE, where I use the slugs to name the web page
Route::get('/blog/{slug}', function ($slug) {
return view('FrontEnd.blogdetails', [
"title" => "Blog Details"
]);
});
==================================================================================
My question is, Why is the layout is not applied on PAGE 2? When I tried to access the PAGE 2 independently (basically changes it as the 'home' page), the layout applies/work. Where did I go wrong?
Thanks in advance!
I don't get it, why you are using <!DOCTYPE html> on every inner page. Let me explain how its done correctly.
You need to define a layout under views/layouts let's call it.
<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name</title>
</head>
<body>
<div class="container">
<!-- this is where content will be shown -->
#yield('content')
</div>
</body>
</html>
Now, on the controller we are returning the view.
return view ('frontend.blog.index',compact('data'));
Nex, on this blade file we need to extend the layout.
<!-- resources/views/frontend/blog/index.blade.php -->
#extends('layouts.app')
#section('content')
<p>This is my body content.</p>
#endsection
In this way, you could solve the layout mystery.
For detail, visit https://laravel.com/docs/9.x/blade#defining-a-layout.
Some of the issues I notice on your code:
you are missing the yield field example #yield('content')
next on your view file you need to call #section('content') ... #endsection
#PS:(you can replace content text with body or anything you like.)
So I have this issue, I want to use vanilla JavaScript because I don't like how bloated JQuery is. Now, the problem I have is when I load my file into the div withe the following code:
async function loadPage (pagename) {
await fetch(pagename, {
headers: {
"Content-Type": "text/html; charset=utf-8"
}
})
.then((response) => response.text())
.then((html) => {
document.getElementById("Loader").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
my JavaScript in the page doesn't fire.
I have tried running JavaScript in the file and also with external files.
When I put the JavaScript file for this HTML in the main page it fires, but it is littered with errors. When I use the JQuery load function it works fine though, is there any way to get this right in vanilla JavaScript or am I gonna have to use JQuery??
HTML for details.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/autocomplete.css">
<link rel="stylesheet" href="css/details.css">
<link rel="stylesheet" href="css/tablestyles.css">
<title>Search</title>
</head>
<body>
<!-- Enter search criteria here -->
<div id="top">
<button onclick="search();">Search</button>
<div class="autocomplete" style="width:300px;">
<input type="text" name="searchPhrase" id="searchPhrase" placeholder="Search Phrase" autocomplete="off">
</div>
<!-- Options for autocomplete -->
<div id="displaydiv">
</div>
</div>
<div id="results">
</div>
</body>
<script src="js/autocomplete_input.js"></script>
<script src="js/tablecreator.js"></script>
<script src="js/details.js"></script>
</html>
loadPage is called by main.js
function openSearch(){
loadPage('details.html');
}
I tried replicating it in codesandbox!
I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>
My phonegap project is having multiple html's(more than 4) with some single-paged and multi-paged.
When I move around pages, sometimes javascript breaks. maybe I am linking pages wrong... i've been googling..and got so many different answers.
some say to include all the same heads' because .js won't load by ajax-type page loads
some talk about app.initialize(); some talk about 'pageinit'. some recommends to use onload(); in body tag. some say pageshow: function(){}.
some talk about .Deferred()/ $.when(deviceReadyDeferred,jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
so many ways to initialize!
WHAT IS THE BEST PRACTICE IN INCLUDING JS FILES?
Also, there are so many ways to link pages.
i guess if an anchor leads to multi-paged html, use data-rel='external' is good practice. but some say data-dom-cache="true". some say $.mobile.changePage();
WHAT IS THE BEST PRACTICE IN LINKING PAGES?
from single-paged .html --> multi-paged .html
from multi-paged .html --> single-paged .html
from single-paged .html --> single-paged .html
from multi-paged .html --> multi-paged .html
can you give me a good foundation tutorial? or links to one of them?
thank you in advance.
You can try my method.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<script src="cordova.js" type="text/javascript"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/ratchet.js"></script>
<script src="js/main.js"></script>
</head>
<body onload="init()">
</body>
</html>
main.js
var pagesHistory = [];
var currentPage = {};
var path = "";
function init(){
$("body").load(path + "pages/ListPage.html", function(){
$.getScript(path + "js/ListPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
ListPage.js
currentPage = {};
currentPage.init = function(){
console.log("ListPage :: init");
};
currentPage.loadPage = function(pageIndex){
console.log("ListPage :: loadPage :: pageIndex: " + pageIndex);
$("body").load(path + "pages/" + pageIndex + ".html");
$.getScript(path + "js/" + pageIndex +".js", function() {
if (currentPage.init) {
currentPage.init();
}
});
};
ListPage.html
<script>
$.getScript(path + "js/ListPage.js");
</script>
<header class="bar bar-nav">
<button id="LoadAddButton" class="btn pull-right" onclick="currentPage.loadPage('AddPage');">Load Add.html</button>
<h1 class="title">ListPage</h1>
</header>
<div class="content">
<div class="content-padded">
<button id="LoadDetailButton" class="btn btn-positive btn-block" onclick="currentPage.loadPage('DetailPage');">Load Detail.html</button>
</div>
</div>
Let me know if you need more clarification about this navigation.
Reference: http://blog.revivalx.com/2014/07/15/simple-hybrid-mobile-app-using-cordova-and-ratchet-2-complete/
Not important when you load your pages. Because all of your html files are included your app package.
I've used jQuery Mobile like the following;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.css">
<script src="js/dependencies/jquery.js"></script>
<script src="js/dependencies/jquery.mobile.js"></script>
<script src="js/dependencies/ejs.js"></script>
</head>
<body>
<div data-role="page" id="page-homepage" class="my-page" data-theme="b">
<div data-role="header" class="div-header">
// some header contents
</div>
<div role="main" class="ui-content">
// some contents
</div>
</div>
.
.
<div data-role="page" id="page-login" class="my-page" data-theme="b">
<div role="main" class="ui-content">
// login contents
</div>
</div>
.
.
<script>
/* jQuery Mobile pagecontainer change function's options */
var changePageOptions = {
transition: 'none',
changeHash: true,
reverse: true,
showLoadMsg: true
};
$("#btn-page-login").on("tap", function() {
$(':mobile-pagecontainer').pagecontainer('change', '#page-login', changePageOptions);
});
</script>
</body>
</html>
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)