iUI Ajax hyperlinks not working in Chrome - javascript

I am testing iUI for mobile web apps. Instead of putting all content into a single HTML page, I am using the Ajax hyperlink technique described by Joe Hewitt here. However I cannot get this to work in Chrome, although Joe Hewitt's own Digg demo, which uses the same technique, seems to work correctly.
Here is the simplified source code:
main.html:
<!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; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="iui/iui.css" type="text/css" />
<link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
<script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="main" title="Main" selected="true">
<li>Go to Screen #1</li>
<li>Go to Screen #2</li>
</ul>
</body>
</html>
screen1.html:
<div class="panel" title="Screen 1">
<ul><li>Hello 1</li></ul>
</div>
screen2.html:
<div title="Screen 2">
Hello 2
</div>
This works fine on Firefox (minus styling issue in screen2.html) but the links do not work on Chrome.
Any pointers?

The AJAX-based navigation used may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, try a different browser. When I'm using jQuery Mobile, sometimes the Ajax hyperlink technique works, sometimes it doesn't. Although the same code works fine on Opera.

Looks like does not have anything to do with iUI, rather it is a Chrome issue that affects loading any local files via Ajax.
Here is another SO question related to this issue, this time showing up with JQuery:
Problems with jQuery getJSON using local files in Chrome
The accepted answer includes a link to the bug in the Chromium bug tracker.

Related

Changes in View causes polymer style issues

So I want to use polymer in order make a stylish mvc webpage. I dont like starting from scratch, because I am still somewhat of a noob when it comes to asp mvc, so I started with Visual studios asp mvc template. The only changes I made was removing references to bootcamp and the nav menu on the _Layout.cshtml and added a core-toolbar (+ some other small html changes). It works well at first but after I make changes in the index file, all polymer styling is lost.
This is my _layout.cshtm:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
#*#Styles.Render("~/Content/ArmistanceMaterial.css?"+Guid.NewGuid())*#
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html?#Guid.NewGuid()">
<link rel="import" href="bower_components/font-roboto/roboto.html?#Guid.NewGuid()">
<link rel="stylesheet" href="Content/ArmistanceMaterial.css?#Guid.NewGuid()">
<title>Armistance</title>
</head>
<body>
<core-toolbar>
<img src="~/Content/Images/Armistance.png" height="50%" style="padding-right:15px;" />
<span flex>Armistance</span>
</core-toolbar>
<section>
#RenderBody()
</section>
<section>
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</section>
#*#Scripts.Render("~/bundles/webcomponents")*#
</body>
</html>
This is my Index.cshtml:
#{
ViewBag.Title = "Home Page";
}
<div>
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>
<div >
<div >
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p>Learn more »</p>
</div>
<div >
<h2>Get more libraries</h2>
<p>NuGet is a free Viual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p>Learn more »</p>
</div>
</div>
And everything seems to be working fine:
Until I do something like delete or add a div(in this case add).
I think this was caused by my not using a path relative to the root, but to the current view dir. Which is weird in my opinion because I didn't think refreshing the page would change the active directory.
Fix: add "~/" to the beginning of paths
FYI: I figured this out shortly after posting this, just wanted to clarify that this stupid mistake did not take me a week to figure out.

how to enable push.js ajax content loader with ratchet

i am trying to implement the push.js engine from ratchet:
http://maker.github.com/ratchet/#push
i downloaded the ratchet files from here:
http://maker.github.com/ratchet/ratchet.zip
and am using apache to serve all js, css and html. all files are in the same directory.
here is my one.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">one.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="two.html">
<strong>two</strong>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
and here is my two.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">two.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="one.html">
<strong>one</strong>
</a>
</li>
</ul>
</div>
</body>
</html>
how do i link these two files together?
it looks like push.js is included but when i clicking on the a href's does nothing.
i feel like i am missing something glaringly obvious about this implementation.
thanks for the help.
Ratchet works off of touch events, which are not available in your browser. In Chrome go to chrome://flags/ and enable "Force enable touch events". That should do the trick for browser development. If you want to make this work on desktops without the flag you are going to need a js framework to convert touch events to pointer events. Something like https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.js should do the trick.
Ratchet uses touch events on mobile devices that are different than the pointer events used in a desktop browser.
You can use the Chrome flags as mentioned in earlier answers or your can use #fat's fingerblast.js that converts touch events to pointer events.
The fingerblaster.js file can be found here:
https://github.com/stephanebachelier/fingerblast.js
IMPORTANT: In order to enable fingerblaster.js you need to include a script such as the following at the end of your body element (once your html content has loaded):
<script type='text/javascript'>
var fb = new FingerBlast ('body');
</script>
This will create a new FingerBlast object and set the listener on body of the html document (you can put any css selector string in place of 'body').
I asked the same question. Seems like it only works on ios / phones, not on the web browser.
See: https://github.com/maker/ratchet/issues/148
I found that Ripple Emulator works great with this "issue" (I think only is available on Chrome)
It's nice because you don't need to add another js library
Modern Firefox browsers have a web developer feature called "Responsive Design View". It allows you to view a web page in a smaller viewport to simulate use on a phone/tablet. It also allows you to simulate touch events. I found it particularly useful when working with Ratchet on a web app.
In Firefox, you can enable the Responsive Design View by going to Tools -> Web Developer -> Responsive Design View or using the hotkeys "option + command + m".
More information on the Responsive Design View can be found here.
You can download Chrome Canary and with Developer Tools click over Phone icon ( first one ) then select which mobile phone you want to emulate, you can even use Responsinator.com.
PushJS is embedded into ratchet.js.
Use FingerBlast. Tried Chrome, Safari and it worked.
https://github.com/stephanebachelier/fingerblast.js/blob/master/lib/fingerblast.js
On Google Chrome you can use the developer console and emulate a mobile device with touch events
https://developer.chrome.com/devtools/docs/device-mode#emulate-touch-events

