CODEWITHSUNDEEP
javascriptjquery-mobile
Tieske
Tieske

Reputation: 406

How to prevent a button from remaining highlighted

I've my first endavour into javascript and jquery (mobile) but now ran into something that I just can't get resolved.

I have a simple form with 4 buttons, when one is clicked a command is submitted to the server (using ajax). Thing is with the interface, that the button clicked (lightgrey to begin with) turns blue and does not return to its original state. Not even when another button is clicked, so after a few clicks, all buttons are blue.

Here is a link to a test page (with ajax commands disabled)

And this is the page;

<div id="mainPageHaard" data-role="page">

    <div data-role="header" data-position="fixed">
        <a href="index.html" data-icon="arrow-l" data-iconpos="notext" >Back</a>
        <h1>Haard</h1>
        <a href="index.html" data-icon="home" data-iconpos="notext" >Home</a>
    </div><!-- /header -->

    <div data-role="content">
        <a id="btnHaardMax" data-role="button" data-icon="arrow-u">Maximaal</a>
        <a id="btnHaardUp" data-role="button" data-icon="plus">Harder</a>
        <a id="btnHaardDown" data-role="button" data-icon="minus">Zachter</a>
        <a id="btnHaardMin" data-role="button" data-icon="arrow-d">Waakvlam</a>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <a href="#configPageHaard" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Config</a>
    </div><!-- /footer -->
</div><!-- /page -->

And the javascript

$(document).ready(function() {

    $("#btnHaardMax").click(function(){
        //SendEvent("Gashaard_MAX", 18);
        return true; 
    });
    $("#btnHaardUp").click(function(){
        //SendEvent("Gashaard_UP", 18);
        return true; 
    });
    $("#btnHaardDown").click(function(){
        //SendEvent("Gashaard_DOWN", 18);
        return true; 
    });
    $("#btnHaardMin").click(function(){
        //SendEvent("Gashaard_MIN", 18);
        return true; 
    });
    $("#btnHaardStart").click(function(){
        //SendEvent("Gashaard_START", 18);
        return true; 
    });
    $("#btnHaardStop").click(function(){
        //SendEvent("Gashaard_STOP", 18);
        return true; 
    });

});

I suspect it to be something silly, but would appreciate if someone could point me exactly at the sillyness in my code

Thx!

Upvotes: 6

Views: 3257

Answers (3)

TMB
TMB

Reputation: 4703

This should be a pretty general solution for most people not wanting this default behavior. take notice that you need the normalized vclick event.

$(document).bind("mobileinit", function(){
  $("div[data-role=footer]  a").live('vclick', function (e) {
    $(this).removeClass("ui-btn-active");
});

Upvotes: 0

BoffinBrain
BoffinBrain

Reputation: 6525

I would recommend that once you press a button, you disable it until the AJAX call has completed, to avoid accidental double-pressing, or if it doesn't make sense to press the button again, leave it disabled. Since your buttons are not real buttons but links, see how to disable/enable buttons and other form elements. You'll still need to fiddle with the link's class names to stop them looking like they're active or enabled, like netbrain suggests.

IMHO, I would use real HTML buttons.

Upvotes: 0

netbrain
netbrain

Reputation: 9304

Short answer: you need to remove the css class ui-btn-active on the mouse event onclick is finished.

How? you say?

  $().ready(function(){
    $('some-selector').mousedown(function(){
      $('some-selector').addClass('ui-btn-active');
    })
    $('some-selector').mouseup(function(){
      $('some-selector').removeClass('ui-btn-active');
    })
  })

Upvotes: 2

Related Questions