I am validating my form using an extension pages dialog box. I popup the dialog box with the error message when the user needs to correct input.
The dialog box has an OK button that closes the dialog box and sets focus to the field that needs to be corrected.
var ef = dojo.byId(errorField);
ef.focus();
This is working great except......
I have a group of buttons and a bunch of other components that float to the top of the form.
They are inside a panel with the following CSS.
.PNCToolBar2 {
position:fixed;
top:68px;
left:0px;
width:100%;
height:40px;
color:#fff;
background-color:#F2F2F2;
padding-top:6.0px;
padding-left:15.0px
}
What is happening is that if the failing field is scrolled up under the "button bar" then the browser scrolls a bit to try to get the button into focus but not enough. Depending on how the user had their browser scrolled on the form, all or part of the field in error might still be hidden by the button bar.
Is there a way to first know if the field is at the top of the browser window under the bar and then scoll a bit if it is to make the field appear? If so how?
Try:
dojo.window.scrollIntoView(ef);
If the DOM node represented by ef is not currently on the screen, Dojo will scroll just enough so that it will be.
More info on this method
using javascript you can use the scrollTo() method
http://www.w3schools.com/jsref/met_win_scrollto.asp
Related
I'm using Primefaces 6.1 Dialog Framework. I'm wondering if there's a way to use a general growl for nested dialogs.
I could use a growl in one of the child dialogs but it displays the messages inside the boundaries of the iframe and not on the top-right corner of the window.
Here's an example:
main.xhtml > dialog1.xhtml > dialog2.xhtml
So, I'm in main, then I open dialog1 to view some data and then dialog2, which is kind of a tiny CRUD page.
When there's an error in this last page, I want to display the error message on the top-right corner of the WINDOW (not the iframe), just like it would do in the main page.
I don't know if it's a bug/issue or I'm just dumb, but I'm running out of ideas. Is there a way to accomplish this?
Thanks in advance!
(I can't provide the code now, but if it's really neccesary i'd edit this a put a simple example).
I am using the bootstrap modal window as data picker. But when having more results to pick displaying pagination. I want to load the next pages inside the same modal window when clicking on the pagination.
Can I do it in generic way like when any link clicked inside a modal window to load the content inside the same modal window, or do I need to implement this for each link separately using AJAX feature?
Please refer this three links: There will help you for sure.
Reference-1
Reference-2
Reference-3
You could change $('modal-body').html() on click.
The modal shows/hide without changing or reloading content. So you will have to restore the original content on hide maybe.
Use $('#myModal').on('hidden.bs.modal', function () {} to restore your original content.
I've spent some time simplifying the code to get a simple example of the problem. I'm using Dojo 1.6.1. I've a TabContainer defined on my page. Dinamically, I add to it two tabs, each one of them contains an EnhancedGrid with a rowMenu(right click). The issue is that the menu does not work correctly on IE8 if the TabContainer is defined to use all the space available on the page. If I use a specific height and width, it works fine. By not working correctly I mean the following: The menu is pretty simple; it has just two MenuItem, one of them is a PopupMenu that shows a submenu, as follows:
If the TabContainer takes all the available width and height, the menu does something very strange. First, if you do a right click over a row, it does not do anything. You need to a second right click. Then the menu shows, but when you open the submenu, the main menu disapears, and the submenu does not work. It keeps floating around until you navigate to other page:
When it fails, it throws a javascript error saying "'undefined' is null or not an object", on the line 208 of dojox/grid/_FocusManager.js
[...]
_scrollHeader: function(currentIdx){
var info = null;
if(this._colHeadNode){
var cell = this.grid.getCell(currentIdx);
info = this._scrollInfo(cell, cell.getNode(0));
}
[...]
I've tried to create a jsfiddle sample, but Dojo 1.6.1 is not available there, and with Dojo .1.6.0 the behaviour is diferent (You need to do a left click on the row and then a right click, and then the menu works fine), so I've created a simple HTML sample you can see on http://pastebin.com/jDNFQxrP. To see the difference you just need to change the commented TabContainer at the bottom of the code. Has someone seen this before?
Thanks
JL
I have a Menu widget that I want to display whenever the user clicks on specific dom elements, but I don't want a MenuBar. What's the best way to do this? I've tried attaching click handlers to the relevant DOM elements and having the click handler display the Menu, but I can only get it to display the Menu in the area where the original declarative markup would have been rendered. I can't get it to move at all. I'm attempting to use dojo.style(myWidget.domNode, 'top', calculatedTop) (and the equivalent with 'left'). What (obvious thing) am I missing?
Thanks.
Since you are using the dijit's default menu widget, I would think that you just need to specify the property targetNodeIds on the Menu Widget (reference) to define where the context menu is relevant:
targetNodeIds (Defined by dijit.Menu)
Array of dom node ids of nodes to attach to. Fill this with nodeIds upon widget creation and it becomes context menu for those nodes.
To get the popup showing on left click I believe you'd want to use the property leftClickToOpen:
// leftClickToOpen: [const] Boolean
// If true, menu will open on left click instead of right click, similiar to a file menu.
//defaults to false
leftClickToOpen: false,
Specifying this declaratively would look like:
<div data-dojo-type="dijit.Menu" data-dojo-props="targetNodeIds: ['nodeId1','nodeId2','nodeId3'], leftClickToOpen:true"
style="display: none;">
<!-- Your content here -->
</div>
I am having trouble while using the YUI panel as a dialog.
I have a dialog object created with javascript on page load:
$J = jQuery;
dialog = new YAHOO.widget.Panel("dialog", { width: "300px", fixedcenter: true, close: true, draggable: true, zindex: 4, modal: true, visible: false });
Then when I call my loadDialog() function from event on the page:
dialog.setBody("<iframe id=\"ifrDialog\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
dialog.hideEvent.subscribe($$F.endDialog);
dialog.render(document.body);
// Set iframe
$J("#ifrDialog").get(0).contentWindow.location.replace(url);
Then the tricky part was that I needed to resize the Panel and the IFRAME object AFTER the IFRAME finished loading its document. I got the width and height of the IFRAMES document and then resized the IFRAME to fit the document without scroll bars, then I resized the YUI Panel to contain the IFRAME correctly.
After this was done I make a call to:
dialog.center();
and this positions the YUI Modal Panel correctly in the center of the screen. Everything is great the first time. Originally when I wanted to close the dialog I tried to remove it from the document altogether by using the destroy() method but I kept getting a config null reference error so I simply hide the dialog now. The real problem arises when I try to show the dialog again for the same page. The Panel appears correctly as it should except now the browser window has vertical scrollbars when it shouldn't.
Is the Modal overlay growing for some reason? Is there some way to * reset * the Panel or remove it from the document so that it can be added dynamically when needed?
Also, same widget but different issue. I ran into another interesting situation after I had resized and repositioned the YUI Panel. The underlay did not grow to match the Panel's new size. I had to manually go and resize the underlay. Is there a better way to do this?
Thanks in advance for the help.
Daniel
have you thought about using:
$("yourpanel_ID").remove();
To remove the panel from the DOM,
this way, you will start with a fresh one anytimes.