How can I accomplish the following using jQuery: Open a popup window that returns a value to the parent window when a link in the child window is clicked, close the child window, and then have the parent automatically submit a form based on the value returned?
I realize that the jQuery Dialog is a popular solution, but I require a popup window because the window's contents need to be navigable, and I want to avoid using an iframe in the jQuery Dialog.
The popup window is going to be used to collect more than one value, ultimately to be returned as a delimited string to the parent, but this data collection needs to occur prior to the submission of the parent window's form. If there were a standard design pattern for an "Entity Picker", this would be it.
This needs to work in IE8, FF3.6, Safari 4, and Chrome 5.
Thanks,
Mark
Here is my solution:
var parent = $(parent.document.body);
$(parent).find('input#valStore').val(theVal);
$(parent).find('form#myForm').submit();
window.close();
In your newly opened browser window you could try something like
$("#mylink").click(function(){
value = /* get some value */
window.opener.$("#myform .somehiddenfield").val(value);
window.opener.$("#myform").submit();
window.close();
});
DISCLAIMER: I haven't tested this in any browser.
Related
I have an app which is small in terms of width and height, I want a popup to show when a button is clicked. Problem is the popup is larger than the app window and when i open it, it scales down and looks weird
APP
APP WITH POPUP
POPUP CONTENT IN DESIGNER
How can i make the popup independent from the app window, like this:
Or is there a better approach rather than using popup, it would be nice if i were able to move the popup/window around. It still needs to be somehow connected to the main app because it get's data from there
A Popup in QML appears as a layer on top of the parent window, so it cannot be bigger than the parent window. If you want a separate, top level window, you should use a Window or a Dialog instead.
I've gotten it sorted out. I encapsulated the component i wanted to show inside a window and created it using Qt.createComponent()
var playListComponent = Qt.createComponent("CustomPlaylist.qml")
var window = playListComponent.createObject(rootWindow)
window.show()
The root element of CustomPlaylist.qml is a Window
I have an HTML document with an iframe in it. Now, if you click a certain button/link in the iframe, I want the parent document to scroll back to the top.
I'm not sure how to make that work. When I put an anchor at the top of the parent document, and have the button do something like window.parent.location = '#anchorname';, then the browser opens the iframe document itself, having the parent one vanish.
First of all, I suggest the usage of JQuery scrollTop (see here) to scroll on top. This is not enough, however, you need to call your function from the page in the iFrame, so, supposing that your function which scrolls your document is called 'foo', you can call your function from the page in the iFrame this way:
window.parent.foo();
Hope this helps.
I want to keep a jquery UI dialog in a fixed position (with respect to content) even if that means it opens outside the browser window. I'm able to control the positioning until the dialog hits the edge of the window, but there appears to be some kind of offset control that is keeping it from opening offscreen.
I'm successfully using this solution for the same issue with datepicker:
How to control positioning of jQueryUI datepicker
I wonder if a similar fix is possible for dialog (I tried the obvious change - replacing "datepicker" with "dialog" - doesn't work).
Many thanks.
I had the same challenge which I managed to fix by using Fixed CSS positioning. Initialize the dialog on page load (with autoOpen: false) and then when you want the dialog to be displayed:
$('#dialogContent').parent().css('position', 'Fixed').end().dialog('open');
add the following setting to the dialog.
dialogClass: "dialog-fixed"
in your css declare the class as follows.
.dialog-fixed
{
position:fixed !important;
}
that works for me... as per jquery 2.1.1 and jquery ui 1.11.2
Background:
I am doing some UI work where I allow the user to programatically add and resize controls on a canvas.
Problem:
When resizing a combo box through AS the dropdown stays at the same width as the first time it drops down. So user places combo box on the page, clicks the down arrow, sees the options, selects an option or clicks down arrow again to close, resizes the width of the drop down, clicks the down arrow. Now drop down is the same width as original.
Have tried simple things like setting the width of the dropdown specifically and invalidating display list but it still doesn't work.
Example:
Code Example pending
While trimming my code down to an example I solved my problem. A combobox has a dropdownWidth property. I was trying to set this myComboBox.dropdownWidth = newWidth, which doesn't work (not entirely sure why, didn't dig into the SDK). However if I change my code to myComboBox.dropdown.width = newWidth it actually goes to the dropdown element and re-sizes it directly which does work.
comboBox.dropdown.width did not work for me. I had to use
comboBox.dropdown.percentWidth = 100;
It seems to work without having to call invalidateSize()
In the ComboBox, overriding the set dataProvider and performing the following seemed to work, because the dataProvider field is bound to the collectionChange event.
ComboBox.calculatePreferredSizeFromData(count:int):Object
override public function set dataProvider(value:Object):void {
super.dataProvider = value;
var size:Object = calculatePreferredSizeFromData(dataProvider.length);
this.dropdownWidth = size.width;
this.dropdown.width = this.dropdownWidth;
this.invalidateSize();
}
Does anyone know how the various screen readers interact with a modal window, ie: Thickbox? Do the contents of the modal gain the reader's focus after they click on it?
This depends on the modal solution you're using. Many do not do a decent job of focus management:
putting keyboard focus onto the first element in the modal.
looping focus back to the first element when the end of the modal is reached (rather than letting focus cycle to the browser chrome or the page behind the modal).
returning keyboard focus to the original position (e.g. the opening button or link) when the modal is closed.
If the solution you're using doesn't do some of this, you can do this kind of thing in your own JavaScript. For example, if you know the first focusable element:
var focusMe = document.getElementById("#modal-focus-start");
if (focusMe) {
focusMe.focus();
}
Or if you want to focus the first link in the modal.
var modal = document.getElementById("#modal"),
focusMe;
if (modal) {
focusMe = modal.getElementsByTagName("a")[0];
if (focusMe) {
focusMe.focus();
}
}
If you don't have a convenient focusable element to move focus to, some modern browsers (Firefox seemed buggy last time I checked) allow you to set tabindex to -1 on any HTML element, making that element focusable by JavaScript.
If you wanted to go further, you can use JavaScript to find the first focusable element (uses jQuery) within the modal.