[Solved] Losing Font Icon when changing button text

[perico]

Hi,

I have a listview with 4 buttons 

01.<ul data-role="listview" id="myTripsView" data-inset="true">
02.       <li class="form-content-item" id="bt1">
03.           <i></i><a data-role="button" id="button1" data-animated="true" data-icon="bomb" class="button_red" data-click="myFunction1">MyTxt 1</a>
04.       </li>
05.       <li class="form-content-item" id="bt2">
06.           <i></i><a data-role="button" id="button2" data-animated="true" data-icon="pitch" class="button_blue" data-click="myFunction2">MyTxt 2</a>
07.       </li>
08.       <li class="form-content-item" id="bt3">
09.           <i></i><a data-role="button" id="button3" data-animated="true" data-icon="bell" class="button_orange" data-click="myFunction3">MyTxt 3</a>
10.       </li>
11.       <li class="form-content-item" id="bt4">
12.           <i></i><a data-role="button" id="button4" data-animated="true" data-icon="fire" class="button_green" data-click="myFunction4">MyTxt 4</a>
13.       </li>
14.   </ul>

I want to change my button text when i click on it so i use this code

01.var pressBt1 = 0;
02.
03.function myFunction1() {
04.    var property = document.getElementById("button1");
05.    if (pressBt1 == 1) {
06.        property.className = "button_red km-widget km-button";
07.        property.textContent = "MyTxt 1";
08.        pressBt1 = 0;
09.    }
10.    else {
11.        property.className = "button_grey km-widget km-button";
12.        property.textContent = "MyTxt 1 bis";
13.        pressBt1 = 1;
14.   }
15.}

That works but when the button text is changed, my font icon disappears.

Do you have any suggestions ?

Thank you

 

 

[Tsvetina]

Hi Perico,

This happens because with the textContent setting, you overwrite the button's inner HTML. When instantiated, the Button widget generates additional HTML and when it has an icon, the HTML output of this button

<a data-role="button" data-icon="add" data-bind="events:{click: changeText}">Click me!</a>

looks like this:

<a data-role="button" data-icon="add" data-bind="events:{click: changeText}" class="km-widget km-button">
    <span class="km-icon km-add"></span>
    <span class="km-text">Click me!</span>
</a>

To change the text of the button, you need to modify only the text content of the second span element:

changeText: function (e) {
    $(e.target).find(".km-text").text("Good job!");
}

Regards,
Tsvetina
Telerik by Progress