How to disable the button in coding using jquery mobile?
<div data-role="button" id="val">Value</div>
[Note : I want to disable the button in the coding, not in the design time]
Live Example: http://jsfiddle.net/LHG4L/5/
HTML:
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
JS:
$('#theButton').attr('disabled',true);
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
You can and should disable it using both jquery and jquerymobile:
$('#theButton').attr('disabled', true);
if ($('#theButton').button) $('#theButton').button('disable')
You can disable button using the attribute class="ui-disabled" as follows:
Link button
Related
does anyone know of a way to make only a certain part of a collapsible widget actually toggle the collapsible part? I have been trying to figure this out for hours and can't seem to get it.
Basically, I don't want a whole <li> to trigger the expand/collapse, but only a small area on the right.
Thanks.
This is my solution:
block default events
create a clickable element on the right side
manage expand/collapse status
HTML
<div data-role="page" id="page">
<div data-role="content">
<div data-role="collapsible" data-inset="false" data-collapsed="true">
<h1>Title <span class="clickme">Click me</span></h1>
<h5>Content</h5>
</div>
<div data-role="collapsible" data-inset="false" data-collapsed="true">
<h1>Title <span class="clickme">Click me</span></h1>
<h5>Content</h5>
</div>
<div data-role="collapsible" data-inset="false" data-collapsed="true">
<h1>Title <span class="clickme">Click me</span></h1>
<h5>Content</h5>
</div>
</div>
</div>
JavaScript
$(document).on("pagecreate", "#page", function()
{
$("[data-role=collapsible] a").on("click", function()
{
event.preventDefault();
event.stopPropagation();
});
$(".clickme").on("click", function()
{
var element = $(this).closest("[data-role=collapsible]");
if (element.attr("data-collapsed") == "true")
{
element.attr("data-collapsed", "false");
element.collapsible("expand");
}
else
{
element.attr("data-collapsed", "true");
element.collapsible("collapse");
}
});
});
JSFiddle
So there were a few things I was doing incorrectly, helpfully pointed out by Sga.
You can't use vclick. For whatever reason, this jQM plugin isn't using an established jQM event to handle it's stuff. I was previously listening to the vclick event:
$parent.on('vclick', '[data-role=collapsible] a', function() {});
You can't bind the thing you want to prevent default on on a parent. For example:
$parent.on('click', '[data-role=collapsible] a', function() {});
That doesn't work, you have to bind it after the elements are rendered a la:
$('.collapse-target', $list).on('click', function() {});
After doing all that, which totally isn't optimal, I was able to achieve the effect I wanted. It's too bad this feature wasn't included out of the box for the collapsible widget. Hopefully this helps someone.
JQM 1.3 Iscrollview 1.3.1
I have a list of links to events using data-iscroll. Each event is also a list (title/date-location/description).
Each time I click on the event list, the event is displayed. If I scroll down the content, when I go back to the event list and then click on another event, the view scrolls to where the previous view was stopped.
I've successfully stopped this by launching an empty() on the event content and then calling updatelayout on the back button of the event content :
$("#bhome").on('vclick', function(e) {
$('#econt').empty().trigger('updatelayout');
$.mobile.loading('show');
e.preventDefault();
$.mobile.changePage("#page1");
});
But, of course, android users don't use a back button and use the back key instead.
I've tried to empty() and updatelayout on the pagebeforehide event but apparently, the position is saved before that event happens :
$('#event').on('pagebeforehide', function(event, data) {
$('#econt').empty();
$('#econt').trigger('updatelayout');
$('#escroll').trigger('updatelayout');
});
I've also tried to use the silentscroll function but it's not working either :
$(document).on('pageshow', '#event', function(){
$.mobile.silentScroll(0);
});
How can I make sure that on viewing a new event, the position is back to the top ?
Here is a snippet of my index.html file :
<div id='container'>
<div data-role='page' id='page1' data-theme="c" style="background: black;">
</div>
<div data-iscroll style='background-color:#ddd;'>
<ul id="el"></ul>
</div>
<div data-role='footer' data-position='fixed' data-theme="a" data-tap-toggle="false">
</div>
</div>
<div data-role="page" id="event" data-theme="c" style="background:black;">
<div data-role='header' data-position='fixed' data-theme="a" style="height:42px;">
<a id="bhome" class="ui-btn-left ret" data-icon="arrow-l" href="#" data-iconshadow="false">Back</a>
<h1 id='eh1'></h1>
</div>
<!-- data-role='content' entraine un scroll horizontal -->
<div data-iscroll style='background-color:white;' id='escroll'>
<ul id='econt'></ul>
</div>
</div>
The answer was given by the iscrollview author (works perfectly) :
$("#escroll").iscrollview("scrollTo", 0, 0, 0, false);
I am using jquery UI tabs to create tabbed content. When a tab title is selected, I want it to link to the original location.
$(function() {
$("div.tabs").tabs("div.items > div");
});
<div id="items">
<div class="tabs">
<div class="tab">Tab title 1</div>
<div class="tab">Tab Title 2</div>
<div class="tab">Tab title 3</div>
</div>
</div>
When not-selected clicking on tab title 1 shows the tab content.
After being selected, the tab title 1 would link to http//www.example1.com.
I added a class if the tab had been clicked once already, and then used mouse down to trigger the link.
$(".tabs").tabs(".items > div");
$(".tabs .tab:first a").addClass("lasttab");
$(".tabs .tab").mousedown(function() {
if ($(this).find('a').hasClass("lasttab")) {
window.location.href = $(this).find('a').attr('href');
}
$(".tabs .lasttab").removeClass("lasttab");
$(this).find("a").addClass("lasttab");
});
I have just encountered a strange problem when using jQuery Mobile.
I have a link inside a form element label - a checkbox label to be exact but the link does not work.
I have tried reading the docs but can't seem to find anything on it.
Here is my markup:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="/tandcs.html" target="_BLANK" >Terms & Conditions</a></label>
</fieldset>
</div>
When the link is clicked it just toggles the checkbox state.
UPDATE
Just realised I can open the link by right clicking but obviously on a mobile device that's not very useful....
this is the correct solution for mobile and non mobile browsers
$('.ui-checkbox a').bind("tap click", function( event, data ){
event.stopPropagation();
$.mobile.changePage($(this).attr('href'));
});
Had the same problem and solved it using:
$('.ui-btn-text a').click(function(event) {
var $this = $(this);
window.open($this.attr('href'), $this.attr('target'));
});
So if any link within a button-text is clicked it will be opened in a new window. If you want it in the same window just use $.mobile.changePage as Phil showed.
I tried the above mentioned solutions on jQuery Mobile 1.1.0 with jQuery 1.7.2 without success.
After a bit of tinkering and reading into the new jQuery event functions I came up with my own solution to make all anchors in labels clickable without loosing jQuery Mobile default behaviour on the rest of the label:
jQuery('label').each(function(){
var e = jQuery(this).data('events');
jQuery('.agree label').undelegate();
jQuery('.agree label *:not(a)').delegate(e);
});
use on() and off() instead
$('label').each(function(){
var e = $(this).data('events');
$('label').off();
$('label').not('a').on(e);
});
There a some improvements that can be made but here is a rough draft:
http://jsfiddle.net/KADqA/
JS
$('.ui-btn-text').click(function(event) {
var checked = $("#tandc[type='checkbox']").is(":checked");
var $this = $(this);
if($this.children('a').length) {
$.mobile.changePage('#tc', {
transition : 'pop',
role : 'dialog'
});
}
stateOfCheckbox(checked);
});
function stateOfCheckbox(checked) {
$('#home').live( 'pagebeforeshow',function(event){
$("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
});
}
HTML
<div data-role="page" id="home">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="#tc" data-rel="dialog" >Terms & Conditions</a></label>
</fieldset>
</div>
</div>
<div data-role="page" id="tc">
<div data-role="header">
<h1>T and C</h1>
</div>
Read me
</div>
You could also just override the event:
$('.ui-checkbox a').click(function(e) {
e.stopPropagation();
})
On Android the solutions above did not work on Android.
It only works when using on pagecreate and without event delegation.
$(document).on('pagecreate', function(event, ui) {
$(".ui-checkbox a").on("click tap", function() {
$(':mobile-pagecontainer').pagecontainer('change', this.href);
return false;
});
} );
This is posible solution if you want to open the link in a popup.
$('.ui-checkbox a').bind('click tap', function (event) {
event.stopPropagation();
$($(this).attr('href')).popup('open');
});
Add Id or class into parent label have a tag
and using script of #alex dms
$('#field-contain label a').bind("tap click", function( event, data ){
event.stopPropagation();
$.mobile.changePage($(this).attr('href'));
});
Try it, work perfecly on my mobile and desktop
https://jsfiddle.net/vulieumang/p91zhmnp/
I am new to this forum so first let me say a big hello and thanks for providing such a great website!
I am new to JQuery but I love it, I have some JQuery tabs doing the usual List/Edit/Create stuff in a backend.
I have managed to set the edit tab to deisabled when viewing the list tab (as you need to slect a list item to edit) and it is enabled when a list item edit icon is clicked.
The question I have is if I then click the third tab how do I disable the second tab onlick?
This is my standard tab code...
$(function()
{
$("#tabs").tabs({disabled: [2]});
$("#tabs").tabs();
}
);
HTML:
<div class="demo">
<div id="tabs">
<ul>
<li><wont let me post 3 links>Jobs</a></li>
<li>Create Job</li>
<li>Edit Job</li>
</ul>
<div id="tabs-1" style="background-color: #fff">
Include...
</div>
<div id="tabs-2" style="background-color: #fff">
Include...
</div>
<div id="tabs-3" style="background-color: #fff">
Include...
</div>
</div>
Thanks
First you HTML is no correct so the plugin does not initialiaze well. The first tab button link is incorrect:
<li><wont let me post 3 links>Jobs</a></li>
Should be
<li>Jobs</li>
Then you are initializing two times the plugin, only do it once.
In the show event handler, enable/disable the tabs according to the actual tab shown:
$(function()
{
$("#tabs").tabs({
//disabled: [2],
show: function(event, ui) {
if (ui.index === 0) {
$('#tabs').tabs('enable', 1);
$('#tabs').tabs('enable', 2);
} else {
$('#tabs').tabs('disable', ui.index === 1 ? 2 : ui.index === 2 ? 1 : -1);
}
}
});
/*$("#tabs").tabs();
}*/
);
Here is a live working example on jsfiddle