JQuery Dialog Button Text Not Working and Others

After spending Saturday afternoon, Saturday night (until 3:30am), and Sunday morning coding on IKNEER, I figured out 3 things:
1. How to add a pop-up dialog window in an existing JavaScript table cell.

<div id=dialogForm></div> //this is in the .php file
var $dialog = $('#dialogForm').dialog({ });
var dialogForm=document.getElementById("dialogForm");
var dialogFormWin = new DialogFormWindow(null);

2. Because the existing table has 10 rows, so my pop-up window will have 10 iterative rows too. If I move the window into the click function, there will be accumulated rows in the pop-up window depending on how many times I click the button to show the window. So I have to remove the previous content upon clicking.

var dialogForm=document.getElementById("dialogForm");
if (dialogForm.hasChildNodes()) 

3. The third problem is the one cost me most of the time. I had this problem last week, and just decided to put it away for a while, this weekend I solved it! The JQuery dialog box button text doesn’t work.

var $dialog = $('#dialogForm').dialog({
             autoOpen: false, 
             "Cancel":function() {$('#dialogForm').dialog( "close");},
             "Save":function() {$('#dialogForm').dialog( "close" );}

If I use the code above, the text “Cancel” and “Save” wouldn’t show up. Debugging using Firebug on FireFox, I get:

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button">
<span class='ui-button-text'></span></button>

It has a text=”Save” attribute, but in the <span></span> tag, there is no text.

I found people have had the same problem before:

I actually also has the other same problem with the button showing 0 and 1 when using buttons as array rather than object. http://stackoverflow.com/questions/5225896/jquery-ui-dialog-buttons-text-not-working

There seems no easy solution to solve the possible inconsistency or conflict in the jQuery/jQuery-UI library. So I have to insert the text to the <span></span> tag.

There is an inspiring answer on StackOverFlow (this seems a good Q&A place for programmer, where I will go more often in the future) posted by a user on StackOverFlow named conceptacid:

$('div.ui-dialog-buttonset button.ui-button ui-button-text').each(function() {
$(this).html(<span class="ui-button-text">+"$(this).parent().attr('text')'+</span>");})

This didn’t work for my code, and after spending a long time wondering why, I modified it like this:

$('div.ui-dialog-buttonset button.ui-button span.ui-button-text').each(function() {

It works! I posted the answer to StackOverFlow