How can I set into a script tag that a jquery mobile page, must have a behaviour like a dialog beside add to the main div data-role = dialog ?
You can add the data-rel='dialog' attribute in the script using id like
$('#linkToPage2').attr('data-rel','dialog');
Here are the examples
http://jsfiddle.net/q4jrY/6/ and http://jsfiddle.net/reddyprasad321/q4jrY/5/
Related
I am using display tag to display a table of records that is opened inside a dialog, but when i click on pagination link , it redirect to anothe page and hide dialog
I need to keep pagination in the same dialog
Thank's in advance.
I would suggest you use a iframe in the dialog box and within the iframe you use the displaytag.
JSP with dialog:
<sj:dialog>
<iframe src="path/to/actionwithdisplaytable.action" with="" height="">
</iframe>
</sj:dialog>
JSP with displaytag:
<displaytag:...>
<displaytag:column/>
</displaytag:...>
Thank you for your response, the problem is fixed by adding the requestURI, containg the name of myAction.
I am using Struts jQuery plugin. Problem is with <sj:tabbedpanel>.
I want to preselect the tab depending on the input while loading the page.
I know there is property selectedTab="1".
But I want it to change it while loading the page using jQuery.
In jQuery-UI plugin, there is function $("#tab").tabs('selected',2) which does that.
What is the similar function which does the same thing here.
Try this:
<sj:tabbedpanel id="tabbed" selectedTab="%{selected}"></sj:tabbedpanel>
selected should be a parameter, which decides the opened tab.
If you still wanna use jQuery, please check the api: jQuery Tabs API
here is the important part:
A series of events fire when interacting with a tabs interface:
tabsselect, tabsload, tabsshow (in that order)
tabsadd, tabsremove
tabsenable, tabsdisable
If you want to do this from javascript then use option to set selected tab.
$("#tab").tabs( "option", "selected", 2);
I load jQuery Mobile on my site when I am only on a mobile touchscreen device. When I do though. It messes up everything. For example, select menus don't work quite right, as well, the words "loading, loading, undefined" appear at the bottom of the page. I know I am missing something but do not know what.
Any ideas on what I could be missing?
Thanks
EDIT: Okay, So I took out all scripts that I am running except for jQuery and jQuery Mobile. I call jQuery first, then jQuery Mobile. It still breaks aspects of the site.
What it breaks:
- I cannot navigate to any other page via the navbar, if I click on a nav item, and look in the url, the correct url appears (with a # in it) like: /#/about-us/ Then, it just redirects to the home page and the page goes white
Select menus have weird results. It prints out whatever is in the select right beside it. And if you in landscape mode on the ipad and you click on the select, it sends you to the bottom of the page (weird).
it prints out 'loading' twice and 'undefined' once at the bottom of the page
All I have for scripts are jQuery and jQuery Mobile. I should also mention that I am using wordpress so it might have enqueued some other scripts (I have deregistered Wordpress' version of jquery and enqueued my own)
Anyone else experiencing these problems?
jQueryMobile replace your normal links with Ajax one, so every page can be loaded by the ajax, text on docs page:
(..) Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
If you want to disable single link to be loaded by the ajax you should write something like this:
<a href="/some_page" data-ajax="false" >link</a>
or do it globally:
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
jm also does replacement on other elements so you should try using data-role attribute, for example:
<select id="test" data-role="none">
to disable replacing this element.
For those like me where
$.mobile.ajaxEnabled = false;
did not work and the whole page layout seems still broken:
For me this one works (- set it inline before loading the jquery mobile file):
<script>
// Preload configuration
$( document ).on( "mobileinit", function() {
$.mobile.autoInitializePage = false; // This one does the job
});
</script>
Furthermore if you want to disable jQuery mobile automatic link and form handling via ajax, set (as dvk3 said) ajaxEnabled to false and pushStateEnabled to false as recommended:
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false; // Recommended is false, when ajax is disabled
For further information see: http://api.jquerymobile.com/global-config/
I'm using v1.4.5
Same happened to me by mixing mobile with other frameworks. Fixed issue but getting custom build of jQuery.mobile. My case was that I needed swipe for touch devices only so used custom min file and nothing was broken after that.
It really depends if you need jQuery.mobile or you need just a certain functionality, Widgets, events? Use custom version that you can build yourself.
You can make and download yours here : http://jquerymobile.com/download-builder/
I hope it worked for you too guys!
I have just started looking into using jQuery Mobile on a XPages project. I am unsure whether I should use XPages controls or standard HTML controls in certain circumstances.
For example, I need a simple "Save" button on a page. An xp:button does get rendered with the jQuery Mobile style. But how would I then apply attributes to it, such "data-icon" and "data-inline"?
Or should I be using a standard HTML tag in this case? If so, I lose the ability to code XPages simple actions to, say, save the data sources.
Thanks for any tips.
If you are using 8.5.3 you can use the attr property of the button to add the data-icon and data-inline tags.
<xp:button value="Label" id="button1">
<xp:this.attrs>
<xp:attr name="data-icon" value="marky"></xp:attr>
</xp:this.attrs>
</xp:button>
If not then you can use jQuery to add the attribute using $().attr('data-icon', 'whatever'). Remember though the clientID of the button will change through the interface and you will need to adjust for that. You could you my x$ function
http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages
Is there any way of using jQuery Mobile for only certain features such as toggle on/off switches but not have it take over the entire CSS?
You can use native form elements:
http://jquerymobile.com/demos/1.0rc2/docs/forms/forms-all-native.html
Related:
Tell JQuery Mobile not to add classes?
You can set this per element with a data-role="none" attribute on the element or bind to the mobileinit event like so:
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
Notice how you can add classes to the selectors.
From the docs:
Or, if you'd like to prevent auto-initialization without adding
attributes to your markup, you can customize the selector that is used
for preventing auto-initialization by setting the page plugin's
keepNative option (which defaults to [data-role="none"]. Be sure to
configure this option inside an event handler bound to the mobileinit
event, so that it applies to the first page as well as subsequent
pages that are loaded.
Docs on this can be found here: http://jquerymobile.com/demos/1.0rc2/docs/forms/docs-forms.html