I need to render user submitted html within an xul:panel. I'm inserting the html into an xul:browser element within the panel so that invalid xhtml is not an issue (it's sandboxed within the browser frame).
Is there anyway to disable javascript within the xul:browser? My original plan was to write some regex that strips out all JS from the html, but it would be so much easier if I could simply disable JS and not worry about it.
EDIT: Well, browser.docShell.allowJavascript = false; is what I was looking for. Unfortunately this only works if the browser type is set to "content", and if I set a type to "content" xul:browser doesn't render correctly within a panel (known firefox bug that has been around for years). Without a content type it gives the loaded page access to CHROME, which is the reason I wanted to disable JS in the first place.. ugh
Related
Many thanks for your help and support in advance. Using vaadin 7 AbstractJavaScriptComponent, I am trying to load html snippet in place of div tag and the screen does not display anything. Could not figure it out the reason. Please help !
window.de_vaadin_ui_myapp_MyWidget = function() {
$(document).ready(function(){
$("#content").load("html/NewFile.html");
});
var element = this.getElement();
this.onStateChange = function() {
element.innerHTML ="<div id=\"content\"></div>";
};
};
the html file is located in the package de.vaadin.ui.myapp.MyWidget.html
There are multiple things that could go wrong here. It would help if you'd describe any relevant log messages or such.
I can see multiple different reasons for why this isn't working for you:
The connector logic is not run at all e.g. because of a typo in the #JavaScript annotation value or the name of the connector function (i.e. de_vaadin_ui_myapp_MyWidget). You can verify that it's actually loaded by adding e.g. console.log(this.getElement()) inside the top level function.
The HTML is requested from the wrong URL. Check the network inspector in the browser's developer tools to see which absolute URL is actually loaded and whether that returns the expected result or only e.g. a 404 response. If this is the problem, you could either move the HTML file to some other place or change the relative URL passed to load to something
The contents of the extended element is reset every time there is a state change event because innerHTML is reassigned. It might help to move the statement that assigns innerHTML outside of the onStateChange handler so that it would only be run once during initialization. This might also cause a situation where $("#content") is run before the div has even been created, causing it to not find the target element.
I am using select2 in tagging mode to create and edit tags. There is an annoying behavior which is that there is a delay between when the page loads and when the tags appear. Since the tags can spill onto two lines, after the tags appear the whole page readjusts when the content below the tags box is pushed down.
The delay is caused by select2 converting the input HTML tag into the necessary HTML elements for each tag.
The delay could be avoided if the select2 didn't generate the HTML for the tags, but instead I generated it on the server-side and it was included in the original page load. Then the position of elements below the tags field would never change.
Is there a way to have select2 attach itself it existing - pre-rendered - HTML, rather than creating the HTML itself?
Does anyone know of a tag field components that supports this? All of the components I have seen start with an input tag and then generate the HTML dynamically using Javascript.
I could not find a satisfactory answer, so I created a JQuery plugin specifically for my use case: https://github.com/k1w1/rendered-multi-select
It has Rails helper to render the HTML for the control on the server, then the Javascript events are attached when the page loads. This results in faster and flicker free loading.
I previously used javascript dialogs for confirmation on a mobile web app, but am now trying to switch over to using the new popups feature in JQM 1.2. My initial test doesn't work - no popup appears and I'm simply redirected to the anchor I'm trying to call.
My test code is simple, albeit a bit obfuscated because I'm using haml:
%a{:href => "#popupBasic", :"data-rel" => "popup"} Show popup
%div{:id => "popupBasic", :"data-role" => "popup"} Basic popup div
That said, I don't believe the haml is causing the issue based on reading the final HTML output. Both elements are at equal depth and contained within the element.
In addition, the div does "popup" without issue when I use the following at the console:
$( "#popupBasic" ).popup( "open" )
That makes me believe that the issue lies somewhere in the link or the URL handling. When I do click the link, it instead takes me straight to
http://localhost:3000/#popupBasic
Any ideas on how I should be handling the URL differently so that it shows the popup as intended?
After realizing the problem was probably some part of my Javascript, I went through and tried turning off each bit of javascript individually, until I figured out that the problem was with this in my application.js file:
$(document).bind("mobileinit", function(){
$.mobile.linkBindingEnabled = false;
});
which prevents all anchor click handling. Obviously now that I've removed this code the anchor links are working properly. Of course, that means I'm now left with trying to figure out why I added that in the first place and what I just broke by removing it...
I'm developing an application using jQuery mobile, that will be using HTML5 offline capabilities (cache manifest, etc).
Basic program is for on-field technicians to view/modify their orders on a tablet with no internet connection. I'm using a local browser database to store the orders.
I have an orders.html page which can view any order - but to pass a parameter to it, I can't use GET parameters, because the program is offline and I can't list every single order in the manifest.
So I have to use hash parameters - eg orders.html#o4572. But jQuery mobile doesn't play nice with this scheme - it uses hash parameters for it's own schemes. When I'm on list.html and there's a link to orders.html#o4572 - it turns the link into list.html#o4752 and stays on the same page.
I can turn off jQuery mobile's link handling by setting $.mobile.linkBindingEnabled = false; but this prevents all ajax navigation - you lose the nice transitions, and pop-up dialogs don't 'just work' anymore, you have to do them manually. And there may be other issues.
Is this the only way of getting this to work properly? I'm just starting to use jQuery mobile, so I feel like I'm missing something.
I have done something similar using the jquery-mobile-router plugin with a single page app that has a offline mode, however it should work the same for a multipage app since with a multi-page app the default behavior (ajax-enabled set to true) of JQM is that it pulls in the second page and attaches it to the DOM of the current page.
Using the JQM router you should be able to do something like this
var router;
var orderHandlerRoute = function (eventType, matchObj, ui, page, evt) {
var params = router.getParams(matchObj[1]);
//use your params to pull data from localStorage
};
router = new $.mobile.Router({
'orders.html(?:[?/](.*))?' : {handler: "orderHandler", events: 'bs'}
, {orderHandler: orderHandlerRoute }
});
You should indeed not use hash parameters for anything else than selecting pages when using jquery mobile.
The standard way to proceed is to pass your parameter with file.html?parameter=value and to retrieve the value through javascript.
You can then process this value with a js function that can for instance retrieve the data with an ajax call if you are online, or read it from local storage if you are offline.
This can be done either by binding the changepage event if you want to generate your pages dynamically based on the data associated to the parameter, or by binding the pageinit event if you want to alter the page after it has been displayed (for instance fill in form elements)
Alternatively, if the use of the cache manifest prevents you from usingthe ?parameter=value syntax, you can use the following approach:
- write your target link as file.html#pagename_itemvalue
- bind the pagechange event in order to override the default behaviour, and instead parse the target value, retrieve pagename and itemvalue, and generate/access the content you want to display. You can see an example of that on this page
I have a complex ICEFaces XHTML page that renders certain components conditionally, based on flags set as the user enters data on the page. What I'd like to do is direct focus to a certain field as soon as it appears, which may not be during the initial render of the page.
The ICEFaces documentation suggests that I can do this using the focus attribute of the outputBody component. Specifically:
If you setting the initial focus, the focused component must be rendered on first render call, if not then set the focus attribute only when the component gets rendered.
This seems to suggest that I can manipulate the value of the focus attribute at the time that my conditional component gets rendered. However, I don't see any attributes of the inputText component that allow me to change a value at the time the component is rendered.
Am I misreading the documentation? When and where can I alter the value of the focus attribute of outputBody so that my conditionally-rendered field gets the input focus when it appears? Or am I using the wrong tool to solve this problem?
Maybe you can use this
JavascriptContext.applicationFocus(FacesContext.getCurrentInstance(), "form:fieldM");
You can use some Javascript to set focus on an element.
Here's the Java snippet required to do this:
JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(),
"document.getElementById('myForm:myTxtBox').focus();");
myTxtBox is the ID of your form element, and myForm is the ID of your form.
You can use this wherever you are changing certain variables' values to render/hide fields.
Due to the fact that I'm using both Seam and ICEFaces, I was not able to invoke Javascript reliably from my server-side Java code. I was, however, able to add the necessary Javascript in-line in my XHTML, within the ui:component that was being conditionally rendered, close to the input field I needed the focus to go to. The relevant section of my XHTML looks like this:
<ice:panelGroup id="textPanelInput" >
<ice:form id="textInputForm" partialSubmit="true" style="vertical-align:middle;">
<ice:inputText id="textInput" valueChangeListener="#{appField.valueChangeListener}"
size="#{appField.fieldDefLengthAsInt}"
value="#{appField.value}"
styleClass="fieldStyle" rendered="#{appField!=null}"
>
</ice:inputText>
<ice:message id="jo" for="textInput" />
</ice:form>
</ice:panelGroup>
<script type="text/javascript">document.getElementById('panelsFields:0:textInputForm:textInput').focus();</script>
The Javascript line at the bottom is the line I added to solve my problem. All of the code above is in a ui:component block that may or may not be rendered, based on other conditions. When this ui:component block is rendered, my Javascript goes with it, and sets the input focus to my desired input field.
ICEfaces supports javascript api which has setting focus function. Thus you may use it like in the next excerpt:
<script type="text/javascript">
jQuery(document).ready(function () {
ice.applyFocus(elementId);
});
</script>
elementId is jsf component clientId.
ICEFaces javascript Api