No event on left click for button in jQueryMobile app - jquery-ui

i am building an mobile application for sfdc.
i am using apex and visual force and jquery mobile js to create my app.
i have used apex:command button and apex:commandlink.
but when i click those buttons the event is not generated , whereas when i right click on the button the button functions as required
<apex:commandLink value="Save" action="{!HRSave}"/>
<!--<apex:commandbutton value="Save" style="font-style:italic" action="{!HRSave}"/>-->

Is commandLink working but commandButton not working?
You might try either passing it via JavaScript to an actionFunction component or look into JavaScript Remoting. Remoting is excellent with jQuery.

Related

JQuery Mobile ajax enabled causing client side validation not working

I am learning the JQuery Mobile framewrok and is using VS 2013 for my new project. I created a MVC 4 JQuery Mobile project. From the project I got out of the box, I click on the Login link and on that login page, I click on the Login Button, it shows the expected error messages. I want my project to be ajax enabled so I set the $.mobile.ajaxEnabled = true; and debug in VS, it hits the break point I set in the Login action in the AccountController so the client-side validation didn't work and got to the post on the server-side.
Is it by design that I can't use the built-in client-side validation when ajaxEnabled is set to true? Or is there some settings that I need to set? I need my project to be jax enabled and would like to use the built-in client side validation if possible and don't have to write custom jquery validation code.
Found the answer. add the below code to the on pageshow event
$.validator.unobtrusive.parse(".ui-page-active form");

asp.net disabled jquery dialog modal button after postback

I'm using jQuery Dilog Modal in ASP.NET page but when the page do postback the button that open the dialog modal loses the jQuery behavior...
I tested the button inside and outside of UpdatePanel, but I got the same error...
How can I maintain the jQuery after postback?
Try wiring up your button inside pageLoad() instead of $(document).ready(), which is native to .NET and will fire on each postback.
function pageLoad(sender, args)
{
$('#button').click();
}
Beware that pageLoad() is not a permanent replacement for $(document).ready() when using ASP.NET, since they behave very differently, but in this case it just might solve your problem.

jQuery Mobile via "Download Builder Tool" -- Can't Make it Work

I want to use just the slide transitions / AJAX navigation component of jQuery Mobile. On jQuery Mobile's website they have a "Custom Builder Tool" which lets you select just the "AJAX Navigation System" (and it auto-selects associated stuff like transitions).
http://jquerymobile.com/download-builder/
This yields some custom JavaScript and CSS files. For the life of me, I can't get this to work on a webpage. If I include these custom files, then add data-transition="slide" to an anchor element, nothing happens. If I include the full jQuery Mobile library it works perfectly (but screws up the styling of my mobile site). How can I make this work? Maybe one needs to initialize the custom jQuery Mobile manually? I can't find anything in the docs about this. Help!
Here's how I got this to work:
I included the latest jQuery Mobile js but used the stripped down css from my custom JQM build (using the Custom Builder tool).
data-role="page" was added to page content containers. Some scripts called in needed to be moved to now load from within the content containers. Now transitions work as expected.
I hope this helps somebody.

JQuery Mobile - always show back button, regardless of entry point

I'm making a mobile site with JQuery Mobile and need to allow entry to any section and still allow the user to navigate backwards.
Example to show what I mean. The JQuery Mobile demo site starts at:
http://jquerymobile.com/demos/1.0a3/
If I click on "Toolbars" I reach:
http://jquerymobile.com/demos/1.0a3/#docs/toolbars/index.html
There is a back-button which leads to the previous site. But if I manually enter the above toolbar URL into my browser the page will not have a back button.
How can I accomplish to always have a back button, while still keeping the nice AJAX backed page loads? The server back-end will generate all html-pages so it's fine to "hard code" what the previous section is.
If it's fine to hardcode, then just add
<a href="hardcodedprevious" data-icon="back" />
to the header

jqueryui without javascript

Does anyone use jQueryUI (such as the CSS framework part) without the jQuery component? If you were catering for users who don't have javascript or who have it disabled etc
A particular scenario would be the dialogs which are so brilliant and simple...without javascript its just a div though...would a potential solution be to have the dialog div with a class that positions it absolutely and above other elements and then to remove that class when jQueryUI sets up the dialog...so that if javascript cannot run the dialog still has the class?
or would you use the css framework to create the dialog manually perhaps...
I have used jQuery UI's classes to style things 'consistently' when JavaScript is turned off. You just use the classes that jQuery UI applies to elements, and include the jQuery UI stylesheet and resources.
For example, if you had
This is a button
And you ran the jQuery UI JavaScript:
$("#abutton").button();
It would alter the markup to:
<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
<span class="ui-button-text">This is a button</span>
</a>
Giving you a nice jQuery UI button. But only once the JavaScript has run will this be applied. If a user doesn't have/allow JavaScript, then you'll get an ugly link being used. Instead, you should use the jQuery UI classes at the start:
This is a button
It will have the basic jQuery UI styling before the JavaScript runs (the structure is different though - the span isn't there, and if you had the span initially it adds another one anyway, which IMHO is a bug). The thing is that you want the JavaScript to run still, because it adds other things, such as mouseover effects (and the span mentioned earler), so that users that DO have JavaScript get the full experience, but you also want to use jQuery UI classes by default because you want some consistent theme (even if it's not 100% perfect).
For more info about their CSS framework, check out http://jqueryui.com/docs/Theming/API.
If you want to have it to NOT use JavaScript, you'd have to have:
Initial page, does a post back
Server decides a popup needs to be done, renders the view with a dialog containing all the relevant dialog classes set.
User clicks button on popup, performing another post back.
Server renders view without the popup.
It is ugly, but you can't do dynamic HTML without scripting, right...
I use the CSS all the time outside of jQueryUI; I find it provides a much more consistent look-and-feel.
As for the rest of the question...whatt?!
and then to remove that class when jQueryUI sets up the dialog
How do you plan on having jQueryUI run ("set up the dialog") without JavaScript being enabled? If you put the dialog up without JavaScript, it won't be able to move or close; you'll be stuck with a giant div in the middle of the screen.

Resources