views:

46

answers:

0

I have a script that runs 95% of the time perfectly but the other 5% of the time the buttons contents are missing. The script is run on every page and turns every div with the class 'button' into a button.

var button_img = 'button-'+colour+'-'+size;     
    var butt_id = $(this).text().toLowerCase().replace(/ /g,'_');
    var placeholder = $(this).removeClass("button").addClass("button_text").parent("a").html();

    var html = '\
    <div id="b_'+butt_id+'" class="button_cont'+center+'" style="width:'+width+'px;">\
        <div class="layers">\
            <div class="button_img" style="height:'+height+'px; background:url(images/button/'+button_img+'.png);">\
                <img src="images/button/'+button_img+'-l.png" class="left" />\
                <img src="images/button/'+button_img+'-r.png" class="right" />\
            </div>\
            '+placeholder+'\
        </div>\
    </div>\
    ';

    $(this).replaceWith(html);

on the 5% of the time it does not run correctly the button is generated but the var placeholder outputs null.... The only thing I can think is that var placeholder takes a long time to generate so sometimes var html completes before var placeholder finishes ... is that possible :s

The script is run when document is ready so its not that... also its worth noting that out of say 10 buttons on a page one might not load... (my point being if one fails it does not effect the others) and if the page is reloaded then that button will work.

EDIT:

a typical button is <a href="somelink"><div class="button">the button text</div></a>