This very basic page: http://www.marianotomatis.it/test.php
does not render correctly in "some" IE versions.
<!DOCTYPE HTML>
<html>
<head><title>Title</title>
<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.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="A" name="A">
<div data-role="rangeslider">
<label for="B">Range</label>
<input type="range" name="B" id="B" min="0" max="100">
<label for="C">Range</label>
<input type="range" name="C" id="C" min="0" max="100">
</div>
</div>
</body>
</html>
It stops on the script jquery.mobile-1.3.1.js in this line:
_sliderFirst = $.data( _inputFirst.get(0), "mobileSlider" ).slider,
with a SCRIPT5007 error ("Unable to get value of the property 'slider': object is null or undefined.")
I am using IE10 to debug and I have tested some combinations of Browser Mode (BM) and Document Mode (DM), to check the bad combinations. Hope this helps:
BM=IE10 DM=Standard [OK]
BM=IE9 DM=Standard [OK]
BM=IE8 DM=Standard [OK]
BM=IE7 DM=Standard [OK]
BM=IE10 DM=Non standard [OK]
BM=IE9 DM=Non standard [OK]
BM=IE8 DM=Non standard [OK]
BM=IE7 DM=Non standard [OK]
BM=IE10 DM=Standard IE9 [Error]
BM=IE9 DM=Standard IE9 [Error]
BM=IE8 DM=Standard IE9 [Error]
BM=IE7 DM=Standard IE9 [Error]
BM=IE10 DM=Standard IE8 [Error]
BM=IE9 DM=Standard IE8 [Error]
BM=IE8 DM=Standard IE8 [Error]
BM=IE7 DM=Standard IE8 [Error]
BM=IE10 DM=Standard IE7 [Error]
BM=IE9 DM=Standard IE7 [Error]
BM=IE8 DM=Standard IE7 [Error]
BM=IE7 DM=Standard IE7 [Error]
I have also tried to debug it with IE8 and it renders the page correctly.
Thanks in advance for any suggestion.
I had the same problem and I got rid of the errors in Internet Explorer when I've added data-type="range" to the inputs:
<input type="range" data-type="range" name="B" id="B" min="0" max="100">
This is a similar question to another asked against jQuery Mobile 1.3.0 "Error message with rangeslider in IE9 (JQuery Mobile)"
I've been able to reproduce this issue in jQuery Mobile v1.3.2 in IE10 (including WP8) and Chrome 28.
After a little digging in the JQM combined JS file, I found that the logic in several places is calling something like $.data( _inputFirst.get(0), "mobileSlider" ).slider if you step into that call stack you'll find at one point it checks for a variable to be undefined and if it is then is transposes the key ("mobileSlider") to camel-case and checks again. In this case the original key was camel-case and if it had been all lower-case with a hyphen ("mobile-slider"), it would have not failed.
To correct this issue in JQM v1.3.2, I've replaced the instances of "mobileSlider" with "mobile-slider" and now I have the expected behavior and working sliders and range sliders again.
Here are the lines and line numbers on which I've made the above change.
jquery.mobile-1.3.1.js(7861): _sliderFirst = $.data( _inputFirst.get(0), "mobileSlider" ).slider,
jquery.mobile-1.3.1.js(7862): _sliderLast = $.data( _inputLast.get(0), "mobileSlider" ).slider,
jquery.mobile-1.3.1.js(7863): firstHandle = $.data( _inputFirst.get(0), "mobileSlider" ).handle,
jquery.mobile-1.3.1.js(7919): $.data( this._inputFirst.get(0), "mobileSlider" ).dragging = true;
jquery.mobile-1.3.1.js(7920): $.data( this._inputFirst.get(0), "mobileSlider" ).refresh( event );
jquery.mobile-1.3.1.js(7932): $.data( otherSlider.get(0), "mobileSlider" ).dragging = true;
jquery.mobile-1.3.1.js(7933): $.data( otherSlider.get(0), "mobileSlider" ).refresh( event );
jquery.mobile-1.3.1.js(8006): $.data( otherSlider.get(0), "mobileSlider" ).handle.focus();
jquery.mobile-1.3.1.js(8014): $.data( thisSlider.get(0), "mobileSlider" ).handle.css( "z-index", 1 );
jquery.mobile-1.3.1.js(8015): $.data( otherSlider.get(0), "mobileSlider" ).handle.css( "z-index", 0 );
jquery.mobile-1.3.1.js(8017): $.data( otherSlider.get(0), "mobileSlider" ).handle.css( "z-index", "" );
jquery.mobile-1.3.1.js(8018): $.data( thisSlider.get(0), "mobileSlider" ).handle.css( "z-index", "" );
jquery.mobile-1.3.1.js(8029): var min = parseInt( $.data( this._inputFirst.get(0), "mobileSlider" ).handle.get(0).style.left, 10 ),
jquery.mobile-1.3.1.js(8030): max = parseInt( $.data( this._inputLast.get(0), "mobileSlider" ).handle.get(0).style.left, 10 ),
Related
I have encountered a glitch in Orbeon 2017.1 that did not occur in late 2015/early 2016 versions of the software: an error popup which has occurred when adding certain elements into the xforms:instance
Exception in client-side code.
Message: l is undefined
File: http://localhost:8080/orbeon/xforms-server/orbeon-266479e766510e28f420e559b3a49c43f8b18400.js
Line number: 79
After a few hours of testing, I have narrowed it down to the following. When an xxforms:dialog appears within a repeated node (xforms:repeat), and new elements are added, the error occurs. Note that the error does not occur if the the element already exists by xforms-ready. To summarize my problem, I have a generic XBL component that will display an xxforms:dialog of attributes that can be edited, as derived dynamically by reading an XSD. This dialog can appear many places within an XForms application, for virtually any element. If the element in which the XBL is not repeatable (but added by DOMActivate), there is no error. Only in xforms:repeat.
<head>
<xforms:model>
<xforms:instance id="test">
<model xmlns="http://null">
<element1/>
</model>
</xforms:instance>
<xforms:instance id="element2-template">
<element2 xmlns="http://null"/>
</xforms:instance>
<xforms:instance id="element1-template">
<element1 xmlns="http://null"/>
</xforms:instance>
</xforms:model>
<xi:include href="dialog.xbl" xxi:omit-xml-base="true"/>
</head>
<body>
<h1>Test</h1>
<xforms:group ref="instance('test')">
<div>
<xforms:trigger appearance="minimal">
<xforms:label>Insert Element1</xforms:label>
<xforms:insert ev:event="DOMActivate" context="." nodeset="./child::node()[last()]" origin="instance('element1-template')"/>
</xforms:trigger>
<xforms:trigger appearance="minimal">
<xforms:label>Insert Element2</xforms:label>
<xforms:insert ev:event="DOMActivate" context="." nodeset="./child::node()[last()]" origin="instance('element2-template')"/>
</xforms:trigger>
</div>
<div>
<!-- this works:
<div>
<xforms:input ref="my:element1">
<xforms:label>Element1</xforms:label>
</xforms:input>
</div>
<my:dialog/>-->
<xforms:repeat nodeset="my:element1">
<div>
<xforms:input ref=".">
<xforms:label>Element1</xforms:label>
</xforms:input>
</div>
<!-- dialog does not work within newly added elements in a repeat on this level -->
<my:dialog/>
</xforms:repeat>
<hr/>
</div>
<!-- this works: insert element 2 after xforms-ready -->
<xforms:group ref="my:element2">
<div>
<xforms:input ref=".">
<xforms:label>Element1</xforms:label>
</xforms:input>
</div>
<my:dialog/>
</xforms:group>
</xforms:group>
</body>
Here is the XBL:
<xbl:xbl xmlns="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xxf="http://orbeon.org/oxf/xml/xforms" xmlns:xbl="http://www.w3.org/ns/xbl" xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"
xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fr="http://orbeon.org/oxf/xml/form-runner" xmlns:my="http://null">
<xbl:binding id="my-dialog" element="my|dialog">
<xbl:template>
<xforms:group xbl:attr="model context ref bind" xxbl:scope="outer">
<xbl:content includes="xforms|label,xforms|help,xforms|hint,xforms|alert"/>
<xforms:group xxbl:scope="inner">
<xforms:var name="binding" as="node()?">
<xxf:sequence select="." xxbl:scope="outer"/>
</xforms:var>
<div>
Iside the XBL:
<xforms:trigger appearance="minimal">
<xforms:label>Click for dialog</xforms:label>
<xforms:action ev:event="DOMActivate">
<xxf:show dialog="element-attributes"/>
</xforms:action>
</xforms:trigger>
</div>
<xxf:dialog id="element-attributes" appearance="full" level="modal" close="true" draggable="true" visible="false">
<xforms:label>Dialog</xforms:label>
<div>Here's the dialog text</div>
</xxf:dialog>
</xforms:group>
</xforms:group>
</xbl:template>
</xbl:binding>
</xbl:xbl>
This form will load without errors. You can click the "Click for dialog" trigger in the XBL portion to show the xxforms:dialog because element1 is already in the model. However, if you click the trigger to add another element1, there will be an error dialog in client-side code. If you click the trigger to add element2, there's no error because element2 is not repeatable. You can therefore click the "Click for dialog" within element2 and the xxforms:dialog will appear.
Is there a workaround for this, or is this a bug in the current version of Orbeon? It did work in the version I ran earlier in 2017.
Indeed, the issue you reported does exist in Orbeon Forms 2017.2 (and maybe earlier version). This issue is now fixed, and the fix will be included 2018.1 and subsequent releases, as well as in 2017.2.1.
I am currently having trouble with focus on my inputs for iOS. It works perfectly on Android, but for some reason something is going with iOS where sometimes it takes multiple clicks before it actually registers a click event on the input and opens the keyboard with focus in the input and other times it gives focus to some random element behind the visible one so the keyboard opens, but the input field doesn't have focus. We have multiple inputs that are hidden behind the visible one, but I don't think that should matter.
Ionic info:
Your system information:
Cordova CLI: 6.2.0
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X Sierra
Node Version: v6.3.0
Xcode version: Xcode 8.0 Build version 8A218a
A basic outline of our code can be found here: http://codepen.io/anon/pen/wzYEQk
<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
<ion-content class="background-cntr" delegate-handle="mainScroll">
SOME HTML CONTENT
</ion-content>
<ion-footer-bar>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text"/>
<input type="text" style="display:none;"/>
</label>
<button>Test</button>
</div>
</div>
</ion-footer-bar>
</ion-view>
Does anyone know how to solve this?
Remember adding this preference tag on my config.xml file before.
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
This made the autofocus work before.
I have figured out the solution and to make it work better. Instead of having all the inputs within the footer, I add and remove them every time. That way there is only ever one input within the footer. This seems to work fairly well. The second thing I did was to handle the phantom keyboard case by add the following code to the controller.
window.addEventListener('native.keyboardshow', function(){
if (document.activeElement.nodeName !== "INPUT") {
var activeElement = document.querySelector("#chat_footer_inputs input");
if (activeElement) {
activeElement.focus();
$ionicScrollDelegate.scrollBottom(true);
}
}
});
JS
angular.module('ionicApp', ['ionic'])
.factory('focus', function($timeout, $window) {
return function(id) {
$timeout(function() {
var element = $window.document.getElementById(id);
if(element)
element.focus();
});
};
})
.controller('MyCtrl', function($scope, focus) {
focus("myInput")
});
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input trouble on iOS</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
<ion-content class="background-cntr" delegate-handle="mainScroll">
SOME HTML CONTENT
</ion-content>
<ion-footer-bar>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text"/>
<input type="text" style="display:none;"/>
</label>
<button>Test</button>
</div>
</div>
</ion-footer-bar>
</ion-view>
</body>
</html>
I want to use JSTL library in javascript.
My code is below.
<script type="text/javascript">
var grid_data =
[
<c:forEach items="${LIST}" var="list" varStatus="status">
<c:if test="${ status.index == 0 }">
{id:'${list.NOTICE_ID}'}
</c:if>
</c:forEach>
];
</script>
This code is working well, but it's not working with choose tag.
Is there any special reason? Can anybody help me?
// Syntax error on tokens ** especially in script not in html body **
<script type="text/javascript">
var grid_data =
[
<c:forEach items="${LIST}" var="list" varStatus="status">
<c:choose>
<c:when test="${ status.index == 0 }">
{id:'${list.NOTICE_ID}'}
</c:when>
<c:otherwise>
, {id:'${list.NOTICE_ID}'}
</c:otherwise>
</c:choose>
</c:forEach>
]
</script>
Those are errors signalled by Eclipse, because Eclipse is unable to correctly validate JavaScript code syntax when it's intermingled with JSP code.
Deploy the JSP, run it, and see if it actually works when executed. It will probably run fine.
Cannot help you with the choose tag - this current code snippet cannot work (missing closing tag). What about adding comma after each but last element of the list as described in jstl foreach omit an element in last record ?
the following approach may help to avoid ugly errors in eclipse:
set a variable as it shown below:
<c:set var="newVariable">
{
<c:forEach var="entry" items="${variableFromServerAsMap}" varStatus="status">
"<c:out value='${entry.key}'/>" : "<c:out value='${entry.value}'/>}"<c:if test="${not status.last}">,</c:if>
</c:forEach>
};
and use the newVariable variable in the javascript sections as the following:
<script type="text/javascript">
var my_js_data = <c:out value="${newVariable}" escapeXml="false"/>
</script>
The output should be similar to the following:
<script type="text/javascript">
var my_js_data = {
"some_param_key" : "some_param_value",
"some_param_key_2" : "some_param_value_2",
};
</script>
Okay I've been working on this issue for a while now and can't figure this thing out. Simple PhoneGap test app, trying to show an alert.
Using Cordova 2.9.0 for iOS. I've added some simple test code and tested it in chrome to see where it breaks, because it isn't working in the emulator
When I test in the Chrome (of course same result in emulator, but no error message is showing)
It executes the onDeviceReady as it should
It sets tb2 textbox value to 'before alert'
Then it breaks with the error: Uncaught TypeError: Cannot call method 'alert' of undefined, on this line: navigator.notification.alert(...
It should be referencing the cordova.js properly, here is the structure of my app folder:
cordova_plugins.js
cordova.js
/spec
spec.html
config.xml
/css
home.html
/img
index.html
/js
/res
Here is my config.xml code:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.blahblahblah.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Hello World</name>
<description>
Test blahblahblah Application
</description>
<author email="blahblahblah#blahblahblah.com" href="http://blahblahblah.com">
blahblahblah
</author>
<access origin="*" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<plugins>
<plugin name="Notification" value="CDVNotification" />
</plugins>
</widget>
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// Empty
document.getElementById('tb1').value = 'device ready';
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alert
//
function showAlert() {
document.getElementById('tb2').value = 'before alert';
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
document.getElementById('tb3').value = 'after alert';
}
</script>
</head>
<body>
<p>Show Alert</p>
<input type="text" id="tb1" value="" />
<input type="text" id="tb2" value="" />
<input type="text" id="tb3" value="" />
</body>
</html>
I have searched documentation, and haven't found any clue of why this isn't working, most answers to this question don't address version 2.9.0
Thanks in advance.
I know the question is about Phonegap 2.9, but that's the first thing Google spits when somebody looks for "phonegap alert not working". So here's what I did for it to work with Phonegap 3.0:
According to the manual, you need to add the plugin to your project. Just navigate to your project root folder and write this command:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
After that, I added this to my html:
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {
navigator.notification.alert("PhoneGap is working", function(){}, "", "");
}
</script>
I'm using Phonegap 2.9.0 and the problem that i had is that I haven't add the script cordova.js to the page.
Also be aware that exist a cordova.js file specific to each platform so watch out of adding cordova.js from android on iOS.
Remember that all calls to the phonegap API should be done after deviceready has fired
try to add this feature to your config.xml file..
<feature name="Notification">
<param name="wp-package" value="Notification"/>
</feature>
..I hope that's help...
All you need is to add the plugin:
cordova-plugin-dialogs
Then use the alert function which will interrupt program flow:
alert("some problem here");
Works for iOS and Android.
Setting up a simple grails app with Dojo, i used the
grails install-plugin dojo
to setup the dojo js files. In my main.gsp i have this
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="application"/>
<g:javascript library="dojo"/>
<dojo:header modules="['dojo.data.ItemFileReadStore','dijit.form.ComboBox']"/>
<g:javascript>
//dojo.addOnLoad(function(){alert("dojo loaded.");});
</g:javascript>
</head>
On my index.gsp page, i setup the following elements
<div>
<div jsId="search" dojoType="dojo.data.ItemFileReadStore"
url="<g:createLink controller="runner" action="findrunner"/>"></div>
<input dojoType="dojo.data.FilteringSelect"
id="chooser"
name="feed"
store="search"
searchAttr="url"
autocomplete="true"
pageSize="5"/>
</div>
Start the app but keep getting this error from firebug
GET http://localhost:8080/xxx/js/dojo/1.4.3/dojo/data/ItemFileReadStore.js
404 Not Found
5ms
dojo.js (line 16)
ParamsHeadersPostPutResponseCacheHTML
..</head><body><h1>HTTP Status 404 - /xxx/js/dojo/1.4.3/dojo/data/ItemFileReadStore.js</h1>
<HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b>
<u>/xxx/js/dojo/1.4.3/dojo/data/ItemFileReadStore.js</u></p><p><b>description</b>
<u>The requested resource (/xxx/js/dojo/1.4.3/dojo/data/ItemFileReadStore.js) is not available.</u>
</p><HR size="1" noshade="noshade"><h3>Apache Tomcat/6.0-snapshot</h3></body></html>
Any ideas?
Seems the 'dojo plugin' didn't seems to install all the required dojo files. I manually installed dojo 1.5 and extract the zip to /webapps/js/dojo/1.5.0 and enabled the version in my main.gsp like this
<script src="js/dojo/1.5.0/dojo/dojo.js"></script>
The new plugin version makes things a lot easier now. There is even a script to launch your custom builds in a breeze... and it's updated to dojo 1.6. Give it a try ;-)