从Jquery对话框捕获数据以通过javascript显示在父页面中

时间:2013-04-11 19:15:31

标签: jquery dialog

我正在尝试捕获并将对话框窗口中的数据显示到父页面上的表中。部分问题是,我有许多对话框,所有对话框都需要捕获和显示不同的数据。每个对话框的数据需要显示在特定于该对话框的父页面表中。合理?因此,例如,用户单击父页面中的“医疗”选项,“医疗”对话框打开,用户在对话框中输入数据,按“确定”。将一行添加到prod-price-list表中,并附带相应的信息:1。打开的对话框的标题,在本例中为MEDICAL,2。从下拉列表中选择的是什么选项,3。溢价和4.免赔额。

所以这是对话框窗口的代码

$(document).ready(function() {
        var $loading = $('<img src="img/loading.gif" alt="loading" class="loading">');
        $('#prod-list td a').each(function() {
            var $dialog = $('<div></div>')
                .append($loading.clone());
            var $link = $(this).one('click', function() {
                var $cnt = $(this).attr('href') + " #" + $(this).attr('id')
                $dialog
                    .load($cnt)
                    .dialog({
                        title: $link.attr('title'),
                        width: 300,
                        height: 205,
                        modal: true,
                        buttons: {
                                                                                'Ok': function() { 
            //$('#prod-price-list').hide();
            if ($("#prod-price-list tbody").length > 0){
    $("<tr><td>1</td><td>a</td></tr>").appendTo("#prod-price-list tbody");
        }
        else{
 $("<tbody><tr><td>1</td><td>a</td></tr></tbody>").appendTo("#prod-price-list");
        }
        $( this ).dialog( "close" );
        }
    },
        'Cancel': function() { 
            $( this ).dialog( "close" );
        }
    });


                $link.click(function() {
                $dialog.dialog('open');
                    return false;
                }); 
                    return false;
            });
        });
    });

以下是对话框代码:

<div id="medical1">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td><label>Coverage Level</label></td>
        <td>
            <select name="coverlevel" id="coverlevel">
                <option value="0" selected>Employee Only</option>
                <option value="1">Employee + Spouse</option>
                <option value="2">Employee + Children</option>
                <option value="3">Employee + Family</option>
            </select>
        </td>
      </tr>
      <tr>
        <td><label>Premium</label></td>
        <td><input name="premium" id="medicalprem" type="text" size="30" maxlength="30" class="form-field-box"/></td>
      </tr>
      </table>
<!--      <input id="btnAddToList" name="addTolist" value="Add To List" type="button" />
-->
</div>

这是表格HTML:

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="prod-price-list">
          <tbody>
            <tr id="t1">
              <td class="prod-title">Medical</td>
              <td class="chart-totals">&nbsp;</td>
            </tr>
            <tr id="t2">
              <td class="prod-title">Critical Illness 2</td>
              <td class="chart-totals">&nbsp;</td>
            </tr>
            <tr id="t3">
              <td class="prod-title">Cancer 2</td>
              <td class="chart-totals">&nbsp;</td>
            </tr>
            <tr id="t4">
              <td class="prod-title">Accident 1</td>
              <td class="chart-totals">&nbsp;</td>
            </tr>
            <tr id="t5">
              <td class="prod-title">Deductible</td>
              <td class="chart-totals">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2"><div class="horz-border"></div></td>
            </tr>
            </tbody>
            <tr>
              <td class="chart-Gtotal">TOTAL</td>
              <td class="Gtotal">$1510.00</td>
              </tr>
            <tr>
              <td colspan="2">
              <div class="horz-border"></div>
              <center>
              <a href="#"><input type="image" id="chart1-select" src="css/img/select-btn.png"/></a>
              </center>
              </td>
              </tr>
        </table>

0 个答案:

没有答案