locked
Changing the Text on a button RRS feed

  • Question

  • User-18738458 posted

    Hello, 

    I have the following code with changes the text and icon on a button

            var iSelector = $(this).find('span:first');
        
            if (iSelector.hasClass('glyphicon glyphicon-bed')) {
                iSelector.removeClass('glyphicon glyphicon-bed')
                iSelector.addClass('glyphicon glyphicon-cloud-upload')                                  // Change BED icon to CLOUD UPLOAD icon
                this.innerHTML = this.innerHTML.replace('Send', 'Sending');                             // Change the Button Text when clicked
            }

    Further done the code, inside a function call, I am now trying to change it again.

    I initially had issues changing the glyphicon, but I have solved that. What I cannot do it change the text in the same what I had done previously 

        function dealclick(data1) {
    
            var iSelector2 = $('.Button1').find('span:first');
          
    
                if (iSelector2.hasClass('glyphicon glyphicon-cloud-upload')) {
                    iSelector2.removeClass('glyphicon glyphicon-cloud-upload')
                    iSelector2.addClass('glyphicon glyphicon-thumbs-down')                                // Change BED icon to CLOUD UPLOAD icon
                    iSelector2.innerHTML = iSelector2.innerHTML.replace('Send', 'Sending');                            // Change the Button Text when clicked
    
    
                    //$('.welBedButton').append("DONE");
    
                    //alert(iSelector2);
                }

    I get the message

    SCRIPT5007: Unable to get property 'replace' of undefined or null reference

    if I uncomment out $('.welBedButton').append("DONE"), then it appends the word DONE at the end of the button, but what I want to do is change "sending" to "sent".

    Can someone tell me what I need to do?

    thank you

    Friday, July 6, 2018 4:44 PM

Answers

  • User-18738458 posted

    Hi 

    what I found that worked was

    $("#grid32").replaceWith('<div class="k-widget k-grid" id="grid32"><div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-save-changes ButtonName" href="javascript:void(0)"><span class="glyphicon glyphicon-thumbs-down" style="color: red; "></span>&nbsp;&nbsp;Sent failed</a></div></div>');
    

    Thank you both for your suggestions , which lead to a solution :-)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 8, 2018 3:46 PM

All replies

  • User-1171043462 posted

      iSelector2.innerHTML = iSelector2.innerHTML.replace('Send', 'Sending');

    iSelector2 is a jQuery object and hence you have to use either of following 2 ways

    First using innerHTML by converting to JavaScript object.

    iSelector2[0].innerHTML = iSelector2[0].innerHTML.replace('Send', 'Sending'); 

    second way as a jQuery object

    iSelector2.html(iSelector2.html().replace('Send', 'Sending')); 

    Saturday, July 7, 2018 11:19 AM
  • User-18738458 posted

    HI mudassarkhan

    I Try both your suggestions, and neither of them changes/replaces the text.

    If I use the jquery option ,and I output iSelector[0].innerHTML to the console, i get back

    function (a){return Y(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(ta,""):void 0;if("string"==typeof a&&!wa.test(a)&&(l.htmlSerialize||!ua.test(a))&&(l.leadingWhitespace||!aa.test(a))&&!da[($.exec(a)||["",""])[1].toLowerCase()]){a=n.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ea(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)}

    I if output the content of iSelector2[0].innerHTML to the console, I get blank.

    is there anything else I can try

    Sunday, July 8, 2018 8:56 AM
  • User-369506445 posted

    hi

    please try below code :

             var span = $('span:first', $('.Button1'));
    
                if (span.hasClass("glyphicon glyphicon-cloud-upload")) {
                    span.removeClass('glyphicon glyphicon-cloud-upload');
                    span.addClass('glyphicon glyphicon-thumbs-down');
                    span.text(span.text().replace('Send', 'Sending')) ;
    
                }

    Sunday, July 8, 2018 10:49 AM
  • User-18738458 posted

    Hi vahid bakkhi ,

    I tried your suggestion, but <g class="gr_ gr_254 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="254" data-gr-id="254">it  just</g> changed the icon (like the code currently does) not the button Text :-(

    Sunday, July 8, 2018 3:32 PM
  • User-18738458 posted

    Hi 

    what I found that worked was

    $("#grid32").replaceWith('<div class="k-widget k-grid" id="grid32"><div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-save-changes ButtonName" href="javascript:void(0)"><span class="glyphicon glyphicon-thumbs-down" style="color: red; "></span>&nbsp;&nbsp;Sent failed</a></div></div>');
    

    Thank you both for your suggestions , which lead to a solution :-)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 8, 2018 3:46 PM