Displaying Extension Library Dialog box when page loads? - xpages

Is there any way to display an extension pages dialog box when my page loads?

Add a <xp:scriptBlock /> with the following client-side code as its value:
XSP.addOnLoad(function(){XSP.openDialog("#{id:dlgMessage}");});
...just be sure to place the component outside any refresh targets, or it will launch the dialog again after every partial refresh event with a target that includes it.

Try adding a dojo.addOnLoad() (in a xp:scriptblock) that displays the dialog using CSJS: XSP.openDialog()

Bruce,
You could use jQuery to 'push' the button on page load.
Try putting this clientside js code in your onClientLoad event
$(document).ready(function(){
$('a.btn').trigger('click');
});
You will have to load jQuery to use this if you don't already have it loaded. You might also be able to do the same thing with dojo.
EDIT: You might have to modify the selector (the tag and class in the parens line 2) above if not using bootstrap. I would give it a unique class so as not to 'push' any other buttons at the same time.

Related

Open an XPage from the Application Layout Banner

I'm using the Application Layout control and have set up a basicLeafNode within the bannerUtility links. I wanted to open another XPage (MeineAnmeldung.xsp) whenever that link 'Meine Anmeldungen' is clicked.
<bx:this.bannerUtilityLinks>
<xe:basicLeafNode
label="Meine Anmeldungen">
<xe:this.rendered><![CDATA[#{javascript:context.getUser().getRoles().contains('[CreateAnmeldung]')}]]></xe:this.rendered>
<xe:this.onClick><![CDATA[#{javascript:context.redirectToPage("MeineAnmeldungen.xsp")}]]></xe:this.onClick>
</xe:basicLeafNode>
but, as I have discovered, the onCLick event on the basicLeafNode is strictly CSJS, which I assume is the reason why I'm having issues.
Am I trying to do this at the wrong place? To be honest, I don't understand the difference between all these different bars at the top: Placebar, Search Bar, Title Bar, mastHeader. No idea which does what, and I'm trying to have a very simple UI without any clutter.
Or is there a way to redirect using CCJS? Perhaps by recalculating an URL, which I also am not sure about how to calculate.
Use a pageTreeNode instead. Here's an example:
<xe:this.bannerUtilityLinks>
<xe:pageTreeNode label="Meine Anmeldungen" page="/MeineAnmeldungen.xsp.xsp"></xe:pageTreeNode>
</xe:this.bannerUtilityLinks>
You can redirect via CSJS using location.href=.... CSJS is all the onClick event of the basicLeafNode can do.
The Application Layout control itself has an onItemClick event on the Events tab. That will allow you to trigger SSJS and use context.getSubmittedValue() to check the submitValue property (you'll need to add that) for the basicLeafNode.
See TitleBar tabs in ApplicationLayout control (extlib) generating invalid code

Pagination inside bootstrap modal window

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.

moving from javascript window.open to Rich:ModalPanel

In my web application currently there are many pop up windows made by various JS function which i would like to replace with Rich:ModalPanel (I'm using Myfaces 2.0.12 and RichFaces 3.3.3). Below is a typical example i like to replace:
window.open("<%=basePath1%>jsp/custhistory.faces?userid="+pk);
where pk is the value retried from a hidden input such as <h:inputHidden id="userPk" value="#{1234}"/> inside the javascript function and then added to the end of the url above.
Looking at few RichFaces ModalPanel examples (and demos) i can't figure out how i can make the above work using ModalPanel. Can someone please provide an example or a link to a resource o
I have been using Richfaces 4, but the same theory should apply.
The modal panel is essentially a div that can be shown or hidden, so you could add a <ui:include> in there if you specifically need (or want) the panel to be a seperate file.
The modal panel is rendered as part of your page, but is styled as display:none I believe. If this is triggered by a client action you can call the Richfaces API to show the panel on command.
For instance instead of a command(Link|Button) triggering Richfaces.$('elName').show() it could trigger your js function which sets and values/params your modal panel needs and then call .show() itself.
Note: IE and firefox had a truly modal popup. This is not truly modal and javascript will process in the background, and if you do not give focus to the popup panel if the user types it will interact with the application in the background.
I had used a modal js popup to prompt a user with a yes/no question int his type of idiom
if(askUser("some question?")=='yes'){
//some code to do if yes
}else{
//some code to do if no
}
Depending on how generic you want this popup, that is not really possible without using an event that is fired and defining an event handler for that event to handle the rest of the function.

how to use the native control plugin in PhoneGap to load a different page into the UIWebView

I'm using the NativeControls plugin to create a tabbar - http://d.pr/vBJZ
Apparently, on first load, the tabbar has the onSelect event attached to them and i can refresh the webview just fine by doing window.location="http://someremotedomain.com".
But once the webview refreshed with the new external page - it seems the tabbar loses its onSelect event.
I suppose my real question is - why does the tabbar buttons loses its onSelect Event when the webbview starts to show a different (remote/external)page?
Does that mean that i have to re initialize the NativeControls on every new page? that isn't possible because the page im showing is coming from an external source, which doesn't include the phonegaps js related files.
My 2nd question - probably would help me dilemma, is there any way to grab the UIWebView control?
okay nevermind i figured out:
the javascript callback function doesn't exist anymore on the next page
yes you can - but i don't know in the js file but in the plugin/obj-c you can access the webview

jQuery Mobile - Dialogs without changing hash

I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.

Resources