Hi I'm having trouble with WP 7.5 application development in IBM Worklight v 5.0.6.
I used MultiPageApp Project from ftp://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v506/wl_gs_all_samples.zip for my experiment.
There are many problems I had :
First Problem
I built WP 7.5 environment in worklight without editing the code. Then I run it in MS Visual Studio 2012 with Emulator 7.1 256MB. The problem is only the content of from MultiPageApplication.html appeared.
MultiPageApplication.html
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">
<title>MultiPageApplication</title>
<link href="wlclient/css/wlclient.css" rel="stylesheet">
<link href="images/favicon.png" rel="shortcut icon">
<link href="images/apple-touch-icon.png" rel="apple-touch-icon">
<link href="css/MultiPageApplication.css" rel="stylesheet">
<script>
// Define WL namespace.
var WL = WL ? WL : {};
/**
* WLClient configuration variables.
* Values are injected by the deployer that packs the gadget.
*/
WL.StaticAppProps = {
"APP_DISPLAY_NAME": "MultiPageApplication",
"APP_SERVICES_URL": "http:\/\/169.254.17.188:8080\/apps\/services\/",
"APP_VERSION": "1.0",
"ENVIRONMENT": "windowsphone",
"LOGIN_DISPLAY_TYPE": "embedded",
"WORKLIGHT_ROOT_URL": "http:\/\/169.254.17.188:8080\/apps\/services\/api\/MultiPageApplication\/windowsphone\/"
};</script>
<script src="wlclient/js/cordova.js"></script>
<script src="common/js/wljq.js"></script>
<script src="common/js/base.js"></script>
<script src="wlclient/js/messages.js"></script>
<script src="common/js/wlcommon.js"></script>
<script src="wlclient/js/diagnosticDialog.js"></script>
<script src="wlclient/js/deviceAuthentication.js"></script>
<script src="wlclient/js/window.js"></script>
<script src="wlclient/js/worklight.js"></script>
<script src="wlclient/js/wlclient.js"></script>
<script src="wlclient/js/wlfragments.js"></script>
<script src="wlclient/js/encryptedcache.js"></script>
<script src="wlclient/js/jsonstore/jsonstore.js"></script>
<script src="wlclient/js/challengeHandlers/antiXSRFChallengeHandler.js"></script>
<script src="wlclient/js/challengeHandlers/authenticityChallengeHandler.js"></script>
<script src="wlclient/js/challengeHandlers/deviceAuthAutoProvisioningChallengeHandler.js"></script>
<script src="wlclient/js/challengeHandlers/deviceAuthNoProvisioningChallengeHandler.js"></script>
<script src="wlclient/js/challengeHandlers/remoteDisableChallengeHandler.js"></script>
<script src="wlclient/js/wlgap-wp7.js"></script><script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none">
<div id="AppBody">
<!-- This is static header, it will be shown always -->
<div id="header">
<h1>Multi page app</h1>
</div>
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/MultiPageApplication.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
MultiPageApplication.js
var pagesHistory = [];
var currentPage = {};
function wlCommonInit(){
$("#pagePort").load("pages/MainPage.html", function(){
currentPage.init();
});
}
At last I solve this by change the URL of jquery load API (manually in MS Visual Studio 2012) from
$("#pagePort").load("pages/MainPage.html",
to
$("#pagePort").load("default/pages/MainPage.html",
Although the code is working, another problem is
Files in native/www are regenerated every time the application is
built, so any changes made to these files are lost.
what should I do to make the URL correctly generated?
Second Problem
When I want to navigate page from MainPage.html to Page1.html by pressing the "Load Page1" button,
the Page1.html won't load because the method 'init' in MultiPageApplication.js doesn't work. And I got this error from the output log in MS Visual Studio 2012:
Log:"Error in error callback: File564653615 = TypeError: Object doesn't support property or method 'init'"
I've tried changing the jQuery embedded in Worklight with jQueryMobile jquery-1.9.1.min.js and jquery.mobile-1.3.2.min.js, but the same problem occured.
so, how should I fix this problem? Is it because the jQuery embedded in Worklight doesn't work in Visual Studio?
Thanks
Please try the solution described here: jQuery Mobile changePage() not working in Windows Phone
Namely:
open jquery.mobile-1.3.2.js and refactor the following:
- var uri = url ? this.parseUrl( url ) : location,
- hash = this.parseUrl( url || location.href ).hash;
+ var uri = this.parseUrl( url || location.href ),
+ hash = uri.hash;
and:
- return uri.protocol + "//" + uri.host + uri.pathname + uri.search + hash;
+ return uri.protocol + uri.doubleSlash + uri.host + uri.pathname + uri.search + hash;
Note that I only checked this with the changePage method, but hopefully this fixes the file location for everything, including what you are experiencing.
Note: Be sure to return the application to its original state.
Related
Background
Following this tutorial from Jan 2016, ( https://dhtmlx.com/blog/using-dhtmlxgantt-with-laravel/ ) I began experimenting with DHTMLXGantt (v4.1) and Laravel (v5.4) and ran into some troubles getting the sample data from a mysql/mariadb database to display in the gantt chart. The initial troubles had to do with the DHTMLX connector not staying current with some Laravel changes. For the sake of others who may read this and are struggling with the same issues, the two basic problems I already solved were:
(1) I was referred to this [updated] connector which was compatible with Laravel's recent versions ( https://github.com/mperednya/connector-php/tree/modern ). And,
(2) I specified a date range that matched the dates of the sample data (from 2013), such as...
gantt.config.start_date = new Date(2013, 04, 01);
gantt.config.end_date = new Date(2013, 04, 30);
At this point I was able to successfully use Laravel as a backend server for the DHTMLXGantt chart (including read-write with the sample data).
Problem
The problem I am having now is trying to move from the simplistic sample, to something slightly more complex. Specifically, when I employ Laravel's extended templating I get the gantt chart painted on screen, but no project/task data displays in the chart.
To explain this a little more specifically, a simple Laravel view with the whole page contained within it works as expected. For example, this blade file (gantt.blade.php) works.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="codebase/dhtmlxgantt.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxgantt.css">
<link rel="stylesheet" href="codebase/skins/dhtmlxgantt_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="container">
<h1>Placeholder Header</h1>
<div id="gantt_here" style='width:100%; height:500px;'></div>
<script type="text/javascript">
gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
gantt.config.step = 1;
gantt.config.scale_unit= "week";
gantt.config.autosize = "xy";
gantt.config.fit_tasks = true;
gantt.config.columns = [
{name:"text", label:"Task name", width:"*", tree:true },
{name:"start_date", label:"Start time", align: "center" },
{name:"duration", label:"Duration", align: "center" },
{name:"add", label:"", width:44 }
];
gantt.init("gantt_here");
gantt.load("./gantt_data", "xml");
var dp = new gantt.dataProcessor("./gantt_data");
dp.init(gantt);
</script>
<h1>Placeholder Footer</h1>
</div>
</body>
But if I try using an extended app layout with the intention of building out a standard look & feel across all pages, the Gantt chart appears and is formated as I expect, but no data appears within the gantt chart. Here is top-level layout file (app.blade.php)
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="codebase/dhtmlxgantt.css">
<link rel="stylesheet" href="codebase/skins/dhtmlxgantt_skyblue.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
<script src="codebase/dhtmlxgantt.js"></script>
</head>
<body>
<div id="app">
<!-- menus and other bootstrap styling removed for brevity -->
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
And here's the "content" view (index.blade.php)...
#extends('layouts.app')
#section('content')
<div id="gantt_here" style='width:100%; height:500px;'></div>
<script type="text/javascript">
gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
gantt.config.step = 1;
gantt.config.scale_unit= "week";
gantt.config.autosize = "xy";
gantt.config.fit_tasks = true;
gantt.config.columns = [
{name:"text", label:"Task name", width:"*", tree:true },
{name:"start_date", label:"Start time", align: "center" },
{name:"duration", label:"Duration", align: "center" },
{name:"add", label:"", width:44 }
];
gantt.init("gantt_here");
gantt.load("./gantt_data", "xml");
var dp = new gantt.dataProcessor("./gantt_data");
dp.init(gantt);
</script>
</div>
#endsection
Other things I've tried:
Using Chrome developer tools, I can see that the xml data was properly delivered to the browser in both examples. This made me think maybe it is a timing problem of some sort. So I put a couple links on the page just to test clearing the chart and reloading it. But still no change.
<a onclick="gantt.clearAll()" href="javascript:void(0);">Clear</a>
<a onclick="gantt.load('./gantt_data', 'xml')" href="javascript:void(0);">Refresh</a>
I also tried moving the div block "gantt_here" to various other places above and below Laravel's template directives. It fails in all cases, except when this div block is outside (either above or below) the "app" div tag in "app.blade.php" which, of course, defeats the purpose I am trying to achieve.
My goal is to use this chart within Laravel's extended templating capabilities. But I can't figure out what's wrong. Any ideas?
After further troubleshooting, I discovered the problem. It turns out that in app.blade.php, I was loading the app.js at the bottom of the body tag. When I moved this up to the HTML header area, the data began to display properly.
I have a problem where my Ionic app won't render my views but I'm not getting an error. When I run this app only the navbar and a blank page is showing.
index.html:
<html ng-app="App">
<head>
<!-- Project setup: https://scotch.io/tutorials/angularjs-best-practices-directory-structure -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>TEST Mobile</title>
<!-- Assets -->
<link href="assets/libs/ionic/ionic.css" rel="stylesheet" />
<script src="assets/libs/ionic/ionic.bundle.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.route.js"></script>
<!-- Controllers -->
<script src="app/components/home/homeController.js"></script>
<script src="app/components/projects/projectsController.js"></script>
<script src="app/components/vms/vmsController.js"></script>
<script src="app/components/auth/authController.js"></script>
<!-- Services -->
<script src="app/components/home/homeService.js"></script>
<script src="app/components/projects/projectsService.js"></script>
<script src="app/components/vms/vmsService.js"></script>
<script src="app/components/auth/authService.js"></script>
<!-- Cordova.js isn't loaded until build for a specific platform, this will give 404 when viewing from ordinary browser -->
<script src="cordova.js"></script>
</head>
<body>
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
I have a module file and a seperate routing file:
var app = angular.module('App', ['ionic']);
routing js file:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/components/home/homeView.html',
controller: 'homeController'
});
$urlRouterProvider.otherwise('/home');
})
When I run this I only get the nav bar to show but not the ion-view home, which is now just for demonstration:
<ion-view view-title="Forgot Password">
<ion-content padding="true">
<p>
Yeah this is just a demo showing how views can be shown without tabs, then you can navigate
to views within tabs. Additionally, only one set of tabs needs to be written for all of the different views that should go inside the tabs. (Compared to written the same tab links in the footer of every view that's in a tab.)
</p>
<p>
There's no username/password, just click
the Sign-In button back a the sign-in view.
</p>
<p>
Return to Sign-In.
</p>
</ion-content>
</ion-view>
I suspect my issue is in the routing config but I wasn't able to find a working fix for this problem.
Add ui-view to your ion-nav-view in your index.html and it will work.
<ion-nav-view ui-view></ion-nav-view>
The issue wasn't with the routing config. The issue was that in another file (controller file) I also stated the angular.module('App', ['ionic']); this overrided my app.config.
I have the unfortunate task of making Bourbon Neat work with ie8. Thoughtbot's docs say you use Selectivizr for this. I followed Selectivizr's instructions and I see nothing different when testing in ie8. I also don't understand what if any fallback css is required. Any ideas or solutions? Most appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="">
<!-- FONTS -->
<!--Typekit - Adrianna Extended Demibold-->
<script type="text/javascript" src="//use.typekit.net/sjw4zgk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- AUTO RELOAD FOR HAMMER -->
<!-- Hammer reload -->
<script>
setInterval(function(){
try {
if(typeof ws != 'undefined' && ws.readyState == 1){return true;}
ws = new WebSocket('ws://'+(location.host || 'localhost').split(':')[0]+':35353')
ws.onopen = function(){ws.onclose = function(){document.location.reload()}}
ws.onmessage = function(){
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length;i++) {
var link = links[i];
if (link.rel === 'stylesheet' && !link.href.match(/typekit/)) {
href = link.href.replace(/((&|\?)hammer=)[^&]+/,'');
link.href = href + (href.indexOf('?')>=0?'&':'?') + 'hammer='+(new Date().valueOf());
}
}
}
}catch(e){}
}, 1000)
</script>
<!-- /Hammer reload -->
<!-- CSS/SCSS -->
<link rel='stylesheet' href='css/ostrich-sans.css'>
<link rel='stylesheet' href='css/font-awesome.css'>
<link rel='stylesheet' href='css/normalize.css'>
<link rel='stylesheet' href='css/responsive-nav.css'>
<link rel='stylesheet' href='css/style.css'>
<!-- IOS LINK STYLES -->
<style type="text/css">
/*.applelinks a {color:#c4d52d; display:inline-block; padding: 10px 0;}*/
/*Disable touch-highlight
-webkit-tap-highlight-color: rgba(0,0,0,0); */
</style>
<!-- JS MODERNIZR -->
<script src='js/modernizr.custom.87213.js'></script>
<link href="favicon.ico" rel="shortcut icon">
<link href="apple-touch-icon.png" rel="apple-touch-icon">
<title>Title</title>
<!-- ZEPTO FALLBACK TO JQUERY -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/zepto.min' : 'js/jquery.min') +
'.js><\/script>')
</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav class="nav-collapse">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sec-one">
<aside>Aside</aside>
<article>Article</article>
</section>
<section class="sec-two">
<aside>Aside</aside>
<article>Article</article>
</section>
<section class="sec-three">
<aside>Aside</aside>
<article>Article</article>
<p>Content copy</p>
</section>
<script src='js/responsive-nav.js'></script>
<script src='js/app.js'></script>
<!-- INITIATE RESONSIVE-NAV -->
<script>
var navigation = responsiveNav(".nav-collapse", {
label: '<i class=\"icon-reorder icon-2x\"></i>'
});
</script>
</body>
</html>
selectivizr.js is dependent on jquery (or similar libraries). Make sure that you're loading jquery BEFORE selectivizr...
<!--[if lte IE 8]>
**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>**
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
Have you tried including HTML5 shiv?
Without that (or similar), IE8 won't be able to style elements that are new to HTML5 (eg. <section>, <nav>, etc). For me, selectivizr.js does indeed allow Neat to work with IE8, but if you're using HTML5 elements then even with selectivizr Neat won't be able to style them in IE8 without the HTML5 shiv. (nb. that's not actually a problem with Neat per se - it's a more general problem that stems from IE8 being a pre-HTML5 browser).
Effectively, selectivizr.js fixes the problems with selectors that IE8 doesn't recognise, while HTML5 shiv fixes the problems with unrecognised elements: if you're using HTML5 elements then in order to get everything working smoothly, you'll probably need both.
I have a simple page which uses the mediaelement.js audioplayer plugin. The player attaches and functions correctly when loaded normally. However, when the page is loaded via ajax, the mediaelementplayer does not attach to the audio tag.
I use this code to call the file via ajax and jquery:
<html>
<head>
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax_vocab_link").click(function(evento){
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm}
);
});
})
</script>
</head>
<body>
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p>
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div>
</body>
</html>
The audioplayer page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- Audio Player CSS & Scripts -->
<script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen">
<!-- end Audio Player CSS & Scripts -->
<script>
$(document).ready(function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
</head>
<body>
<div class='display_vocab_container' >
<div class='display_vocab_text' >
<div class='audio-player-slim'>
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio>
</div>
</div>
</div>
</body>
</html>
I've tried many combinations including using on, live, success and moving the css/js links between the documents, but these have all made the situation worse.
What can i do get the file to attach medaielementplayer when loaded via ajax?
Try to put the mediaelementplayer() function call in the ajax success function, that worked for me. So unless you want to use .ajax instead of .load you'll need to pass it as the second argument to the load function. Or use http://api.jquery.com/ajaxSuccess/
$(".ajax_vocab_link").click(function(evento) {
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
});
I just created a new project using the visual studio cordova starter template. However I am unable to get the javascript document ready function to be called when running from the windows phone 7 emulator. When running from a browser it is called fine.
onDeviceReady()... gets logged to the console, but $(document).ready(...) does not.
Can anyone see any obvious reason for this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Title</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css"/>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
</head>
<body>
<div id="home" data-role="page">
</div>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
$(document).ready(function () {
console.log("doc ready");
});
</script>
</body>
</html>
document.ready is most likely being called before the PhoneGap code has initialized the console which you are logging to. The WP7 browser does not have its own console, the console is implemented by the PhoneGap framework.