1

I have a gridview with template column for edit button, which opens a bootstrap modal dialog with data populated without a postback.

Here's the Gridview :

<asp:GridView ID="gvLocAddresses" runat="server" CssClass="table table-bordered table-striped table-condensed"
                GridLines="None"  AllowSorting="false" PageSize="25" AutoGenerateColumns="false" >
        <Columns>
            <asp:TemplateField HeaderText="Edit" >
                <ItemTemplate>
                    <a id="editLocAddress" href="#dlgLocAddress"  data-toggle="modal" role="button" onclick="EditLocAddress();"  
                        data-id="<%# DataBinder.Eval (Container.DataItem, "Id") %>" 
                        data-IsPrimary = "<%# DataBinder.Eval(Container.DataItem, "IsPrimary") %>"
                        data-Address1 = "<%# DataBinder.Eval(Container.DataItem, "Address1") %>"
                        data-Address2 = "<%# DataBinder.Eval(Container.DataItem, "Address2") %>"
                        data-City = "<%# DataBinder.Eval(Container.DataItem, "City") %>"

                        ><i class="icon-edit"></i></a>
                </ItemTemplate>                        
            </asp:TemplateField>

This is the modal dialog :

<div id="dlgLocAddress" class="modal hide fade" tabindex="-1" role="dialog" 
aria-hidden="true" style="width: 475px;">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        ×</button>
    <h3 id="dlgAddLocAddrLBL">Add Address</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="span2 text-right">
            <label for="txtAddrLine1">Address Line1</label>
        </div>
        <div class="span3">
            <input id="txtAddrLine1" type="text" class="text ui-widget-content ui-corner-all" /> 
        </div>
    </div>

     <div class="row">
        <div class="span2 text-right">
            <label for="txtAddrLine2">Address Line2</label>
        </div>
        <div class="span3">
            <input id="txtAddrLine2" type="text" class="text ui-widget-content ui-corner-all" /> 
        </div>
    </div>

    <div class="row">
        <div class="span2 text-right">
            <label for="txtCity">City</label>
        </div>
        <div class="span3">
            <input id="txtCity" type="text" class="text ui-widget-content ui-corner-all" />    
        </div>
    </div>

And Heres my Jquery function :

 function EditLocAddress() {
       var $editLAddr = $('#editLocAddress'),
            addressid = $editLAddr.data('id'),


       $(".modal-body #txtAddrLine1").val($editLAddr.data('address1'));
       $(".modal-body #txtAddrLine2").val($editLAddr.data('address2'));
       $(".modal-body #txtCity").val($editLAddr.data('city'));

   }

Now, when I click Edit, the dialog button always populates the first row. I am new to Jquery and client side programming. Can someone please help.

Thanks, Sri

Sri
  • 37
  • 9
  • what is it supposed to show on edit click? – Venkata Krishna Aug 08 '13 at 19:54
  • on edit click, it is supposed to open the modal dialog populated with the row-info. But, the modal dialog is always showing first row's info from the gridview. – Sri Aug 08 '13 at 20:05
  • can you provide a fiddle for it? – Venkata Krishna Aug 08 '13 at 20:18
  • Heres the fiddle, however, it is incomplete. The anchor tag is supposed to be inside a gridview. http://jsfiddle.net/KDvFQ/ – Sri Aug 08 '13 at 20:40
  • Hey, i used bootstrap modal dialog, not jquery. Sorry for the confusion. I followed this http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal?rq=1 – Sri Aug 08 '13 at 21:22

0 Answers0