parent/Dialog communication

by Akram kamal

HTML

<table cellspacing="0" cellpadding="0" border="0">
    <thead class="">
        <tr>
            <th>Source Column</th>
            <th>Screen Name</th>
            <th>Salesforce Columns</th>
            <th>Map Columns</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>PO_CRDCHK_THRSH</span><br/>
                <label>Data Length:
                </label>
                <input type="text" size="2">
            
            </td>
            <td>
                <input type="text" size="10" id="acctSearch">
            </td>
            <td>
                <input type="text" size="10">
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
        <tr>
            <td><span>NACE_DESC_TEXT </span><br/>
                <label>Data Length:
                </label>
                <input type="text" size="2">
                </td>
            <td>
               <input type="text" size="10" id="acctSearch">
            </td>
            <td>
                <input type="text" size="10">
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
        <tr>
            <td><span>BLOCK_DELIVERY</span><br/>
                <label>Data Length:
                </label>
                <input type="text" size="2">
                </td>
            <td>
               <input type="text" size="10" id="acctSearch">
            </td>
            <td>
                <input type="text" size="10">
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
    </tbody>
</table>
            
<div id="divPopUp">
    <label id="searchedText"></label>
    <input type="text" id="text">Search fields
				  <div><input class="chk" id="mychk1" type="checkbox" value="Account : Account Phone (PHONE, 40 )" />Account : Account...

JavaScript

$(function() {
    $("#divPopUp").dialog({
        resizable: true,
        autoOpen: false,
        width: 800,
        modal: true,
        buttons: {
            "Save": function() {
                var text = $(this).find( ":checkbox:checked" ).map(function() {
                    return this.value+' ';
                }).get().join();
                
                var obj = $(this).data("opener");
                $(obj).parents('td:first').siblings(':eq(2)').find(':text').val(text);
                $("#text").val("");
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close:function(){
            $(this).find( ":checkbox" ).removeAttr('checked');
            $(this).find('.mychk').show();
            $( this ).dialog( "close" );
        },
        open: function(){
            
        }
    });
    
    $('button.btn').on('click', function(){
        var title = $(this).parents('td:first').siblings(':eq(0)').find('span').text();
        $( "#divPopUp" ).data('opener', this).dialog( "option", "title", title ).dialog( "open" );
        
        
        var text = $(this).parents('td:first').siblings(':eq(2)').find(':input').val();
        if($.trim(text) != ''){
            $('#searchedText').html('Searched Text: '+text);
            var texts = text.split(" ,"); 
            $.each(texts, function(i, value){ $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
            });
            
            $('#divPopUp div').sort(function(a,b){
            var a = $(a);
            var b = $(b);
            if( a.find("input").is(':checked') && !b.find("input").is(':checked') )
                return -1;      
            if( !a.find("input").is(':checked') && b.find("input").is(':checked') )
                return 1;
            }).appendTo('#divPopUp');
        }
        
         
   ...