1

I'm having problems with what seems to be a simple issue. I want to change / update the button text of a button programmatically. However, after looking trough several different similar questions here on SO I'm still no closer.

I'm using Chrome with jQuery 1.9 and JQM 1.3 Final.

HTML (this block resides inside a grid that belongs to the footer)

<div class="ui-block-b">
    <div class="ui-bar ui-bar-e" style="height:40px"> 
       <a href="#" class="footerWishOption footerDeleteWish" data-role="button" data-icon="trash">Slett ønske</a>
    </div>
</div>

JS

changeButtonText is a plug-in found here.

// 1. Does not work
$('.footerDeleteWish').changeButtonText("Gjenopprett
ønske"); 

// 2. Does not work                                                          
$('.footerDeleteWish .ui-btn-text').text("Gjenopprett ønske");
$('.footerDeleteWish').refresh();

// 3. Does not work
$('.footerDeleteWish').text("Gjenopprett ønske").refresh();

Update / solution:

As mentioned as an comment in the answer below, the problem was the visibilty of the footer. Even though the footer was created in the DOM, the selector did not find it since it was hidden.

Community
  • 1
  • 1
Index
  • 2,351
  • 3
  • 33
  • 50

1 Answers1

3

There are three common ways:

Classic solution:

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-btn span span').text('This is a new text');
});

Live example: http://jsfiddle.net/Gajotres/EjVfz/

This solution expects nothings gonna change with future button implementations and everything will stay the same.

Cautious solution:

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-btn').find('.ui-btn-text').text('This is a new text');
});

Live example: http://jsfiddle.net/Gajotres/QHg3w/

This solution is a safe solution, no matter which button example is used (a, button, input), button text will always be inside a .ui-btn-text class.

Change button text plugin

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-btn').changeButtonText('This is a new text');
});

(function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

Live example: http://jsfiddle.net/Gajotres/mwB22/

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Thanks for the quick response. However none of your examples work which is leading me to believe that something else is wrong. Do you have any suggestions for common errors to look for? – Index Mar 12 '13 at 14:21
  • Than you have an error in your code. If you can/want, mail me your code example and I will tell you where is the problem. I think your problem is triggering text change in the wrong moment, page must be created before text can be changed. That is way pagebeforeshow is used in my every example. – Gajotres Mar 12 '13 at 14:24
  • 1
    Ahh, thanks for that tip. Turns out it was because the footer was hidden (although .. still created in DOM) at the time of the text change. – Index Mar 12 '13 at 14:29