jquery-ui dialog problem with .live

Question

I'm currently loading data from a mysql db - if a certain condition is met, a volunteer button is displayed. When the button is clicked I want to display a dialog box, and a php file is called to populate the box. First I initialize the dialog:

$(document).ready(function() {
    $("#chaincrewDialog").dialog({ autoOpen: false });
});

Here is how I'm calling the dialog box:

    $('.volunteer').live("click", function(){
            // this gets the game number from the table to pass to the php file
            var gameno=$(this).parent('td').prev("td").prev("td").prev("td").prev("td").prev("td").html();
           $('#chaincrewDialog').dialog('open').load("popup.php?gameno="+gameno);
});

My click button works fine, and there are no js or firebug error messages. My dialog is called with the following parameters:

 $(function() {
  $('#chaincrewDialog').dialog({
            resizable: true,

    autoOpen:   false,
    resizable:  false,
    modal:      true,
            dialogClass: 'flora',
            title: 'Volunteer',
            overlay: {
        opacity: 0.5,
        background: "#A8A8A8"
    },
    height: 600,
    width: 700,
            buttons: {
                    'Close': function() {
                    $(this).dialog('remove')
                    }
            }
});

I'm sure I'm missing something easy, but I can't get my dialog to even display....

Answer 1

why all this line : var gameno=$(this).parent('td').prev("td").prev("td").prev("td").prev("td").prev("td").html();

get to the div you want to change the html, with class or id selector ? did you alert gameno ? its contain number?

Answer 2

What haim evgi is meaning to say is why are you doing all the prev().prev()....

var gameno=$(this).parent('td').prev("td").prev("td").prev("td").prev("td").prev("td").html();

You should be able to do:

var gameno=$(this).parent().prevAll('td:eq(4)').html();

the Prevall says grab all previous siblings and filter them with ('td:eq(4)'), the :eq(4) says take the element with the zero-index of 4 (the 5th sibling before $(this).parent()).

Oh, the .parent doesn't ned any selector, It just grabs the first parent. If you want to find the first td parent try this:

var gameno=$(this).parents('td:first').prevAll('td:eq(4)').html();