CODEWITHSUNDEEP
jqueryjquery-ui
user1032531
user1032531

Reputation: 26341

Passing data to a jQuery-UI Dialog

Often I have a table or a list, and I want to create an event when a given row is clicked, and do something specific to the clicked row. To do so, I have been defining data() within click(). Sometimes I just send a piece of data and other times I send the entire row.

Is the way I am doing this the best way, or is there a better way? Is it best to send just the required data to the dialog, or send the entire object over (i.e. row in my case) and extract data within the dialog?

Thanks

$("#someTable tbody").on("click", "a.doIt", function() {
    $("#dialog").data('id',$(this).parent().parent().attr('data-id')).dialog("open");
    //$("#dialog").data('id',$(this).parent().parent()).dialog("open");
    return false;
});
$("#dialog").dialog({
    open        : function() {
        alert($(this).data('id')+' is available.');
        //alert($(this).data('row').attr('data-id')+' is available.');
    },
    buttons     : [
        {
            text    : 'CLOSE',
            "class"  : 'gray',
            click    : function() {
                alert($(this).data('id')+' is available.');
                //alert($(this).data('row').attr('data-id')+' is available.');
                $(this).dialog("close");
            }
        }
    ]    
});


<table id="someTable">
    <tbody>
        <tr data-id="123"><td><a href="javascript:void(0)" class="doIt">aaa</a></td><td>bbb</td></tr>
        <tr data-id="321"><td><a href="javascript:void(0)" class="doIt">ccc</a></td><td>ddd</td></tr>
        <tr data-id="111"><td><a href="javascript:void(0)" class="doIt">eee</a></td><td>fff</td></tr>
    </tbody>
</table>

Upvotes: 1

Views: 3568

Answers (1)

Dineshkani
Dineshkani

Reputation: 3015

You can pass the data for ui-dialog like this

document.getElementById('dialog-modal').innerHTML = '<span style="font-family:sans-serif;font-size:18px">'+str+'</span>';
    $( "#dialog-modal" ).dialog({
        height: 120,
        modal: true,
        resizable:false,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });
    $(".ui-dialog-titlebar").hide();

You can change the innerHTML of the id you want and then open the dialog box.

UPDATED:

$("#someTable tbody").on("click", "a.doIt", function() {
$("#dialog").html($(this).parent().parent().attr('data-id').html());

$("#dialog").dialog({
        height: 120,
        modal: true,
        resizable:false,
        buttons: {
            Ok: function() {
                $( this ).dialog( "close" );
            }
        }
    });});

Upvotes: 1

Related Questions