Maybe I am working with it wrong. I don't know. All I know is its something to do specifically with the XHR.js that comes with appMobi. I have the latest build as of what ever was on there site 2 days ago. I am developing on a Macbook Pro. I am attempting to Test locally with the XDK and via Local Wifi/Test anywhere with an HTC Evo 3D using the Android platform. As well as I am using an iPhone 4S and iPad2. Its the same result every time.
I see no errors in the console debug window. All I see is the words "RemoteBridge" or "RemoteBridge2". My script is simple over all. Just a plain jQuery based $.ajax post and a little html to go with it. The URL though I will be changing it when I post it as I don't want it visible via public forum is a valid URL and drops a valid JSON object as its output. So I need input, I have no idea where to go from here as my app requires a lot of dynamic data that updates on the fly. And allegedly all I had to do was include xhr.js and my standard jQuery should have worked.
Anyway here is my code.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="all" href="./src/global.css">
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="./src/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/global.js"></script>
</body>
</html>
and the contents of global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
$(document).ready(function()
{
/*
var request = $.ajax({
url: "http://this.url-has-been-changed.net/geo/suggest",
type: "POST",
data: {"entry" : "951"},
dataType: "json"
});
request.done(function(data){$('#advert').append('done');});
request.fail(function(data){$('#advert').append('fail');})
request.error(function(data){$('#advert').append('error');})
request.complete(function(data){$('#advert').append('complete');})
request.success(function(data){$('#advert').append('success');})
*/
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
});
all other files found to be included are stock from appmobi
Chris,
Just a couple of things to help you figure this one out.
Make sure you reference appMobi.js and XHR.js from
http://localhost:58888/_appMobi
in order to take advantage of JavaScript API bridge commands (http://www.appmobi.com/documentation/jsAPI.html).
Wait until the "appMobi.device.ready" event has fired before using those JavaScript API bridge commands. In your case, the XHR.js library is actually translating XMLHttp calls to native AppMobi.device.getRemoteData calls.
Try this index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<!--
<link rel="stylesheet" media="all" href="./src/global.css">
-->
</head>
<body style="background-color:white;">
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="global.js"></script>
</body>
</html>
Along with this global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
The XHR.js and appMobi.js libraries are provided by the wrapping application itself in order to "listen" for JavaScript calls that would require native-level functionality. For example, the AppMobi.device.getRemoteData command that would allow you to make a cross-domain data request. For convenience, the XHR.js library translates XmlHTTP calls into the AppMobi.device.getRemoteData command.
For more information on the JavaScript API, check out the documentation at:
http://www.appmobi.com/documentation
Related
I am new in SAP and trying to develop a SAPUI5 application, but faced some problems when reusing views/partial views. I want to have a partial view and pass custom data in a specefic format (data changes but model is same), and reuse these partial view many times in one page, every time passing different data. Somehow like Tiles, but very cuszomized.
what do you suggest me to use?
I have tryied to make new instance of a regular view but faced this error:
GET https://sapui5.hana.ondemand.com/resources/view/List.view.xml 404
(Not Found)
this is my code to make new instance:
var firstListView=sap.ui.xmlview("firstViw", "view.List");
thanks for your help
Update:
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ushell"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.appName": "./"
}'>
</script>
<script src="../libs/jquery.cookie.js"></script>
<link href="css/site.css" rel="stylesheet" type="text/css" />
<link href="css/library.css" rel="stylesheet" type="text/css" />
<link href="css/theme/library.css" rel="stylesheet" type="text/css" />
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
appWidthLimited:false,
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.appName"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
and this is the folder structered:
Please have a look at chapter “Reusing UI Parts: Fragments” of the UI5 SDK.
Here is an excerpt. Please have a look whether this helps.
I am working with serving a simple polymer element from a Tomcat server. The element works fine in Chrome but fails in the recent version of Firefox 49.0.2.
I have attached the content the two elements and the problem seems to happen because the WebComponentsReady event is fired repeatedly over and over again in Firefox but in Chrome only four times.
Furthermore by including a include on the paper-slider element in the simple-element below causes Firefox to go into a loop where it keeps reloading the files over and over again ?!
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
What is going on?
simple-element-demo.html (below)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Demo of simple element">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
</script>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./simple-element.html"></link>
</head>
<body>
<div>Hello! I am going to demo simple-element. See below me.</div>
<simple-element></simple-element>
</body>
<script>
document.addEventListener('WebComponentsReady', function(e) {
console.log('WebComponentsReady', e);
debugger;
});
</script>
</html>
simple-element.html below
<!doctype html>
<html>
<head>
<title>Simple Element</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
</head>
<body>
<dom-module id="simple-element">
<template>
<div class="container flex-horizontal">
Hi There! I am Simple Element.
</div>
</template>
<script>
Polymer({
is: 'simple-element',
properties: {
prop1: {
type: String,
notify: true
},
},
created: function() {
console.log('Simple is created');
},
ready: function() {
console.log('Simple is ready');
}
});
</script>
</dom-module>
</body>
</html>
I was able to fix the problem by including webcomponents-lite.js only once in the main file: simple-element-demo.html.
I removed the line below from the simple-element.html and now it works just fine in all browsers.
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
I am failing to see why I cannot get waypoints to work. Code is below, what am I missing (it must be something small and simple)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
<script>
$('#waypoint').waypoint(function () {
alert('You have scrolled to an entry.');
}, {
offset: '100%'
});
</script>
</head>
<body>
<div style="height: 1500px">Scroll down</div>
<div id="waypoint">Waypoint</div>
</body>
</html>
It doesn't look like you're including the jquery library, which is required.
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
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.