Losing Font Icon when changing button text

2 posts, 1 answers
  1. perico
    perico avatar
    3 posts
    Member since:
    Dec 2006

    Posted 08 Sep Link to this post

    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

     

     

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 12 Sep Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top