In my mobile app, using jQuery Mobile...
I would like to make a simple button execute a simple javascript function on click. No page transitions, nothing special like that.
I understood I can eliminate the page transitions by doing return false or preventDefault()
But the problem is the button sticks with the "active" state, i.e. highlighted blue if you use the general theme. I'm wondering how I can remove that after click (or tap, etc).
Thanks.
You can disable the 'highlighted blue'-state in the 'mobileinit'-event before loading jQueryMobile-script:
<head>
<script>
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'unused';
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
Now, when you click on a link, no class will be added after the click is performed. You will still have the 'hoover' and 'down' classes.
Update:
This question and the hacks suggested are now a bit outdated. jQuery mobile handles buttons quite a bit differently than 3 years ago and also, jQuery mobile now has several different definitions of "button". If you want to do what the OP was looking for, you might now be able to avoid the issue by using this:
Step 1:
<button class="ui-btn myButton">Button</button>
Alternatively, you could also use jQuery mobile input buttons:
<form>
<input value="Button One" type="button" class="myButton">
<input value="Button Two" type="button" class="myButton2">
</form>
Step 2:
Then your standard jquery on callback:
$(".myButton").on("tap", function(e) {
// do your thing
});
If you are using a button or a tab, or whatever, that has the "active" class applied to it (the default is ui-btn-active), the old answer may still be useful to someone. Also, here is a fiddle demonstrating the code below.
Selectively removing active state:
As demonstrated in another answer, you can disable the active state for all buttons on all pages. If that is acceptable for the project in question, that is the appropriate (and simpler) solution. However, if you want to disable the active state for some buttons while preserving active states for others, you can use this method.
Step 1:
$(document).bind('mobileinit', function() {
$(document).on('tap', function(e) {
$('.activeOnce').removeClass($.mobile.activeBtnClass);
});
});
Step 2:
Then add the activeOnce class (or whatever you want to call it - it's a custom class) to the buttons that you don't want to highlight when clicking.
And as is usual when binding anything to mobileinit, be sure you place your bindings - and perhaps better, all your javascript code - below the jQuery script and above the jQuery-mobile script.
<script src="js/jquery.js"></script>
<script src="js/my_script.js"></script>
<script src="js/jquery.mobile.js"></script>
Do NOT set the activeBtnClass to '' as suggested, this will cause errors when closing dialogs and the pageLoading function.
The method described does work, but cannot be set to null, the activeBtnClass variable is used as a selector, so set it to a non-existent class to get the same effect without the error.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'aBtnSelector';
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
This works well to remove the highlight from the buttons while keeping the active state on other elements.
you can just do it via css instead of java:
eg: (you get the idea)
#cart #item_options .ui-btn-active, #cart #item_options .ui-btn-hover-d, #cart #item_options .ui-btn-up-d, #cart #item_options .ui-link-inherit{
background:inherit;
color:inherit;
text-shadow:inherit;
}
What I do is force the buttons to revert to inactive state before a page changes.
//force menu buttons to revert to inactive state
$( '.menu-btn' ).on('touchend', function() {
$(this).removeClass("ui-btn-active");
});
If you want to support non touch devices you should add timeout.
$('.btn' ).on('touchend click', function() {
var self = this;
setTimeout(function() {
$(self).removeClass("ui-btn-active");
},
0);
});
I have spent the good part of a day and night finding the answer to this problem mainly occurring on an android running phonegap. Instead of the standard JQM buttons I am using custom images with :active state in CSS. After following the link to the next page, then clicking back, the button would just stay in the :active state. I have tried adding classes and removing classes and various other suggestions and nothing has worked.
So I came up with my own little fix which works a treat and may help anyone else that is sitting here stumped. I simply call this snippet of code on 'pagecontainerchange' using data.toPage[0].id to only call it on the page where the active state stuck is occurring. Just make sure to wrap your buttons in a div, in my case called "themenu".
function ResetMenu() {
var menuHtml = $("#themenu").html();
$("#themenu").empty().html(menuHtml).trigger("create");
}
This works for a button in the JqueryMobile headerTab
<style>
.Foo {
color: #FFF !important;
background: #347b68 !important;
}
</style>
<div id="headerTab" data-id="headerTab" data-role="navbar">
<ul id="header_tabs">
<li>name
</li>
</ul>
</div>
Related
Problem: When I activate jQueryUI tooltip it prevents another script on the page from working.
Description: I have a floating button on a page:
<div id="buttonTOC">
Table Of Contents
</div><!-- End button <div> -->
This is used by the following script to open a hidden div:
jQuery(document).ready(function($){
$("div#buttonTOC").click(function() {
$("div#table-of-contents").animate({height:'toggle'},500);
});
});
This works correctly but if I add a script to use tooltips then it stops functioning and nothing happens on click. The tooltip does work as expected.
I've tried some experiments to get this working including the following attempt to disable 'tooltip' on the div in question but this doesn't make any difference.
jQuery(function($) {
$( 'a#buttonText' ).tooltip({
track: true
});
$('#buttonTOC *[title]').tooltip('disable');
});
I would suspect a conflict between the scripts but then again I assume that something like a tooltip would be able to work regardless of the presence of other scripts.
I'd appreciate any guidance on how to implement this successfully.
Thanks
Your code has a typo:
$( 'p#buttonText' ).tooltip({
track: true
});
It should be a#buttonText, not p
Aside from that, there seems to be no problem with the script.
I've a big problem with a jQuery Mobile Application:
I'm using custom functions (they are triggered by onClick) to switch the page with currentPage.
It only happens on Android-Devices on sites in which has changed (due to ajax requests) with the integrated browser. iOS and Chrome works nice.
After clicking on an element, the animation started but just before it ends, it switches back to the old page. After a half second, it switches back to the new.
I made a movie of the bug here: http://www.youtube.com/watch?v=sXxvVUxniNg
Thank you very much
Code (CoffeeScript):
class Guide
#categoriesLoaded = false
#loadSearch: ->
$.mobile.changePage $("#guide"),
transition: 'slide'
changeHash: false
if !#categoriesLoaded
#categoriesLoaded = true
GuideApi.getCategories (data) ->
output = Mustache.render $("#tmpl-guide-categories-select").html(),
categories: data
$("#guide-search-category").append output
$("#guide-search-category").val($("#guide-search-category option:first").val());
window.WgSwitchGuide = ->
Guide.loadSearch
I was having the same issue. And I tried everything, I finally end with the solution. What I found was the error was principally within the browser. So I set the configuration of the pushStateEnabled as false. I did it by doing the following, adding this script.
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
</script>
It should be add before the jquery-mobile script is call, for more information you could see it on JQuery description
And it solved the problem no more jumping back.
I was having the exact same issue on both android and ios. For me, it was happening for heavy pages, i.e., pages with complex elements etc. Looks like you are using "slide" transition, which was what I was using as well. Taking out the page transitions (i.e., $.mobile.changePage("page.html", { transition: "none" })) for those pages resolved this issue for me. Hope this helps.
If you want to retain the transition, you can try preloading the page first when the previous page is being shown, by using the $.mobile.loadPage, and then show the transition. I am myself exploring this route, but it is probably worth trying.
Edit: OK - I explored the last suggestion and this doesn't seem to be working. Will stick with the first option.
Would you try to add the event stopPropagation and preventDefault methods on the first page's click event? This way the default action of the click event will not be triggered. Moreover the stopPropagation prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
event.stopPropagation();
event.preventDefault();
Example:
$("p").click(function(event){
event.stopPropagation();
event.preventDefault();
// change page
});
After trying for weeks to find a solution to this, I ended up doctoring the JQM library to disable page transitions one right after another. It's not a good solution, but it's the only thing I could get to work.
I was getting pages jumping back on both $.mobile.changePage and on anchor links. I used the slide transition, but removing it did not fix the problem. Setting pushStateEnabled to false did not work either. The jumps were happening on all devices and browsers (that I tested, anyway).
So here's what I did to the JQM library (v1.3.2).
Before the $.mobile.changePage function is defined, I added:
var justChangedPage = false;
Then within the function there's a line that goes:
if ( pbcEvent.isDefaultPrevented()) {
return;
}
which I changed to:
if ( pbcEvent.isDefaultPrevented() || justChangedPage) {
return;
}
Then right after this part of the $.mobile.changePage function:
if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
settings.dataUrl = documentUrl.hrefNoHash;
}
I added:
justChangedPage = true;
setTimeout(function() {
justChangedPage = false;
}, 500);
(Putting that earlier in the function didn't work -- all that stuff executes more than once within a single page transition. And half a second seemed to be the minimum timeout that prevented the page jumps.)
I hope this helps someone even if it is a hack...
What is your JQM and Android version?
I'm not sure If I understand correctly. I think transition flicker maybe come from the following assumption.
Heavy page DOM transition.
Using "translate3d" somewhere in css file.
Not using "H/W Acceleration" feature. Enable by add this line to your AndroidManifest.xml in <application>
android:hardwareAccelerated="true"
I encountered exactly the same behaviour and it seems that few people are having the same issue. At first I thought it is caused by jQuery mobile library. Later on, I manage to find where the problem came from and it is a bug in my own code.
I made a demo to explain the issue.
http://jsfiddle.net/pengyanb/6zvpgd4p/10/
Hopefully, this can be hint for people having the same problem.
$(document).on('pagebeforeshow', '#page2', function(){
console.log('Page2 before show');
var htmlGeneratedOnTheFly = '<ul data-role="listview" data-inset="true">';
for(var i=0; i<4; i++)
{
htmlGeneratedOnTheFly += '<li><a>Random html element</a></li><li data-role="list-divider"></li>';
}
htmlGeneratedOnTheFly += '</div>';
$('#page2UiContent').empty();
$('#page2UiContent').append(htmlGeneratedOnTheFly);
$('#page2UiContent').trigger('create');
//////////////////////////////////////////////////
//The following section is where the bug is generated.
//Each on "page2 before show event" will add a OK Button click handler.
//The handlers never get cleared.
//More and more handler is added to the Page2 OK button as pages going back and forth.
//Open the browser's console window to see multiple "Page 2 OK Button clicked!!!" lines on one button click.
//To fix the bug, move the following section out of the $(document).on('pagebeforeshow', '#page2', function(){});
//////////////////////////////////////////////////
$('#page2OkButton').click(function(){
console.log("Page 2 OK Button clicked!!!");
$.mobile.changePage('#page1', {transition:"flip"});
});
//////////////////////////////////////////////
//////////////////////////////////////////////
});
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
<h5>Demo Page 1</h5>
</div>
<div data-role="main" class="ui-content">
<h2>jQuery mobile changepage jumps back to old page demo</h2>
<p>Click "Go To Page 2" button to go to page2</p>
<p>On Page2 click Ok Button to come back to page1</p>
<p>Keeping going back forth between two pages for few times.</p>
<p>Eventually, you will find that clicked on "Go To Page2" button to flip to Page2 but it soon jumps back to page1 automatically. </p>
<h2>Please read the comments in the javascript for explaination</h2>
Go To Page 2
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
<h5>Demo Page 2</h5>
</div>
<div id="page2UiContent" data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed" style="text-align:center;">
<div data-role="navbar">
<ul>
<li><a id="page2OkButton" class="ui-btn ui-icon-check ui-btn-icon-left">OK</a></li>
</ul>
</div>
</div>
</div>
I have jQuery UI tabs set up, but a problem that I'm having with links to different pages is that they load all contents of the page into the tab. This includes the footer, header, and other navbars that I don't want in the tab. What if I would only like to load a single ID from that page?
My tabs are set up this way:
<div id="mytabs">
<ul>
<li>Awesome page</li>
<li>Foo</li>
</ul>
</div>
Nothing much going on in the jQuery...
$(function() {
$( "#mytabs" ).tabs();
});
Let's say this is the html of "awesomepage" (that the first link targets):
<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>
...And I only want the tab to load #awesomeness from the page. How would I go about doing this? I've read into some guides that do that by adding a data-target="#youridhere" attribute to the HTML, but I'm still confused on how to implement the javascript. It seems like this is a convenient solution, as I won't be targeting the same ID in every page. Any clues on how to get the javascript working?
Thanks in advance!
The function that allow to load partial code of the response is the $.load() function.
Unfortunately, the tabs() feature does not use this function but use $.ajax instead.
You can try this solution:
You can try to stop the default processing on the beforeLoad callback and manage your ajax call with the $.load() method.
(base on the 1.9 documentation, you may should adapt)
$('#tabs').tabs({
// Callback run when selecting a tab
beforeLoad: function(event, ui) {
// If the panel is already populated do nothing
if (ui.panel.children().size() > 0)
return false;
// Make your own ajax load (with fragment feature)
ui.panel.load(ui.tab.attr('href') + ' #yourFragment');
// stop the default process (default ajax call should not be launched)
return false;
});
NOTICE: I'm not sure about extracting the URL with ui.tab.attr('href'), check before what object is ui.tab, but it should be easy to retrieve the href parameter.
Good luck
Got the solution :) Using one of the answers as a reference point, the tabs can now load a single element specified in the data-target attribute. Here is the modified version:
$(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});
I'm pretty new to JQuery and JQuery-UI, but I'm having fun with it so far. My Javascript skills are a bit rusty, however, so some things are giving me a bit of a headache.
I'm using Jquery UI to theme my site, and I have several buttons that I want to set up with the appropriate theme. Each button has a different icon, so I ended up with a bunch of statements that look like this:
<script type="text/javascript">
$(function() {
$('[id$="butFind"]').button({
icons: {
primary: 'ui-icon-search'
}
});
});
$(function() {
$('[id$="butUpdate"]').button({
icons: {
primary: 'ui-icon-disk'
}
});
});
$(function() {
$('[id$="butCancel"]').button({
icons: {
primary: 'ui-icon-cancel'
}
});
});
// and so on for several more controls
</script>
I'm using the [id$=] ("ID ends with") selector as the controls that I'm theming are ASP.NET LinkButtons on a Content Page based off of a Master Page, and they get renamed when rendered to something like "ctl00_ContentPlaceHolder1_butFindSku". The ASP.NET markup for the buttons is pretty simple, and looks like:
<asp:LinkButton ID="butUpdate" runat="server" Text="Update"
CommandName="Update" />
<asp:LinkButton ID="butCancel" runat="server" Text="Cancel"
CommandName="Cancel" />
The multiple functions to theme the buttons and designate the appropriate icons seems rather awkward to me. I keep thinking that I should be able to either loop through some defined array of controls and icons, or tackle it in some other way that would make it easier for me in the future, particularly when I'm adding other controls to the page.
Suggestions on better ways to set this up are appreciated! Thanks!
I would have suggested to associate the icons with the buttons using HTML5 data- attributes, but since you're using ASP.NET web controls it will be more complicated than it's worth.
You can, however, store the id suffixes and their respective icons in an object literal, and use $.each() to iterate over it:
$.each({
butFind: "search",
butUpdate: "disk",
butCancel: "cancel"
}, function(suffix, icon) {
$("[id$='" + suffix + "']").button({
icons: {
primary: "ui-icon-" + icon
}
});
});
I am using Jquery Ui panels.([http://code.google.com/p/ist-ui-panel/][1])
While loading the application, everything is fine like collasible, draggable etc.
But i want to make the panel collapsible while clicking on some links.fo ex:
This code will run when the form is loading....
$('#myNews').panel({
'collapsible' :true,
'stackable':false,
});
The html
<div class="panel" id="myNews" >
<h3>Poll</h3>
<div>Some content</div>
</div>
I want to make 'collapsible' :false when clicking some link.... like this
$('#click1').click(function() {
$('#myNews').panel({
'collapseType':'slide-right',
'collapsible':false,
});
});
the code is running without any error, but the '#myNews' not getting affected when clicking the '#click1' link.
Need some help pls.
Thanks in advance
I'm the one behind ist-ui-panel, and Jesse was right — by now the only way for you is to use 'destroy' method somewhat like:
$(document).ready(function(){
$('#click1').bind({
'click': function() {
$('#myNews').panel('destroy');
$('#myNews').panel({
'collapsible' :true,
'collapseType':'slide-right',
'stackable':true
});
}
});
$('#click2').bind({
'click': function() {
$('#myNews').panel('destroy');
$('#myNews').panel({'collapsible': false});
}
});
});
Notice, you should explicitly destroy previous panel before making a new one.
If you read the uncompressed source code for that widget, it appears that what you are doing is only meant to be used to create panels, not to modify them afterward.
The underlying software is either buggy or I don't understand it. So you'll have to hunt down some bugs, but you can use the 'destroy' method on that widget to reset the div completely, and then make it a panel again, like so:
$('#myNews').panel("destroy");
$('#myNews').panel(...
As I said, it's buggy or I don't quite get it - there's an error raised by the destroy call which you have to catch, and subsequent calls to make new panels do make panels, but they aren't completely correct.