I Am trying to fill jquery mobile listivew using knockoutjs library, but my problem is the header of the list view(list-divider) is is repeated. I was wondering how to solve this issue,
this is my code and thanks for help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-bind="foreach:seats" data-theme="b" data-filter="true"
>
<li data-role="list-divider">List </li>
<li>
</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
function Reservation(reservationId, covers) {
var self = this;
self.reservationId = reservationId;
self.covers = covers;
}
function ReservationsViewModel()
{
var self = this;
self.seats = ko.observableArray();
self.fillReservations=function()
{
var mydata={
"result":[
{
"reservationId": "23424574367436523452345",
"covers" : "4"
},
{
"reservationId": "23424574367436523452345",
"covers" : "4"
}
]
};
$.each(mydata.result, function (index, value) {
self.seats.push(new Reservation(this.reservationId,this.covers));
});
}//End fillReservations
self.fillReservations();
}// End ReservationsViewModel
ko.applyBindings(new ReservationsViewModel());
</script>
</body>
</html>
Thanks for help.
I solved my problem by using containerless control flow syntax.
Try Like this :
<ul data-role="listview" id="ListSearch" data-divider-theme="b" data-inset="true" >
<li data-role="list-divider" role="heading">
Criteria Selected
</li>
<!-- ko foreach: Contacts -->
<li data-theme="c">
<a href="#page3" data-transition="slide">
<span data-bind="text: FirstName " ></span>
</a>
</li>
<!-- /ko -->
</ul>
Related
I'm working on a web application which uses classical ASP .NET MVC, but with bootstrap. The default page template I use looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#ViewData["Title"] - Gymfed JuryTool</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<!-- Our Custom CSS -->
<link rel="stylesheet" href="~/css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/612fd28750.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>The Site</h3>
<strong>JT</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a asp-area="" asp-controller="Home" asp-action="Index">
<i class="fas fa-home"></i>
Start
</a>
</li>
#{
if (User.Identity.IsAuthenticated)
{
if (userMenus != null)
{
foreach (var userMenu in userMenus)
{
// Debug
Debug.WriteLine($"userMenu = {JsonConvert.SerializeObject(userMenu)}");
var controlName = userMenu.MenuName + "SubMenu";
<li>
<a href="##controlName" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
#userMenu.Caption
</a>
<ul class="collapse list-unstyled" id="#controlName">
#foreach (var menuItem in userMenu.MenuElements)
{
// Debug
Debug.WriteLine($"menuItem = {JsonConvert.SerializeObject(menuItem)}");
<li>
<a asp-area=#menuItem.AspArea asp-controller=#menuItem.AspController asp-action=#menuItem.AspAction>#menuItem.ElementName</a>
</li>
}
</ul>
</li>
}
}
}
}
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<partial name="_LoginPartial" />
</li>
</ul>
</div>
</div>
</nav>
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - <i>Gymfed</i>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
The CSS files I include primarily are used for the collapsable menus and the likes.
Now the site looks fine, but to show everything on my screen I need to change the zoom to 80%.
I know Boostrap should be doing that for me, but though I follow their examples and everything looks fine when I zoom out to 80%...
I was wondering how I can have this happen automatically? Been looking around, but can't seem to find an actual answer to my question.
I create a App which Phonegap on IOS, where I need to play sounds for specified actions.
To play the sound from a url works fine, but not from a local source. I tried different things.
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sisMedia.css"/>
<link rel="stylesheet" href="css/sisMedia_custom.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jqm_custom.js"></script>
<script src="js/jquery-validation/jquery.validate.min.js"></script>
<title>Einlasskontrolle</title>
</head>
<body>
<div data-role="header" id="header" data-position="fixed" data-theme="a">
<h1>Audiotest</h1>
</div><!-- /header -->
<div data-role="page" data-title="Einlasskontrolle">
<div role="main" class="ui-content">
<button onclick="playAudio('audio/ok.mp3')">Play</button>
<button onclick="playAudio('audio/ok.mp3',true)">Play</button>
<button onclick="playAudio('https://test.sistecs.de/sismedia/files/admin/downloads/ok.mp3')">Play</button>
<script>
function playAudio(src, absolute) {
if (absolute == true) {
src = getPhoneGapPath() + src;
}
if (device.platform == 'Android') {
src = 'file://' + src;
}
var media = new Media(src, success, error_error);
media.play();
}
function success() {
// ignore
}
function error_error(e) {
alert('error ' + e.message);
}
function getPhoneGapPath() {
var path = window.location.pathname;
var sizefilename = path.length - (path.lastIndexOf("/") + 1);
path = path.substr(path, path.length - sizefilename);
return path;
}
</script>
</div>
</div>
<div data-role="footer" id="footer" data-theme="b" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Scan</li>
<li>Setup</li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Can you help me?
I replace a listview item in a jQuery mobile page based on some condition (date of the month, whatever) and I appear to be able to apply the styling only partially. The example below formats the new listview item partially correct, the link is missing its styling. What I am missing here?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../js/jquery.mobile-1.4.0-beta.1.min.css"/>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.0-beta.1.min.js"></script>
<script type="text/javascript">
$(document).delegate("#index", "pageinit", function() {
var newItem;
if (false) {
newItem = $("#templ1")[0].innerHTML
} else {
newItem = $("#templ2")[0].innerHTML
}
$("#item1")[0].innerHTML = newItem;
$("#item1").parent().listview("refresh");
});
</script>
<meta charset="utf-8">
</head>
<body>
<div data-role="page" id="index">
<script id="templ1" type="text/template">
<li id="item1">item1 templ1</li>
</script>
<script id="templ2" type="text/template">
<li id="item1">item1 templ2</li>
</script>
<div data-role="header" data-position="fixed">
<h1>test</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">divider 1</li>
<li id="item1">item1</li>
</ul>
</div>
</div>
</body>
</html>
I have a simple index.html with two pages...
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div></div>
</div>
<div data-role="page" id="page2">
<div></div>
</div>
</body>
</html>
Page1 has a button.. And when user click on it, I call js function.
function openPage2() {
}
This function should load page2. How to do that ?
I tried
$.mobile.changePage("page2.html");
but its not working...What I do wrong ?
Working example: http://jsfiddle.net/Gajotres/gQbLw/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
Next
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#page1', function(){
$(document).on('click', '#next-page', function(){
$.mobile.changePage("#page2");
});
});
I have an index page that dynamically loads a json object. if I go to a second page and then I try to go back to the index using back button I'd like to reload index page, so it reloads the json object that could be changed. This is my index.html page code:
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
</head>
<body>
<div data-role="page" id="pagina">
<div data-role="header" data-position="fixed" data-theme="d">
<h1 style="font-size:14px">test</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<ul data-role="listview" id="ul_id" data-theme="b" data-inset="true">
</ul>
</div><!-- /content -->
</div>
</body>
</html>
<script>
$.getJSON('http://www.test.com/test.php', function(data) {
var items = [];
$.each(data, function(key, val) {
$('#ul_id').append($('<li><h3>' + key + '</h3></li>'));
});
$('#ul_id').listview('refresh');
});
</script>
How can I do it?
You can utilize pagebeforeshow or pageshow event like so:
$(document).on("pagebeforeshow", "#pagina", function() {
//put your code here to manipulate the content
});