The following virtual element is being used to dynamically create jQuery Mobile pages:
<!-- ko template: { name: 'page-default', foreach: metaData.tabs, afterRender: afterTabsRender } -->
<!-- /ko -->
Works in all Desktop browsers, but not in IOS or Windows Phone. I inspected the DOM in Safari on a Mac and instead of the original virtual element I only see this:
<!--//-->
However, this test page works in Safari and it uses the same virtual element: http://jsfiddle.net/timvdh/eFDLr/7/
Does anybody know what is happening with the comments in Safari?
Related
I am building cross platform application based on PhoneGap.
I am testing this app on iPad, I am using AngularJS.
I have created a list of media files using ng-repeat as below:
<div ng-repeat="media in mediaArray" style="width:200px; height:200px;">
<img ng-src="{{media.imgSrc}}"
ng-hide="media.isVideo"
style="width:200px; height:200px;"
>
<video id="video{{media.id}"
ng-show="media.isVideo"
postersrc="test.png"
poster-src <!-- Directive for poster source fix -->
controls
style="width:200px; height:200px;"
>
<source type="video/mp4"
videosrc="{{media.videoUrl}}"
video-src <!-- Directive for video source fix -->
>
Your browser does not support HTML5 video.
</video>
</div>
In my list I have images and video files.
I am able to see the list and also able to play the video files.
But problem is that, When I play any of the video then I am not able to scroll the list, scrolling works till I don't play any video once video is played scrolling does not work at all. what can be the issue?
Try this
<div ng-repeat="media in mediaArray" ng-controller="ScrollController" style="width:200px; height:200px;">
<img ng-src="{{media.imgSrc}}"
ng-hide="media.isVideo"
style="width:200px; height:200px;"
>
<video id="video{{media.id}"
ng-show="media.isVideo"
postersrc="test.png"
poster-src <!-- Directive for poster source fix -->
controls
style="width:200px; height:200px;"
>
<source type="video/mp4"
videosrc="{{media.videoUrl}}"
video-src <!-- Directive for video source fix -->
>
Your browser does not support HTML5 video.
</video>
</div>
Script for controller
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
I am using Intel XDK with jquery mobile and I am trying to override the hardware back button because it is not working. I am not sure how much of my code I can post. I do have a complicated app though. I have three html files. With an index.html with links (hrefs) to page one and page two. In index.html I have this code
script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/jquery.min.js"></script> <!-- jQuery v2.1.1 -->
<script src="jqm/jquery.mobile-min.js"></script> <!-- jQuery Mobile 1.4.2 -->
<script type="text/javascript">
/* Intel native bridge is available */
var onBackKeyDown = function() {
$.mobile.goBack();
}
var onDeviceReady = function() {
intel.xdk.device.hideSplashScreen();
intel.xdk.display.useViewport;
intel.xdk.device.addVirtualPage();
document.addEventListener("intel.xdk.device.hardware.back", onBackKeyDown, false);
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
On page one and page two currently I have about ten subpages each (more to come) and I definitely want to back able to go back to the previous subpage. I have done kind of a lot of work with jquery mobile so far and I hope I don't have to switch to App Framework just to get the back button to work. Thanks for any help, let me know if you need any more html code or JS.
In the current version of jQuery Mobile it seems to be necessary to keep all data-role="page" elements on one level (at least when one wants to establish links between them). Since I am using knockout to dynamically produce pages, I have the requirement to bind virtual elements directly, e.g. in
<div data-role="page" id="page1"><h1 data-bind="text: name"></h1></div>
<!-- ko text: name --><!-- /ko -->
I want to bind one model A to page1 and one model B to the virtual element (which is a template: foreach binding in the real application). More detailed fiddle: http://jsfiddle.net/timvdh/t3Cyd/3/
Is this doable somehow?
With the limited information I would say you have 3 options:
(1) Wrap your virtual element in another virtual element or div and use the with binding.
<!-- ko with: modelForPage2 -->
<!-- ko text: name --><!-- /ko -->
<!-- /ko -->
(2) Use the template binding in the virtual element and use the data property to supply a new context.
<!-- ko template: { name: 'page2_template', data: modelForPage2 } --><!-- /ko -->
(3) Create your own custom binding that supports virtual elements and apply bindings to descendants. This is just an example to lead you in the right direction:
ko.bindingHandlers.bindModel = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
var newContext = new ModelA();
ko.applyBindingsToDescendants(newContext, element);
return { controlsDescendantBindings: true };
}
};
ko.virtualElements.allowedBindings.bindModel = true;
I'm trying to build a dynamic display in a web page. The site is built in ASP.NET MVC 3, but I'm not sure if this matters...
Essentially, I have a base "_Editor.cshtml" page which uses partials to render the specific editor content in my display using query parameters. Consider an editor for a chart (line chart vs. bar chart).
_Editor.cshtml
<div id='tabs'>
<ul>
<li><a href='#queryTab'>Define Query</a></li>
<!-- THIS IS WHERE I NEED TO SHOW ALL OF MY 'CUSTOM' TAB NAMES -->
<!-- ko template: 'tabNames' -->
<!-- /ko -->
<li><a href='#themeTab'>Styles and Themes</a></li>
</ul>
<div id='queryTab'>
<!-- configure db connection, tables, fields, etc... (not important) -->
</div>
<!-- THIS IS WHERE I WANT TO SHOW CONTENT FOR MY CUSTOM TABS -->
<!-- ko template: 'tabContent' -->
<!-- /ko -->
<div id='themeTab'>
<!-- show various style options here (not important) -->
</div>
</div>
<script type="text/javascript">
$(function(){
var vm = { /* define my model here */ };
ko.applyBindings(vm);
$("#tabs").tabs();
});
</script>
#if (Model.EditorType == ChartTypes.Bar) {
#Html.Partial("_BarChartEditor")
} else if (Model.EditorType == ChartTypes.Line) {
#Html.Partial("_LineChartEditor")
}
_BarChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Bar Chart Tab!</li>
<!-- I could have many more tab names here -->
</script>
<script id="tabContent" type="text/html">
<div id="barChartTab">
<h1>Add controls for bar chart configuration</h1>
</div>
<!-- I would create a div for each tab name above here -->
</script>
_LineChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Line Chart Tab!</li>
</script>
<script id="tabContent" type="text/html">
<div id="lineChartTab">
<h1>Add controls for line chart configurations</h1>
</div>
</script>
Sorry for the lengthy code drop (it took a long time to write it all here, so have mercy on me). :) I wanted to make sure that my problem was understood because of the way I'm building my editors using custom partials. Perhaps it's cludgy, but it works for the most part...
Really, everything works great except for the tab content. The tab rendering appears to be happening before I'm able to bind my view model to the UI. When the 'ko.applyBindings()' method is called, the tab shows up on different tabs.
Has anybody tried to do this? Has anybody had success? I've created a jsfiddle to show a simple scenario to show exactly what I'm talking about:
http://jsfiddle.net/TrailHacker/j2nhm/
Thanks for any help!
I actually got it working with your example, your content template was just structured incorrectly. It was missing the <div> tags.
If you modify this for your example, just remember that the div id needs to match the link's ref. You can throw both of these values into your viewmodel, to allow for multiple custom tabs.
http://jsfiddle.net/tyrsius/UCGRZ/
I have a very simple HTML two page demo that ilustrates a very confusing behavior in jQuery Mobile 1.1.0. (The real app is much more complicated but I've been able to "massively" simplify the problem.)
Page 1 consists of a single href to jump to Page 2. If Page 1 does NOT include jQuery Mobile 1.1.0 we can click on the link and Page 2 is displayed with no errors. However, if Page 1 includes jQuery Mobile 1.1.0, a click on the link in Page 1 results in a Page that is a combination of the HTML in Page 1 and Page 2! That is, Page 1 is retained and Page 2 is "merged" into it. I have tried this with both the regular and the minified versions with the same result. The two pages are as simple as an HTML page can get so it should be very easy to reproduce this with the samples below. This is running with Tomcat 5.5 (and if it matters, being managed and laumched out of Eclipse). The two HTML files and the two jQuery Mobile files are all placed in a folder at the server's document root. (The browser output below is from running through Tomcat, but I just tried this by launching the browser directly off of the Page1.html file - no server involved at all - and the problem persists, so this can be reproduced without a server being involved.)
The following shows the file contents for Page1 and Page 2, along with the HTML that is seen in the desktop Firefox browser (in Firebug).
* PAGE 1 SOURCE HTML:
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.min.js" ></script>
</head>
<body >
Click for Page 2
</body>
</html>
RESULTING PAGE 1 HTML IN THE BROWSER:
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page1.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 521px;">
Click for Page 2
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body></html>
PAGE 2 SOURCE HTML:
<!doctype html>
<html lang="en">
<head></head>
<body >
This is from PAGE 2 BODY!!!
</body>
</html>
RESULTING PAGE 2 HTML IN THE BROWSER:
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page2.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-fade"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active fade out" style="min-height: 521px; height: 522px;">
Click for Page 2
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" data-url="/OpsServer/DemoBadJQM/Page2.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c">
This is from PAGE 2 BODY!!!
</div></body></html>
Note that, with jQuery Mobile included in Page 1:
"Page 2", which had no content, contains the content of Page 1.
"Page 2" contains the href and the "loading" elements from Page 1.
"Page 2" finally includes the simple text from the in the Page 2 HTML file.
The page that results from clicking the link in Page 1 appears to be Page 1 with Page 2's appended. Drop jQuery Mobile from Page 1 and the problem is gone. It is purely a guess, but jQuery Mobile displays a "loading" message while the next page is being fetched and it appears that the act of doing this somehow prevents the browser from "disposing" of Page 1 and it instead merges the incoming Page 2 with the prior Page 1.
Can anyone explain what is happening here?
Thanks.
Using rel="external" along with the href in Page 1 fixes this problem.
This may be out dated but I just ran in to something similar. It looks like the reason is because jQuery Mobile will fetch the page, load it into the DOM, then transition between the pages like a slide. I'm assuming your viewable area was enough to hold the pages in such a way that it didn't even try to slide between the pages.
Our situation was that we had some pages with jQuery Mobile explicitly loaded and some without, and the ones with out were somehow getting the Mobile library's functions.
jQM loads itself and other pages into memory so that it can reduce the number of network requests and also to be able to transition nicely between pages. You can also tell it to preload images and pages in the background after you load your first page.
It's a slightly different beast than just regular html pages. Just try and think about optimizing the site for as few network requests as possible.
http://jquerymobile.com/demos/1.0b2/docs/pages/page-cache.html#/demos/1.0b2/docs/pages/page-anatomy.html