I have a javascript in an HTA which looks like this:
var result = null;
window.showModalDialog("dialog.hta", window, "dialogHeight:300px; dialogWidth:300px");
alert(result);
dialog.hta:
<html>
<head>
<title>Dialog box</title>
<meta http-equiv="MSThemeCompatible" content="yes"/>
</head>
<body style="background:#F0F0F0">
<select id="colors">
<option selected>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
</select><br/>
<script type="text/javascript">
function ok(){
window.dialogArguments.result = colors.getElementsByTagName("option")[colors.selectedIndex].innerHTML;
window.close();
}
</script>
<button onclick="ok()">OK</button>
<button onclick="window.close()">Cancel</button>
</body>
</html>
The problem is that when I press OK the alert(result) in the main HTA window always says null, even when I click on the OK button in the modal dialog box.
How can I do so that it says which option the user selects in the list when the OK button is pressed and null when the cancel button is pressed?
This is how modal dialog works:
In the main app:
// Call a dialog, and store the returned value to a variable
var result = showModalDialog(path, argument, options);
On dialog close:
// Set the returnValue
var elem = document.getElementById("colors");
window.returnValue = elem[elem.selectedIndex].text;
top.close();
After setting the returnValue in the dialog, you can read it from result after the dialog has been closed.
option elements didn't have innerHTML in old IEs, hence you've to use text property instead. You can also add a value attribute to the select element, and then create a return value in a simple way:
window.returnValue = document.getElementById('colors').value;
Related
I will edit this main post to update with the latest code and avoid confusing.
The problem is that Im popping up a new window with a button, but this new window is not making a script work even if its being loaded in the HTML code.
To make this easier, I just added a window.alert to the script that should be working into the new window, and its never showing.
This is what we use to pop up the new window (actually working and popping up the new window properly)
jQuery(document).ready(function( $ ){
$("#imprimirPdf").live("click", function () {
var divContents = $("#cartaDeAmor").html();.
var printWindow = window.open('', '', 'height=400,width=800')
printWindow.document.write('<!DOCTYPE html>');
printWindow.document.write('<html>');
printWindow.document.write('<head>');
printWindow.document.write('<script type="text/javascript" src="http://www.mywebsiteurl.com/descargarPDF.js"><\/script>'); // <-- Loading the script that is not working.
printWindow.document.write('<script type="text/javascript" src="http://www.mywebsiteurl.com/html2pdf.bundle.min.js"><\/script>');
printWindow.document.write('</head>');
printWindow.document.write('<body>');
printWindow.document.write('<div id="carta">Content</div>');
printWindow.document.write('<input type="button" value="Function trigger test" onclick="eKoopman2();">'); // Calling the function
printWindow.document.write('<script>')
printWindow.document.write('(function() { eKoopman2(); })();'); // Calling the function again
printWindow.document.write('<\/script>')
printWindow.document.write('</body>')
printWindow.document.write('</html>');
printWindow.document.close();
});
});
This can be found at "descargarPDF.js" (the script that I need to be loaded)
function eKoopman2() {
var element = document.getElementById('carta');
html2pdf(element);
window.alert("sometext");
}
This is what we find in the HTML code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.mywebsiteurl.com/descargarPDF.js"></script>
<script type="text/javascript" src="http://www.mywebsiteurl.com/html2pdf.bundle.min.js"></script>
</head>
<body>
<div id="carta">Content to be exported</div>
<input type="button" value="Function trigger test" onclick="eKoopman2();">
<script>(function() { eKoopman2(); })();</script>
</body>
</html>
And the problem is that the alert loaded in the script is never showing. Not working in the button click and not working in the self called function.
I can't find out why my Javascript Object properties are reset on the page as the save prompt pops up. As I want to save them in a file.
The idea of my following script (HTML/Javascript) is to be able to save or load the color combination of the 2 displayed colored frames (red and blue, on the right).
Here a screenshot of this
Here the my script
<!DOCTYPE html>
<html>
<head>
<title>save and load setup thru json file</title>
<meta charset="utf-8">
</head>
<body>
<!-- div "leftFrame" -->
<div id="leftFrame" style="position:absolute; top:0px; right:70px; width:50px; height:25px;"></div>
<!-- div "rightFrame" -->
<div id="rightFrame" style="position:absolute; top:0px; right:0px; width:50px; height:25px;" onclick="colorBlack()"></div>
<!-- button "save" -->
<form onsubmit="saveMySetupConfig('myColors.setup')">
<input type="submit" value="Save">
</form>
<!-- button "load" -->
<button onClick="document.getElementById('loadMySetupConfigFile').click();">Load</button>
<input type="file" id="loadMySetupConfigFile" onchange="loadMySetupConfig(event)" style="display:none;" name="file" accept=".setup"/>
<script type="text/javascript">
// function for saving my js object "mySetupConfig" as a JSON file
function saveMySetupConfig(filename) {
var mySetupConfigJson = JSON.stringify(mySetupConfig);
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(mySetupConfigJson));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// function for loading my js object "mySetupConfig" from a JSON file
function loadMySetupConfig(event) {
var input = event.target;
var mySetupFile = new FileReader();
mySetupFile.onload = function(){
var mySetupConfigJson = mySetupFile.result;
var mySetupConfig = JSON.parse(mySetupConfigJson);
document.getElementById("leftFrame").style.backgroundColor = mySetupConfig.leftFrame;
document.getElementById("rightFrame").style.backgroundColor = mySetupConfig.rightFrame;
}
mySetupFile.readAsText(input.files[0]);
};
// my js object
var mySetupConfig = {};
// assign red color to a propertie of my js object and assign this propertie value to div "leftFrame"
mySetupConfig.leftFrame = "red";
document.getElementById("leftFrame").style.backgroundColor = mySetupConfig.leftFrame;
// assign blue color to a propertie of my js object and assign this propertie value to div "rightFrame"
mySetupConfig.rightFrame = "blue";
document.getElementById("rightFrame").style.backgroundColor = mySetupConfig.rightFrame;
// assign black color to a propertie of my js object and assign this propertie value to div "rightFrame" thru function colorBlack() when this div is clicked
function colorBlack(){
mySetupConfig.rightFrame = "black";
document.getElementById("rightFrame").style.backgroundColor = mySetupConfig.rightFrame;
}
</script>
</body>
</html>
To test if the "save" and "load" are working, I convert the blue frame to a button which become black when clicked. So that I first turn the blue frame in black and then save the color combination (red and black) to verify that it has been correctly saved, by loading the saved file afterwards.
You can test this script here (the script has to be re-run after doing save, cause for some reason the page content disappears)
I noticed that the Javascript Object Properties of color combination are correctly saved and will be also correctly loaded.
But I don't know why the frame I turned in black become blue again when I save the color combination, although that my Javascript Object properties have been correctly saved in the file.
Does my page be automaticaly reloaded/reset after the clicking the "save" button? Why?
It doesn't behave the same way when clicking the "load" button: displayed color combination remains (until the OK button will be clicked)
Thank you for your help !
I have a web application which is on HTML5... In that i have a dojo dialogue box for some user operations... Now i want to click the title bar of that dialogue box... The title bar of the dialogue box is accessible by ele = document.getElementById("searchFrame_title");...
and i am performing the click on the dialogue box's title bar by this...
ele = document.getElementById("searchFrame_title");
ele.style.cursor = 'move';
var evt = new MouseEvent("click", {
view : window,
bubbles : true,
cancelable : true,
}), ele = document.getElementById("searchFrame_title");
ele.dispatchEvent(evt);
alert("clicked");
While everything's fine but on clicking the title bar of the dojo dialogue box it doesn't comes in visible area...
Scenario...
I dragged the dialogue box at the bottom of the web page(really bottom any further will push it upwards). then i performed a click on the box which appends some data on the dialogue box due to which the data appended goes inside the screen.
Problem...
When i click on the title bar manually the dialogue box automatically moves it upwards to the viewable area calculated from the bottom. But when i simulate the click from the code(shown above), it doesn't do so...
How to do it...
The positioning is not done at the click time but at the end drag time. Simulating a click does not trigger the drag mechanism.
However, you can workaround it. That's a dirty trick but you can call _endDrag() method of the dialog (instead of simulating a click)
See:
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
var dialog = new Dialog({
content: document.getElementById('dialogContent')
});
dialog.show();
document.getElementById('repositionMe').onclick = function() {
dialog._endDrag();
}
document.getElementById('addTo').onclick = function() {
document.getElementById('content').innerHTML += '<br>' + document.getElementById('content').innerHTML;
}
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<body class = "tundra">
<div id="dialogContent">
<button id="addTo">add content</button>
<button id="repositionMe">reposition me</button>
<div id="content">this is the content of the dialog</div>
</div>
</body>
I have the following scenario like this :
I have a main window[main.html]. There are three links called Popup1, Popup2, Popup3. On clicking the link open Popup1 window, Popup2 window respectively.
<html>
<head>
<title>Popup Focus Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
var openWin = [];
$(function(){
$('#elem').on('click', 'a', function(){
var index = $(this).index();
var page = 'pop'+(index+1)+'.html';
var w = window.open(page, $(this).attr('title'), '_blank');
openWin[index] = w;
});
});
</script>
</head>
<body>
<div id="elem">
Pop 1
Pop 2
Pop 3
</div>
</body>
</html>
Now the windows open are window 1 & window 2. I want to transfer the focus of the window 1 from window 2. is there anyway this can be done?
pop1.html
<html>
<head>
<title>Popup 1 Example</title>
<script type="text/javascript">
function go() {
if(window.opener.openWin) {
var popup2 = window.opener.openWin[1];
popup2.focus();
}
}
</script>
</head>
<body>
<div>
popup 1 example
</div>
<div>Go to Popup2</div>
</body>
</html>
pop2.html
<html>
<head>
<title>Popup 2 Example</title>
</head>
<body>
<div>
popup 2 example
</div>
</body>
</html>
Check main.html code in fiddle http://jsfiddle.net/tmf8cry8/2/
You have written the code properly, please implement the two changes as listed below...
1) You need to push the window object in openWin Array
var openWin = [];
$(function(){
$('#elem').on('click', 'a', function(){
var index = $(this).index();
var page = 'pop'+(index+1)+'.html';
var w = window.open(page, $(this).attr('title'), '_blank');
//openWin[index] = w;
openWin.push(w); //Push the window object
});
});
2) Access the window object using the array index to focus the window
function go() {
//console.log(openWin);
//if(window.opener.openWin) {
// var popup2 = window.opener.openWin[1];
//popup2.focus();
//}
//Supposing that pop1, pop2 and pop3 are opened, you want to access pop2
openWin[1].focus();
}
Hope it helps!
You can use the method window.open
window.open("",window_name).focus();
Assuming your window is opened, you can transfer focus to the window using the above code.
Please use the following code in pop2.html and try [after opening all windows in a sequential order].
<html>
<head>
<title>Popup 2 Example</title>
<script language="javascript">
function openNew()
{
window.open("","Pop 3").focus();
}
</script>
</head>
<body>
<div>
popup 2 example
</div>
<a href="javascript:void(0);" onclick="javascript:openNew();">
Go to pop3</a>
</body>
</html>
As per you code, you are using title attribute to naming windows, hence Pop 3 is used to transfer focus to Pop 3 window.
Alternatively, you may check if the window instance is opened or not and then load the URL entirely or transfer focus
Hope it helps!!!
Make go() function just call a function in the opener window, e.g.:
window.blur(); //focus out of here
window.opener.myParentWindowFunction( 2 );
That function (in the "parent" window) should call then a function in the target window that just "window.focus()".
funtion myParentWindowFunction( target ){
window.blur();//focus out of here also
openWin[target].callFocus();
}
And on every popup:
function callFocus(){ window.focus(); }
You can't make a window "send" the focus to another (security issues I guess), but you can make a window to "ask for it"... and depends on the browsers if it's going to get it (in chrome doesn't work, but if you add an alert() after the focus it will change the window. Funny, because if you just put the alert but not the focus it doesn't swap the windows...)
Code is just a mockup, but that's the concept. You have to use the opener window as relay comunicate to the desired window that it have to call the focus. Hope you don't need it really crossbrowser.
I have the following h:selectOneRadio:
<h:selectOneRadio id="#{prefix}_rating" value="#{examinationPanel.tempResult}" >
<f:selectItems value="#{examinationPanel.options}"></f:selectItems>
</h:selectOneRadio>
And then the backing bean is loading the options based on some userpreferences:
public List<SelectItem> loadOptions (Set<ResultEnum> possibleResults){
List<SelectItem> options = new ArrayList<SelectItem>();
for(ResultEnum result:possibleResults){
SelectItem option = new SelectItem(result,messages.getString(result.name()));
options.add(option);
}
return options;
}
How can I define shortcuts for the options in the radio group? por example typing "1" selects the first option, typing "2" the second, etc...
Thanks in advance!
ps. I'm using Jsf 1.2, Richfaces, Primefaces and Facelets.
That's not by default builtin. Your best resort is using JavaScript. Attach a function to the keypress event of the <body>, check the keyCode of the key pressed and change the selected item of the dropdown accordingly. This is doable in only a few lines using jQuery. Here's an SSCCE, just copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2461588</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('body').keypress(function(e) {
var index = parseInt(String.fromCharCode(e.keyCode));
if (0 < index && index < 10) {
$('#dropdown option').eq(index - 1).attr('selected', true);
}
});
});
</script>
</head>
<body>
<select id="dropdown">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
<option>option9</option>
</select>
</body>
</html>
If you want to support 10 or more items, you'll need to maintain a stack of pressed keys, apply it immediately and introduce a timeout to reset the stack (1 second?).
You can investigate whether <rich:hotKey> would help. In short, it lets you define keyboard shortcuts, but it may require some jQuery knowledge.
PrimeFaces hotKey can help as well.