I searched similar topic to add full screen option in my jsf application. I tried to add into "https://stackoverflow.com/a/11820717/1194553" and "https://stackoverflow.com/a/7525760/1194553"
solutions into my jsp file of jsf applicaton such as;
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%# taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Making Full Screen</title>
<script type="text/javascript">
function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false;
}
</script>
</head>
<body>
<f:view>
<h:form id="mainForm">
<div>
<h:commandButton id="topBtn" styleClass="topMenuItem topMenuItem" image="images/common/fullScrUfa.png" onmouseover="this.src='images/common/fullScrFa.png'" onmouseout="this.src='images/common/fullScrUfa.png'" onclick="requestFullScreen(document.body);"></h:commandButton>
</div>
</h:form>
</f:view>
</body>
</html>
When I run the project and click the button of which id is "topBtn", I expect to make the browser-view showed in full screen. I tried on chrome vs.27.0.1453.116 and explorer 10.
However, when I push the button, the view is displayed in full screen mode and immediately returns back to normal mode without waiting any click or something. Although, this action is occured in less than one second, I can realized when I look carefully.
How can I solve this problem?
You need to add return false; like this :
onclick="requestFullScreen(document.body);return false;"
to stop propagation of the click, and so stop the form submit.
Not related :
You don't need a <h:commandButton /> if you are not using any JSF functionnality. A simple <input type="button" onclick="..." />. This is only a matter of slighly better performance. You can use plain HTML in JSF. This is about the same for <h:panelGroup />, I don't abuse them, when not necessary I'll use <span /> or <div />
Related
I have created a user control which actually creates an empty dialog box for application form. I wanted to render this user control on the click event of a button(like we render partial views). I have an .aspx page that contains a button. On clicking the button the user control that creates a dialog, opens up. Below is the jquery code written to open the dialog in a user control:
Jquery
createAliasPopUpForm: function (rowNumberId) {
// debugger;
var self = this;
var dat = $("input[id*='hdnAliasRecordmetaData']").val();
self.metaDataColumns = JSON.parse(dat);
//debugger;
// now bind update data to pop up
if (self.metaDataColumns.length > 0) {
if (rowNumberId != 'undefined' && rowNumberId != null) {
self.rowNumber = rowNumberId;
// fill alias record to meta data
var listdata = $("input[id*='hdnAliasRecordList']").val();
var aliasList = JSON.parse(listdata);
if (aliasList.Rows.length > 0) {
$.each(aliasList.Rows, function (i, val) {
if (this.RowNumber == rowNumberId) {
self.fillAliasRecord(self.metaDataColumns, this.Columns);
return false;
}
});
}
}
else {
// right now cloumn list has MDM record value so need to clear that value only
$.each(self.metaDataColumns, function (i, val) {
this.Value = '';
});
}
// sort array
//self.metaDataColumns.sort(common.dynamicSortMultiple("GroupOrder", "MetadataId"));
self.metaDataColumns.sort(common.dynamicSortMultiple("GroupOrder", "ColumnNumber"));
self.createPopupHtml(self.metaDataColumns, rowNumberId);
self.init();
$('#popUpHeader').find('h4').remove();
$('#popUpHeader').append(' <h4 class="modal-title" >Alias Record</h4>');
$("#updateConfirmPopUp").dialog({
autoOpen: true,
width: 600,
resizable: false,
draggable: false,
modal: true,
show: { effect: 'blind' }
});
}
},
userControl
<%# Control Language="C#" AutoEventWireup="true" CodeFile="AddAlias.ascx.cs" Inherits="OCM.Phoenix.WebToolsFramework.Server.Modules.MDMAdmin.AddAlias" %>
<script language="javascript" type="text/javascript" src='<%= ResolveClientUrl("~/scripts/jquery-1.4.2.min.js") %>'></script>
<script language="javascript" src="../Scripts/jquery.js" type="text/javascript"></script>
<script language="javascript" src="../Scripts/jquery-ui.js" type="text/javascript"></script>
<script language="javascript" src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script language="javascript" src="../Scripts/Common.js" type="text/javascript"></script>
<script language="javascript" src="../Scripts/AdminEdit.js" type="text/javascript"></script>
<asp:HiddenField ID="hdnAliasRecordmetaData" runat="server" />
<asp:HiddenField ID="hdnAliasRecordList" runat="server" />
<script>
$(function () {
adminEditForm.createAliasPopUpForm();
});
</script>
code behind file just contains the load event
aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="AddAliasPage.aspx.cs" Inherits="Modules_MDMDataHub_AddAliasPage" %>
<%# Register Src="UserControls/AddAlias.ascx" TagPrefix="uc" TagName="alias" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<script src="Scripts/jquery.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script src="Scripts/AdminEdit.js"></script>
<body>
<form id="form1" runat="server">
<div>
<uc:alias ID="alias" runat="server" />
<br />
<asp:button ID="btn1" OnClick="btn1_Click" runat="server"> </asp:button>
</div>
</form>
</body>
</html>
Although, I have created the click event of the button, that calls the below function to render the html of the user control. but its actuaaly not working as it keeps giving me an errer as the hdnmetadatavalue must be inside the form tag. I did it but still i get the error. Am i doing something wrong here? Please help
private string RenderControl()
{
var sb = new System.Text.StringBuilder();
using (var stWriter = new System.IO.StringWriter(sb))
using (var htmlWriter = new HtmlTextWriter(stWriter))
{
var p = new Page();
var ctrl = (AddAlias)p.LoadControl("~/Modules/MDMDataHub/UserControls/AddAlias.ascx");
ctrl.Visible = true;
// do your own init logic if needed
p.Controls.Add(ctrl);
ctrl.RenderControl(htmlWriter);
return sb.ToString();
}
}
By reviewing your code:
var ctrl = (AddAlias)p.LoadControl("~/Modules/MDMDataHub/UserControls/AddAlias.ascx");
// ... other lines
ctrl.RenderControl(htmlWriter);
I assume you are trying to call RenderControl method for user control to HTML rendering, where the page will raise form tag exception if the user control was rendered outside defined form tag with runat="server".
Use Page.VerifyRenderingInServerForm method on page code behind to ensure all user controls render properly:
public override void VerifyRenderingInServerForm(Control control) {
// nothing to override here
}
public override boolean EnableEventValidation {
get { return false; }
}
Reference: UserControl's RenderControl is asking for a form tag in (C# .NET)
I have a jsp page that looks like the following:
What the intent is, is to get the current environment via a system variable and then generate the correct url for that environment.
<%# taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%# taglib prefix="logic" uri="http://struts.apache.org/tags-logic" %>
<%
String sysEnv = "";
if(System.getProperty("env.name").equals("test")) {
sysEnv = "test";
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<%# include file="/includes/common.jsp" %>
<script type="text/javascript" src="<c:out value="${requestScope.scriptsLocation}"/>/scripts/general.js"></script>
<c:if test="${requestScope.isFeed == true}">
<jsp:include page="/includes/someInclude.jsp"/>
<script src="http://www.myothersite.com/feed/d/some.js" type="text/javascript"></script>
<script type="text/javascript">
var environ = <%=sysEnv%>;
if(environ == 'test'){
var theUrl = 'http://mywebsite.com?isFeed=true&env=TEST';
} else {
var theUrl = 'http://mywebsite.com?isFeed=true';
}
...
</script>
...
I think I'm supposed to have the tags-logic import to do the looping that I'm trying to achieve in Java, but this is not working.
Since you're already in a JSP why not just do (roughly) this:
<script>
var url = 'http://mywebsite.com?isFeed=true';
if ('<%= System.getProperty("env.name") %>' === 'test') {
url += '&env=TEST';
}
// etc.
Personally I'd move this logic out of the view and create a request-scoped attribute in a filter, as part of your Struts 1 request processor, etc. since scriptlets are almost always bad. It also gives you the opportunity to set it at runtime.
In addition, the URL generation should also likely be moved out of the view layer.
For Windows 10: I have started a simple grocery list hosted web application. I went through this quick guide and the app works great. I have added a VCD file, the meta tag on my main page and started on the javascript to handle when Cortana activates the app. The app is registering great with Cortana, I can say: "Grocery show the CostCo list" and Cortana recognizes it and shows the app. The problem is that is always shows the home page. I want to have it show the CostCo page when it is activated with voice asking for that list. I put the pages of the app below, if anything else is needed - please let me know. Thank you.
UPDATE
I have tried window.location.href = "costco.php"; and in vorlon it shows in the dom explorer the code on Costco.php but it never makes it to the window. Do I have to do some kind of refresh?
My Home Page on the server
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample page</title>
<script type="application/javascript">
(function() {
if (typeof Windows !== 'undefined') {
Windows.UI.WebUI.WebUIApplication.addEventListener("activated", function(args) {
var activation = Windows.ApplicationModel.Activation;
if (args.kind === activation.ActivationKind.voiceCommand) {
var speechRecognitionResult = args.result;
var textSpoken = speechRecognitionResult.text;
if (speechRecognitionResult.rulePath[0] === "ShowList") {
if (speechRecognitionResult.semanticInterpretation.properties.apiName[0].search("CostCo") >= 0 || speechRecognitionResult.semanticInterpretation.properties.apiName[0].search("costco") >= 0) {
// WHAT DO I PUT HERE TO HAVE THE APP GO TO
// OR LOAD THE CONTENT FROM HTTP://EXAMPLE.COM/COSTCO.PHP
} else {
console.log("No valid stream specified");
}
} else {
console.log("No valid command specified");
}
}
});
}
})();
</script>
<meta name="msapplication-cortanavcd" content="http://www.example.com/vcd.xml" />
</head>
<body>
</body>
</html>
My VCD File:
<?xml version="1.0" encoding="utf-8"?>
<VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.2">
<CommandSet xml:lang="en-us" Name="Grocery">
<CommandPrefix>Grocery</CommandPrefix>
<Example>Grocery show CostCo list</Example>
<Command Name="ShowList">
<Example>Show {message} list</Example>
<ListenFor RequireAppName="BeforeOrAfterPhrase">show {apiName} list</ListenFor>
<Feedback>Loading the {apiName} Grocery list</Feedback>
<Navigate Target="./COSTCO.PHP"/>
</Command>
<PhraseTopic Label="apiName" Scenario="Dictation"></PhraseTopic>
</CommandSet>
</VoiceCommands>
Scenario : There is an input element in a HTML page where u can enter any numbers/text. If 2 consecutive characters are entered, then I am calling showModalDialog() method to open a pop up window which is having another input element. Whatever the characters entered in parent page will be copied to that search box.
Issue : If user types a text fast(without break) for searching with more than 2 characters (for ex. apple) then 3rd and/or 4th character/s typed are missed out(not traced by keyUp event). I mean only aple word is copied into search box present in pop up. So user need to retype the text.
Solution needed : Whenever user types any text, pop up needs to be triggered and all the characters need to be copied into search box in pop up
Environment : Reproducing only in IE9
Languages : HTML, Javascript
Note : What I have analysed is, since there is a delay in triggering pop up window, characters typed after 2 charaters are missed out. I don't know why this is occuring only in IE9 also I can not upgrade to IE10 for resolving issue.
Still I am stucked up with this issue. Is there any alternative solution for this? Any other way to get all the functionality of modal dialog with some other element/s?
Here is the sample code snippet of parent HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Page</title>
<script type="text/javascript">
var checkSeq = new RegExp("[a-zA-Z]{2}", "i");
function handleShowModalPopUp(fieldValue){
if(checkSeq.test(fieldValue)){
window.showModalDialog("popUpPage.html", document.getElementById('searchElem').value, "");
}
}
</script>
</head>
<body>
Enter Search Term :
<input type="text" id="searchElem" value="" onkeyup="handleShowModalPopUp(this.value)">
</body>
</html>
Here is the pop up window HTML (popUpPage.html) :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Search Dialog</title>
<script type="text/javascript">
function handleOnload(){
var searchVal = window.dialogArguments;
if(null!= searchVal){
document.getElementById('searchElem').value = searchVal;
}
}
</script>
</head>
<body onload="handleOnload()">
<input type="text" id="searchElem">
<input type="button" value="Search">
</body>
</html>
What you actually want to do is delay the opening of the popup until your user has stopped typing. Detecting if a user has stopped typing is simply a matter of detecting if nothing has happened in the time a keystroke could have happened. So instead of opening the modal window, open it only after a delay on the condition that no keystroke happened in the meantime.
Here is some code I cooked up that should help you. I've set the delay 500ms.
<html>
<head>
<script>
function DelayedPopup(delayThreshold) {
this.delay = delayThreshold;
this.lastSearchValue = undefined;
this.popEvent = 0;
}
DelayedPopup.prototype = {
needsDelay: function() {
return this.searchValue() != this.lastSearchValue;
},
searchValue: function() {
return document.getElementById('searchElem').value;
},
openPopup: function() {
window.showModalDialog("popUpPage.html", "");
},
popupOrDelay: function() {
if (this.needsDelay()) {
this.popup();
}
else {
this.openPopup();
this.popEvent = 0;
}
},
popup: function() {
this.lastSearchValue = this.searchValue();
if (this.popEvent) {
clearInterval(this.popEvent);
}
var self = this;
this.popEvent = setTimeout(function() { self.popupOrDelay(); }, this.delay);
}
};
var delayedPopup = new DelayedPopup(500);
</script>
</head>
<body>
<input type="text" id="searchElem" onkeyup="if (this.value.length > 2) delayedPopup.popup()">
</body>
</html>
I have two pages one is the main page and the another one is the inner page:
Page names: main.jsp , sidebar.jsp
I want to call the onload function on both of these pages. Is that possible. If yes How?
Below is the code for main.jsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# include file="/pages/common/init.jsp"%>
<%# taglib prefix="sx" uri="/struts-dojo-tags"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>J.C. Taylor - Broker Website</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="/css/default.css" media="screen" type="text/css" />
</head>
<body onload="prepopulateFields();load(17);">
<s:form name="continue" id="continue_id" action="continue" method="POST" validate="true" enctype="multipart/form-data">
<div id="wrapper">
<div id="main">
<div id="sidebar">
<%# include file="/pages/common/sidebar.jsp"%>
<span class="clearIt"></span>
</div>
The sidebar.jsp is:
<body onload="setSelected();">
//Some static content here
</body>
So Basically I want is to call prepopulateFields() Javascript method which belongs to onload() event of the main .jsp page and setSelected() which belongs to onload() method of the sidebar.jsp symulatneously and separately.
I know I can call the setSelected(); method inside the prepopulateFields() method but that I dont want to do. All I want is when the page is loaded both the onload functions should be called separately.
If you have some suggestions please do let me know!
I know I am being little bit ridiculous here but if I could do that My job will be very easy.
i don't think you can call more than one onload function.
best way is to call the method from already called function
function prepopulateFields(){
if //condition which check the current page where you want other onload function
setSelected();
}
<body onload="prepopulateFields();load(17);">
</body>
You cannot nest HTML <body> elements, it would only malform HTML.
Best is to put it as a <script> at the bottom of sidebar.jsp.
<script type="text/javascript">setSelected()</script>
If you use firebug to inspect the rendered html page of main.jsp. You would see there is only one < body > element. The < body > element in your sidebar.jsp is not rendered since it will malform HTML as html or body not allowed in included jsp.
Be careful that the included file does not contain <html>, </html>, <body>, or </body> tags
The solution is:
either put your setSelected() into main.jsp body onload event if the sidebar.jsp is always loaded;
or do as BalusC suggested.
window.onload = codeAddress; should work. Here's a demo. And the full code:
<script type="text/javascript">
function codeAddress() {
alert('ok');
}
window.onload = codeAddress;
</script>
Put the class definition in the parent jsp, and instantiate as many onloads as you need in the includes.
<SCRIPT>
// this portion was placed above the Class definition for convenience.
// make sure the Class definition gets loaded first in your code.
new OnLoad(function(){
alert("document loaded");
},100);
</SCRIPT>
...
<SCRIPT>
// Class Definition
OnLoad = function(taskFunction,miliseconds) {
var context = this;
context.cnt = 0;
context.id = null;
context.doTask=taskFunction;
context.interval = function() {
if(document.readyState == "complete"){
try{ context.stop();} catch(e){ throw new Error("stop error: " + context.id); }
try{ context.doTask();} catch(e){ throw new Error("load error: " + context.id); }
}
};
context.start = function(timing) {
if(context.id && context.id!=null)
context.stop();
context.cnt=0;
context.id=setInterval(context.interval,timing);
};
context.stop = function() {
var _id = context.id;
clearInterval(context.id);
context.id=null;
};
context.start(miliseconds ? miliseconds : 100);
};
</SCRIPT>