Question

I’m trying, through an onclick to change the text in an <asp:linkbutton. The code seems to work fine in IE and firefox but is not working in Chrome.

Here is the code i’m using

 $('<span></span>', {
    text: icon,
    class: 'WebFonts'
}).appendTo('#' + btn);

btn is a parm that is being passed in through the onclientclick function. Like i said, this is working in IE and firefox. Here is the webfont css class and chrome will render that when i’m not trying to attach it in javascript.

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('/font/fonts/websymbols/websymbols-regular-webfont.eot');
    src: url('/font/fonts/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/fonts/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('/font/fonts/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('/font/fonts/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.WebFonts {font-family:WebSymbolsRegular}

greatful for some help
thanks
shannon

~~~~~~~~~~~~~
Here is what your asking for

function checkDisableButton(btn, parmText, icon) {
var mbtn=$('#' + btn)
mbtn.attr('disabled', '');
mbtn.addClass("buttonPad buttonProcessing button");
mbtn.text(parmText + "   |   ")
$('<span></span>', {
    text: icon,
    class: 'WebFonts'
}).appendTo('#' + btn);

}

and here is what is calling it

 <asp:LinkButton ID="lbSave" runat="server" CssClass="ButtonPrimary button" Text="Save"
    OnClientClick="checkDisableButton(this.id, 'PROCESSING', 'V');" />

and here is what id displayed in Chrome when the asp:linkbutton is clicked

<a onclick="checkDisableButton(this.id, 'PROCESSING', 'V');" id="ctl00_ContentPlaceHolder1_lbSave" class="ButtonPrimary button buttonPad buttonProcessing" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lbSave','')" disabled="disabled">PROCESSING   |   <span class="WebFonts">V</span></a>

You’ll notice that the span class=”WebFonts” is there in the code

and here is the code before it is clicked

<a onclick="checkDisableButton(this.id, 'PROCESSING', 'V');" id="ctl00_ContentPlaceHolder1_lbSave" class="ButtonPrimary button" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lbSave','')">Save</a>

So it appears that the span tag is getting put in.. it’s just not displaying…
what other info do you need to help troubleshoot?

~~~~~~~~~
Here is some more info.. if i use this instead of jquery… the webfonts shows up

  document.getElementById(btn).innerHTML = parmText + '<span class=buttonPad>|</span><span class=WebFonts>' + icon + '</span>';
    document.getElementById(btn).className = 'buttonProcessing button ';

just more info.. not sure that i’m getting anywhere

Answer 1

I think the key phrase here is:

Here is the webfont css class and chrome will render that when i’m not
trying to attach it in javascript.

Chrome is very picky about when it loads fonts, as it can be a time-consuming task. Try adding a hidden element with that class to your page somewhere:

<span style="visibility:hidden" class="WebFonts">V</span>

Then Chrome will know to load the font when it renders the page and will be ready when you dynamically add it to the link