How can I sequentially show multiple dialogs in jQuery Mobile (jQM)?
Opening two dialogs directly in sequence
$.mobile.changePage("#dialog1", "pop");
$.mobile.changePage("#dialog2", "pop");
results in a chained redirection to
index&ui-state=dialog&ui-state=dialog
isOpen from jquery UI doesn't work.
You could tie the change event to the first dialog (so when the user selects something) to maybe kick off the second dialog. Example: (Not working but maybe to get you thinking in the right direction) http://jsfiddle.net/LHG4L/18/
Related
My website uses the jQuery.validationEngine plugin to validate user forms. I really like the look and feel of the tooltips that pop up (ie. they fade in slowly and disappear when the user clicks on them). Here is an example of the validationEngine in use.
I would like to use the same tooltips to show hints or notifications when the user visits certain pages (for example, "you have a new message, click here to view"). So, they're not actually based on validation, but rather the page itself loading. I'm having trouble figuring out how to call the actual tooltips that the jQuery plugin uses, without having to validate anything.
How can I call the tooltip itself, without validating?
Thanks!
Try the plugin package} {des pack containing 2 plugins for notifications.
1. desNotifiers
2. desToolStip.
3. desWindows.
http://des.delestesoft.com:8080/?go=5
I have a lot of experience in Swing and WPF but not much in Javascript. I am learning as I go. The below is what I would like to do
Have a single HTML Page for End User
Preload Dialogs which will be displayed in response to user action
Currently I have all the divs for the dialog boxes load as part of the document and then in the document $(document).ready() function I call hide().
I then open and close them. All this works currently. However I have the following problems:
The divs sometimes momentarily appear on page load
It annoys me that all these dialogs that are not part of the index page have to be loaded as part of the index page. (I am a little OCD with Code Organization).
Thanks-in-advance,
Guido
You could start the dialog box divs off with a style attribute set to:
style="display:none;"
Which is what jQuery does when it calls .hide(), then you wont have to wait for jquery to be ready before the element is hidden, the CSS will automatically do it for you
The jQueryUI Dialog will ease your display issues. I've found it to be more stable than anything I could write myself. You can, using AJAX, load content dynamically and put that markup into a single dialog DIV. It's as simple as knowing the DIV's ID, setting the html based on the AJAX response and then calling .dialog() on the popup.
The jQuery sample jQuery UI Tab manipulation show's an example of how to make all tabs of a control closeable. But is there any way to make only some tabs closeable and let some stay uncloseable?
Yes, from the code sample you found, you just have to adapt it to use a different tabTemplate for uncloseable tabs (simply remove the close icon)
I have a toolbar in jquery mobile, made up of a bunch of links, which load "pop" modal dialog boxes on top of my javascript application.
Like this:
Info
Where the div with id="about" has a data-role="page". I'd like to open the same dialog from the code, perhaps as part of a button handler, but I can't find any way to do this.
This code does not work. It only shows the elements of the "about" page transparently ontop of my currect page (without styling). How do I do this?
$("#buttAbout").click(function () {
$('#about').show();
return false;
});
It looks like jQuery mobile's dialogs are quite different to jQuery UI. This should do what you want:
$.mobile.changePage('#about','pop',false,true)
The documentation for changePage is here. Basically, the first argument is the string to find the page you want (can be an element id, jQuery object, or a page URL), second argument is the page transition, third is the direction of the transition (false for forwards, true for backwards), and the final argument is whether you want the page URL to update after the transition. I think you'll also need to make sure that the data-role attribute is correctly set to dialog on the div for your dialog, in order to ensure the correct history/styling behaviour.
I'm working on a web app where in I need to add some values inputted by the user.
When the user clicks on the Add button he sees a form and these values then show up on the page. Now to implement this I can do two things
Use a modal window
Make a form inside the page itself(in a div) and toggle its visibility by the Add button.
If I go with the former solution is it necessary to use Ajax or I can add elements on the main page directly itself? Are there any jQuery plugins to accomplish the same?
As Diodeus mentioned, you don't need Ajax.
In answer to your other question about the plugins, have a look at jQuery UI Dialog for the dialog. Generating the form is pretty trivial. There's no need for a plugin there
You don't need to use Ajax to accomplish this. The difference in the two methods is simply whether you use an inline block of code that is hidden and displayed later, or whether you use an absolutely-positioned block of code doing exactly the same thing.
In most cases there is a single form that envelops the entire page. The rest is a matter of a CSS and positioning.