jQueryMobile routing not working with AngularJS

I'm writing a mobile web app with jQueryMobile and I put in AngularJS to handle data binding. But this introduces routing problems on mobile devices. Below is the minimal code I could write to reproduce the problem. Everything works OK on Chrome on desktop, but when I try the same page from my android device I get the nasty "Error loading page". Problem can be fixed by using data-url for navigation but there's catch. I also need to package it up with phone gap. This means html is loaded by file:// and direct navigation(data-url) doesn't work(I tried)
<!DOCTYPE html>
<html ng-app>
<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.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://raw.github.com/tigbro/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter-1.2.0.js"></script>
</head>
<body>
<div data-role="page" id="main">
<a data-role="button" href="#sub">sub</a>
</div>
<div data-role="page" id="sub">
<p>sub page</p>
</div>
</body>
</html>
Upon clicking the "sub" button user should be directed to hostname/#sub and it is on Chrome but weird things happen on android and browser is routed to hostname/#!/%23sub
I guess this is URL encoded?
Also I should point out that by removing just the two script refenrences for angular and for JQM-angular adapter everything works(and no databinding of course).
i tried removing angular-jquery adapter and everything works as if by magic.
also no issues with angular and jquery clashing.

jQuery Mobile - Swipe - Origin null not allowed by Access-Control-Allow-Origin

Okay, before I get buried in sea of red tape for asking a frequently asked question, please hear me out. I am using Phonegap to develop a mobile web app and jQuery for swiping between different pages. By different pages, I mean different HTML files and not divs within one html file. For illustrative purposes, let us take two html files out of the lot I have in the app.
index.html
test.html
Assume that the control is in test.html and I do the following
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script>
$(function(){
$("#home").bind('swipeleft',function(event, ui){
$.mobile.changePage("../index.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div data-role="content">
<p>Slide finger left</p>
</div>
</div>
</body>
</html>
I read the discussion here and tried adding "&callback=?" to the end of index.html. That removed the error "Origin null is not allowed by Access-Control-Allow-Origin", but it propped up a new one "Resource not found". The following errors were obtained in Webkit based browsers (Mobile Safari, Chrome). I ran the file in Firefox and got a plain "Error Loading Page" alert on the screen.
Please help me out with this situation. A million thanks in advance!

Iphone image generated using html canvas appears cropped if unrelated scripts removed

I am trying to view an image on the iphone that is generated using the html5 canvas.
The browser page detects the iphone then redirects to the iphone specific page.
The image is displayed properly.
Now here is the problem.
The iphone page is a stripped back version of the browser page. When stripping it back I found that when I removed 2 completely unrelated scripts from the page, the image appeared cropped on the iphone (the bottom of the image appeared cropped.) Just to be sure. I substituted the scripts with other scripts. Regardless of the scripts involved, when 2 scripts were present the image would display properly.
I also found that if the iphone page without the scripts was loaded directly (not redirected) the image displayed correctly. It was only when redirected from the browser page to the iphone page without the scripts that it didn't work. Reloading the iphone page also displayed the image correctly.
Incidentally, I've noticed a similar cropping affect when I change the orientation of the phone to landscape and back but I'm not sure if this is related at all.
I'm guessing the cropping has something to do with when the canvas is generated, but I'm not sure. This has me pretty stumped.
Anyway, here is the code for the iphone page.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>canvas image thingy majig</title>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link type="text/css" href="/iphone.css" rel="stylesheet" />
<link type="text/css" href="/style.css" rel="stylesheet" />
<script type="text/javascript" src="/MOB.js"> </script>
</head>
<body onload="init();">
<section id="drawingArea">
<canvas id="canvas"> </canvas>
</section>
<input class="reset" type="button" value="Clear" onClick="window.location.reload()">
<script type="text/javascript" src="/cmmn/sclbkmk.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Does anyone have any ideas about what is going wrong?
EDIT: Just for reference I was using an iphone 4 with firmware version 4.1(8B117).
It seems that it is a problem with timing.
I modified the above code so that
<body onload="init();">
is now
<body onload=setTimeout("init()",100);>
I haven't checked the best time for the settimeout yet,but 100 does the job so far.
Also this kind of negates the point of stripping down the website (I was trying to optomize loading times.)

Categories