如何在窗口弹出窗口中单击更新地址文本

时间:2014-04-29 13:38:34

标签: javascript jquery html

我有几个包含编辑按钮的地址字段。在编辑按钮上单击特定地址时,应显示一个窗口弹出窗口,其中包含当前地址详细信息,单击更新按钮,应该更新该地址。

这是我的代码:

$('#btnShippingAddr1').on('click',function(){
getEditableAddr('#btnShippingAddr1','#editableShippingAddress1');
updateAddress();
});
$('#btnShippingAddr2').on('click',function(){   
    getEditableAddr('#btnShippingAddr2','#editableShippingAddress2');
});
$('#btnBillingAddr').on('click',function(){ 
    getEditableAddr('#btnBillingAddr','#editableBillingAddress');
});
$('#btnPaymentDetails').on('click',function(){  
    getEditableAddr('#btnPaymentDetails','#editablePaymentDetails');
});
function getEditableAddr(btnId,addrContainer){  
    $('#orderDetailAdrressPopup').show();
    var getAddress = $(btnId).parent('td').find(addrContainer).html();
    $('.update-editable-address').html(getAddress);
}
$('#orderDetailAdrressPopup address').bind('dblclick', function(){
    $(this).attr('contentEditable',true);
}).blur(function() {
    $(this).attr('contentEditable', false);
});

<td id="editableShippingAddress1Container">
    <div class="editable-address" id="editableShippingAddress1">
        <address>$10 - Standard Shipping</address>
    </div>
    <input type="button" class="btn btn-inverse btn-edit" id="btnShippingAddr1" value="Edit"/>
</td>
<td id="editableShippingAddress2Container">
    <div class="editable-address" id="editableShippingAddress2">
        <address>
            <strong>Oodles</strong>
            <br>
            E-307 second flor
            <br>
            Shushant Lok
            <br>
            Guragon
            <br> <abbr title="Phone">Phone:</abbr>
            0124-2346067
        </address>      
        <address>
            email: <a href="mailto:#">marko@modelcitizen.com</a>
        </address>
    </div>
    <input type="button" class="btn btn-inverse btn-edit" id="btnShippingAddr2" value="Edit"/>
</td>
<td class='hidden-350' id="editableBillingAddressContainer">
    <div class="editable-address" id="editableBillingAddress">
        <address> <strong>Oodles</strong>
            <br>
            E-307 second flor
            <br>
            Shushant Lok
            <br>
            Guragon
            <br> <abbr title="Phone">Phone:</abbr>
            0124-2346067
        </address>
    </div>
    <input type="button" class="btn btn-inverse btn-edit" id="btnBillingAddr" value="Edit"/>
</td>
<td class='hidden-1024' id="editablePaymentDetailsContainer">
    <div class="editable-address" id="editablePaymentDetails">
        <address>
            MasterCard ***1234
            <br />
            Expires: 11/2015
            <br />
            Marko Milicevic
        </address>
    </div>
    <input type="button" class="btn btn-inverse btn-edit" id="btnPaymentDetails" value="Edit"/>
</td>

<%-- Editable Address details (popup) --%>
<div aria-hidden="false" role="dialog" tabindex="-1" class="modal modal_popup pos-fix" style="display:none;" id="orderDetailAdrressPopup">
    <div class="modal-header">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
        <h3>XYZ address container name</h3><!-- dynamically change name -->
        <!-- Popup style table container -->
        <div class="row-fluid">
            <div class="span12">
                <div class="box box-color box-bordered">
                    <div class="box-title">
                        <h3>
                            <i class="icon-edit"></i>
                        </h3>
                    </div>
                    <div class="box-content">
                        <address class="update-editable-address">
                            <!-- get editable address and update here -->
                        </address>
                    </div>
                </div>                  
            </div>
            <div class="pull-left mb0 pt20">
                <input type="button" class="btn btn-inverse update-address" value="Ok" />
                <input type="button" class="btn" value="Cancel" />
            </div>
        </div>            
    </div>
</div>
<%-- Editable Address details (popup) end --%>

但问题是,我无法识别和更新特定编辑按钮点击时出现的弹出数据。我要保存更新的地址。

感谢你。

0 个答案:

没有答案