CODEWITHSUNDEEP
jqueryjquery-mobilejquery-selectors
Mr Shoubs
Mr Shoubs

Reputation: 15429

How to dynamically change DOM element text with jQM without losing styling

How can I change the text of dom elements without losing the jQM styling? - most items I can call .text('sometext'), but I run into problems with certain elements such as links with a data role of button and labels that are for radio buttons - the jQM styling gets messed up.

I've come up with a function below, but I'm not happy about how I need to identify these edge cases - is there a better way to change the text of various elements without losing their jQM css?

This doesn't strike me as something that shouldn't be this complex - maybe it is because I'm new to web dev, but I am constantly running into problems such as this. Does anyone know of a good reference to use? - it is such a pain trying to "guess" and it is difficult to find answers on Google when you are searching for "jqm dynamically set text on label for radiobutton"

var domElement = $j('#' + request.id);

//check if it exists
if (domElement) {
    if (domElement.length === 1) {

        switch(domElement.get(0).tagName.toLowerCase()) {
            case 'label':
                //it could be part of a radio button
                if (domElement.get(0).className.toLowerCase().indexOf("ui-radio") > 0){
                    domElement.find('.ui-btn-text').text(request.val);
                }
                else{
                    domElement.text(request.val);
                }
                break;
            case 'p':
            case 'span':
            case 'textarea':
            case 'li':
            case 'h3':
                domElement.text(request.val);
                break;
            case 'input':
                domElement.val(request.val);
                break;
            case 'a':
                var datarole = domElement.data('role');
                switch(datarole) {
                    case 'button':
                        domElement.find('.ui-btn-text').text(request.val);
                        break;
                }

                break;
        }
    }

}

Upvotes: 1

Views: 643

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85378

Does something like this work for you?

JS

$('#changeLabels').on('click', function() {
    $('.radioGroup').each(function() {
        var radio  = $(this);
        $("label[for='"+radio.attr('id')+"']").find('span.ui-btn-text').text('New Label for '+radio.attr('id'));
        console.log('New Label for '+radio.attr('id'));
    });
});

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

        <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
             <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" class="radioGroup"/>
             <label for="radio-choice-1">Cat</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" class="radioGroup"/>
             <label for="radio-choice-2">Dog</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" class="radioGroup"/>
             <label for="radio-choice-3">Hamster</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" class="radioGroup"/>
             <label for="radio-choice-4">Lizard</label>
        </fieldset>
        <br />
        <a href="#" data-role="button" id="changeLabels">Change Radio Labels</a>
    </div>
</div>​

Upvotes: 0

Derek Hunziker
Derek Hunziker

Reputation: 13141

You'll want to apply your text changes prior to JQM page initialization using the pagebeforecreate event.

The DOM is unmodified at this point so you can select elements as you normally would with jQuery. This is the preferred method because it doesn't rely on knowing/hard-coding the underlying markup that JQM creates (which is subject to change in future versions).

Just be sure to place your code BEFORE you include the JQM script on the page... this ensure's your code will be executed first.

$(function() {

    $(document).bind("pagebeforecreate", beforePageCreate);

    function beforePageCreate(event, ui) {
        $('a').text('Text modified before page creation.');
        $('input').val('Value modified before page creation.');
        $('label').text('Text modified before page creation.');        
    };

});

Here is a full example of the pagebeforecreate event: http://jsfiddle.net/VCYLs/2/

Upvotes: 1

Related Questions