I have been trying for a few days to embed an Orbeon 3.9 supported xform in a JSF page without much luck. I am running Orbeon as a "separate" deployment (ie. oxf.xforms.renderer.deployment = separate) and if I access an xform directly from the external (non-orbeon) web application everything works fine. The problem comes when I try to embed that xform inside another web page--which in our case is generated via JSF and facelets. I am currently trying to use JQuery to load the xform and then call ORBEON.xforms.Init.document(); in the callback method:
<script type="text/javascript">
$j(document).ready(function () {
$j("#xform").load("#{facesContext.externalContext.requestContextPath}/xforms/test.xform?orbeon-embeddable=true", function(data) {
if (typeof ORBEON != "undefined") {
if (!document.all) {
ORBEON.xforms.Init.document();
}
}
});
});
</script>
When I do this, the page appears to render fine and some of the widgets work properly (e.g. date picker and basic field validation) but none of the widgets which invoke a message box work. When any widget or event triggers a message box I receive an "Exception in client-side code" error with a detailed message of "Message: Cannot call method 'setBody' of null" (Chrome) or "Message: this._messageDialog is null" (Firefox).
I realize that by using the jQuery load method I am making an ajax call which might not be supported in Orbeon 3.9. (I have set the oxf.xforms.ajax-portlet to true, just in case this might make a difference; but no such luck.)
I am open to using any method to embed the xform into our JSF/facelet pages, however, I would prefer not to use iframes. I have experimented with the provided include-form.jsp example and other methods, but this jQuery.load method seemed the most promising--except for this one issue.
UPDATE: I have updated this question further after more research. I am only receiving this error when a message box is triggered. Here is a sample HTML page which invokes my xform:
<html>
<head>
<script type="text/javascript" src="/portal_web/js/jquery/1.4.2/jquery-1.4.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
$j(document).ready(function () {
$j("#xform").load("/portal_web/xforms/hello.xform?orbeon-embeddable=true", function(data) {
if (typeof ORBEON != "undefined") {
if (!document.all) {
ORBEON.xforms.Init.document();
}
}
});
});
</script>
<div id="xform">Loading form...please wait...</div>
</body>
And, here is a sample xform which exhibits this problem:
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:fr="http://orbeon.org/oxf/xml/form-runner">
<xhtml:head>
<xhtml:title>Say Hello</xhtml:title>
<xforms:model>
<xforms:instance>
<dummy xmlns=""/>
</xforms:instance>
</xforms:model>
</xhtml:head>
<xhtml:body>
<xhtml:p>
<xforms:trigger>
<xforms:label>Say Hello</xforms:label>
<xforms:message level="modal" ev:event="DOMActivate">Hello!</xforms:message>
</xforms:trigger>
</xhtml:p>
</xhtml:body>
This xform should work fine either hosted directly in an Orbeon web application or accessed from a "separate" deployment so long as the xform is accessed directly. However, if I embed this xform using jQuery (as in the included inline example), the form will render but I will receive an error message when I click on the button (i.e. trigger).
Thanks!
Related
I have tried several different methods to accomplish this and none have been successful. Ive tried jruby, the rest api for activiti (this does not update the UI and is thus not suited for my purposes), and the mechanize gem. The mechanize gem did not work because of the VAADIN UI that activiti explorer ships with or so I think. I currently have activiti hosted in an iframe in my rails app, and am trying to find a way to communicate between the two. I used the gem like this:
agent= Mechanize.new
agent.redirection_limit= 10
//page is used three times to illustrate different routes taken.
page= agent.get('http://127.0.0.1:8080/activiti-webapp-explorer2-5.18.0/)
page= agent.post('http://127.0.0.1:8080/activiti-webapp-explorer2-5.18.0/ui/APP/2/login',{'username'=>'kermit', 'password'=>'kermit'} )
page=agent.put('http://127.0.0.1:8080/activiti-webapp-explorer2-5.18.0/ui/1/loginHandler',{'username'=>'kermit', 'password'=>'kermit'})
here is a sample response from activiti explorer when mechanize is used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">html, body {height:100%;margin:0;}</style><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/activiti-webapp-explorer2-5.18.0/VAADIN/themes/activiti/favicon.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="/activiti-webapp-explorer2-5.18.0/VAADIN/themes/activiti/favicon.ico" /><title>Activiti Explorer</title>
</head>
<body scroll="auto" class="v-generated-body">
<script type="text/javascript">
//<![CDATA[
if(!vaadin || !vaadin.vaadinConfigurations) {
if(!vaadin) { var vaadin = {}}
vaadin.vaadinConfigurations = {};
if (!vaadin.themesLoaded) { vaadin.themesLoaded = {}; }
}
vaadin.vaadinConfigurations["activitiwebappexplorer25180ui-1091631569"] = {appUri:'/activiti-webapp-explorer2-5.18.0/ui', standalone: true, themeUri:"/activiti-webapp-explorer2-5.18.0/VAADIN/themes/activiti", versionInfo : {vaadinVersion:"6.8.8",applicationVersion:"NONVERSIONED"},"comErrMsg": {"caption":"Communication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null},"authErrMsg": {"caption":"Authentication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null}};
//]]>
</script>
<iframe tabIndex='-1' id='__gwt_historyFrame' style='position:absolute;width:0;height:0;border:0;overflow:hidden;' src='javascript:false'></iframe>
<script language='javascript' src='/activiti-webapp-explorer2-5.18.0/VAADIN/widgetsets/org.activiti.explorer.CustomWidgetset/org.activiti.explorer.CustomWidgetset.nocache.js?1444407987049'></script>
<script type="text/javascript">
//<![CDATA[
if(!vaadin.themesLoaded['activiti']) {
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('href', '/activiti-webapp-explorer2-5.18.0/VAADIN/themes/activiti/styles.css');
document.getElementsByTagName('head')[0].appendChild(stylesheet);
vaadin.themesLoaded['activiti'] = true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
setTimeout('if (typeof org_activiti_explorer_CustomWidgetset == "undefined") {alert("Failed to load the widgetset: /activiti-webapp-explorer2-5.18.0/VAADIN/widgetsets/org.activiti.explorer.CustomWidgetset/org.activiti.explorer.CustomWidgetset.nocache.js?1444407987049")};',15000);
//]]>
</script>
<div id="activitiwebappexplorer25180ui-1091631569" class="v-app v-theme-activiti v-app-ExplorerApp" ><div class="v-app-loading"></div></div>
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript></body>
</html>
I have tried all of the possible url's I could see on the UI, but none of them work. I have tried all of post, get, and put with each of these three urls .I found these URL's by looking at the loaded page, and noticing that they are nested iframes. Any help in seeing the feasiblity of the mechanize gem would be great, as feel as if this would be an easy fix to my problem. As a side note, I have changed the tomcat properties to allow for CORS requests. Also, http requests from rails to activiti explorer do not work either, so that form of communication is also out.
Also if you are familiar with activiti- I have edited the authenticate method in default login handler to try and parse http requests to get the username and password to login automatically. This however returns the same html code as printed above. Any help would be greatly appreciated. Here is a sample of the http requests I make from rails:
auth = {:userid=> "kermit", :password => "kermit"}
puts HTTParty.get("http://activiti.testing.com:8080/activiti-webapp-explorer2-5.18.0/", :content_type => "application/json",
:basic_auth => auth)
I think integrating Activiti Explorer in iframe is not a good idea. Since your username and password are exposed! And the requirements of the frontend are various.
I like Activiti Explorer at first, Modeler is really awesone! But I use Rails and find it hard to customize and integrate Activiti Explorer later. I tried integrate with Activiti REST, while I prefer Activiti Java API for the following reasons:
Activiti REST is a subset of Activiti Java API. eg: SetProcessDefinitionVersionCmd is not availiable in Activiti REST.
Performance concerns. I develop a task web page, but it needs over 10 http requests.
I like Acitivi Modeler and Diagram Viewer. I need Activiti Explorer running and make them work together.
So I develop a gem named jruby_activiti, integrating Activiti Engine, Modeler and Diagram Viewer. All these are availiable in JRuby on Rails! Hope my experiences could help you.
I'm trying to get a slider to work in with JQuery Mobile 1.4.2.
What I would like to do is to use the slidestop event to update a value elsewhere. However, the slidestop event does not fire. I created a test file and tested in Safari and Firefox. Nothing happens when I stop sliding the slider. Could someone please tell me what tutorial I missed?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<title>Concertzender</title>
</head>
<body>
<label for="slider-step">Input slider:</label>
<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="10" />
</body>
<script>
$( "#slider-step" ).on('slidestop',function( event ) { alert("slidestop event fired"); });
</script>
</html>
EDIT:
I tried the answer suggested below, but I have a slightly more complicated setup than the example above and, therefore, it doesn't work out.
I am trying to avoid the page structure of JQuery Mobile and just use it for the slider. The thing is, when I change to another page, a pagecreate or pageshow is not present, so I cannot wait for those events. What I want is to create a new slider (or rather replace an empty div with another already existing div and then change the id of the formerly empty div's input id. So what I am left with is a unique newly ID'ed input (with corresponding label).
How would I go about and use the slidestop to interact with the new slider? I tried this:
$('newslider').slider();
$('newslider').on('slidestop', function(){alert("slidestop");});
But that gives me two sliders in Safari, of which one does the slidestop and the other is unresponsive. In iOS, however, I get one slider that slides, but does not fire a slidestop event. Omitting the first line gives me an unresponsive slider in Safari and one that doesn't fire in iOS.
So my question is pretty simple: How to enable the slidestop event for a new slider without using JQuery Mobile's pages?
You need to wrap all events/bindings in pagecreate.
$(document).on("pagecreate", function () {
$("#slider-step").on('slidestop', function (event) {
console.log("slidestop event fired");
});
});
Demo
Got this ddl and it works fine with this version of jQm "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js":
But if I change it to 1.2.0 the items never hides. Anyone seen this problem?
<asp:DropDownList ID="LanguageDropDownList" OnSelectedIndexChanged="LanguageDropDownList_OnSelectedIndexChanged"
data-native-menu="false" AutoPostBack="true" runat="server">
</asp:DropDownList>
jQuery Mobile and asp.net web forms fundamentally don't work together. The postback model and jQuery Mobile's ajax form loading and navigation are incompatible. Move to MVC or turn off ajax.
Make sure to invoke this code before jQuery Mobile initializes. (Include it before the tag that references jQuery Mobile.)
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="jquery-mobile.js"></script>
http://jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html
I've been trying to figure this out but still stuck.
so I'm using PhoneGap for iOS and JQueryMobile.
I'm trying to show alert when a button is clicked.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
and I have
this
Login
$(document).ready("#button").click(function() {
alert('button clicked');
});
when I tried to launch this in chrome, this works fine.
however, when I used iphone simulator, it doesnt show anything.
For a normal web application you would use dom ready i.e.
$(function(){ // <-- this is a shortcut for $(document).ready(function(){ ... });
$('#button').click(function(){
alert('button clicked');
});
});
However in a JQM application it is much more useful to bind to 'pageinit' i.e.
$(document).on('pageinit','[data-role=page]',function(){
$('#button').click(function(){
alert('button clicked');
});
});
Binding to pageinit works better because JQM inserts new pages into the same dom as the first page. Because of this all of your code in dom ready doesn't get called again. So that first bit of code i put above will only work for that first page in your JQM application. The second will work no matter what page your button is in. Let me know if I can clarify this further for you.
I'm following this tutorial on adding mobile features to an ASP.Net MVC 4 application.
When I launch the application (causing the Login page to be loaded), I get Access denied at the following point in jQuery 1.7.2 (also reproduced with 1.7.1)
if ( elem.parentNode ) { // Access denied here, Line 6081
elem.parentNode.removeChild( elem );
}
Walking down the call stack, I see the following in jquery.mobile-1.1.0.js (there are a few other methods on the call stack as well)
// Called from .initializePage:
if ( !$pages.length ) {
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 ); // Called from here, Line 7475
}
// First method in jquery.mobile:
if( $.mobile.autoInitializePage ){
$.mobile.initializePage(); // Called from here, Line 7541
}
If I comment out jquery.mobile from my application, it works as it did previously:
// _Layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
#*<script src="#Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.19.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
All JavaScript files are being served via the built-in VS2010 web server from the main project's domain.
UPDATE
Upon further inspection, I realize this is what jQuery Mobile is doing when the error happens:
// find and enhance the pages in the dom and transition to the first page.
// if no pages are found, create one with body's inner html
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
What's happening to cause jquery.mobile to fail?
It turns out that there was a reference to a third party script on the page (Comodo SSL validation) that certainly did not need to be on a mobile version of the page. jQuery Mobile tried to manipulate the related DOM, causing the error.
Thank you for pointing me in the right direction. I've been searching for days why the popup method (JQuery Mobile) didn't work on an .aspx page. Visual Studio automatically initializes the page with a scriptmanager.
The solution was to comment out the following line in the Asp:Scriptmanager tag, since it is conflicting with the JQuery reference in the head of the page:
<asp:ScriptReference Name="jquery" />