How to override panel close event - jquery-mobile-panel

I have a jquery mobile panel menu (open) that has links (data-ajax=false) and want to override the default behavior of the panel closing before it navigates away. All of my pages have the panel menu open by default, and it looks bad when they automatically close every time I navigate only to appear open again on the destination page... is there a way to stop the close event?

I just ran into the same issue, and found something that seems to work - instead of using data-ajax="false", just put target="_self". jQuery Mobile doesn't load pages with AJAX if a target is specified, and "_self" is just the default. It also doesn't close panels like data-ajax="false" does.

Related

How to navigate to different pages in a chrome app without creating a new window?

My Chrome app contains two pages A1.html and A2.html. How can i navigate from A1.html to A2.html without creating a new window?
The page A1.html contains 10 div's and A2.html contains a back link to A1.html. My need is to load directly a specific div of A1.html when the back link in A2.html is pressed.
You can't navigate within a Chrome App window (Content Security Policy), although you can navigate to an external browser if you set the target attribute of the <a> element to "_blank". What you have to do, if you really want links to appear to work normally, is intercept the click on the link by setting an event handler and then changing the DOM from within JavaScript.
One easy way to change the DOM from JavaScript if you have an HTML fragment is to use the insertAdjacentHTML API (Google it for documentation).
While this might seem awkward, even limiting, think of a Chrome App as an app, and not a web page. After all, with a native Mac OS X or Windows app, you wouldn't expect to entirely change the UI in a window by simply clicking on a button, right? You'd expect that the app would do that via the native API. Same the Chrome Apps.
Alternatively, you can position a webview in the Chrome App window, and then HTML within the webview works normally, because that really is a "web view."

Show popup/window in a gwt tab

Is it possible to show a popup only in a certain gwt tab or a panel in that tab?
I've found methods to show a popups over the whole page, but not only in specific tabs.
When you switch the gwt tab, the popup should not be visible anymore and new popups should be able to be created, which again are only visible in the switched to gwt tab. Switching back to the other tab should then show the first popup again.
Optionally the rest of the tab, which is not covered by the popup, should not be clickable.
Are there any native methods for this? The gwt Popup Panel only seems to create popups for the whole page.
Edit: I've tried using smartgwts Window which seems to work just the way I want it to. When I switch the gwt-tab, the popup is no longer visible and returns when I switch back. The only problem is, that it isn't displayed right. The frame is placed on the far left side of the browser tab, while the content is displayed on the far left of the gwt-tab. If I move the content, the frame moves too. The frame is visible over the whole browser tab, while the content disappears if I drag it over the gwt-tab edge.
I guess it's because I'm adding a Window to a gwt-Panel. Is there any way to fix this without changing everything to smartgwt?
Not exactly, I think.
But, you can do something in the tab events, like hide the popup in tabs that it doesnt belongs. To avoid the lag of show/hide the popup, you can do this in the BeforeSelectionHandler, like this:
getView().getTabPanel().addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>()
{
#Override
public void onBeforeSelection(BeforeSelectionEvent<Integer> event)
{
showPopupupsForTab(event.getItem());
}
});
In showPopupupsForTab you can show the popups for this tab (you can handle this with a map or something) and hide the others...
Something like this.
Hope it helps.

Wicket: Form in a modal window

I have written an panel which supports file / image uploads. So the panel is a simple plain form. The panel works in a normal Wicket page.
What I would like to do now:
I would like to use the panel in a modal window. The panel is displayed correctly. However, when I submit it / upload a new file, my browser prompts whether or not I would like to leave the page. The page which contains the DIV of the modal window is a form itself.
My research didn't turn up any interesting information about forms in a modal window expect it has to be self contained (nested form). I think this prerequisit is met.
Is there any information available, what I have done wrong? Any tutorials?
You need to use an AjaxSubmitButton (or AjaxSubmitLink) to submit your form. The problem is that the modal window requires Ajax communication. If you use the window to just reprocess a whole page and don't care about the Ajax'ness, then you can override the ModalWindow#getCloseJavaScript() method.
As Martijn pointed out, the modal window relies on AJAX communication. So use AjaxSubmitButton or equivalents. When components in the main window need to be updated after the submit of the modal window, this can be done by adding them to the AjaxRequestTarget.
However when it comes to multi part forms (file uploads) this does not work quite. Apparently multi part doesn't play nicely with AJAX. One has to do an IFrame trick as pointed out e.g. here: http://www.dooriented.com/blog/2008/04/23/wicket-ajax-like-file-upload-on-a-modal-window/

GWT-Google web Toolkit-DialogBox

I have doubt regarding GWT .In Gwt if i click one button than it shows one dialog box at th same time the form outside the dialog box disabled.What component can be used for this task?
Thanks in advance
So, you want to open a popup dialog box, and at the same time disable the rest of the page until the user closes the dialog box?
If so, you can simply use gwt's DialogBox.
Use the constructor with the autohide flag set to false, and the box will not close until the user responds, thus disabling the rest of the page. If you want to make this even more clear, use the glass effect:
yourBox.setGlassEnabled(true);
You can also use the PopupPanel directly and build your own custom dialog box.
Now, if I got it wrong and you want to disable the form so it remains disabled after the popup, just disable it in the onClick handler of the button that opens the box.

Ajax Control Toolkit - Use client-side button to activate tab

I'm using the TabContainer/TabPanel components of the Ajax Control Toolkit.
I'd like to hide the tabs themselves and use a button elsewhere on the page to activate (bring to the front) one of the tabs without posting back to the server.
I can show and hide the tabs by grabbing their clientIDs and manually setting the visibility and display styles.
But is there a javascript function I can call to do this and perform whatever magic happens behind the scenes when I click an actual tab?
Example:
var tab = $find(“tabContainer’s ClientID”);
tab.set_activeTabIndex(1); // active the second tab panel
tab.getFirstTab().set_enabled(false); // disable the first panel