Question

[Assign a Textbox Value to the modal-box on the same page has been answered]

NEW QUESTION:
Why the button on the modal-box didn’t get fired while I’ve clicked the button? Am I missing something?

I’ve added the code to handle the click event on the server side:

Protected Sub Save_Button_Click(sender As Object, e As System.EventArgs) Handles Save_Button.Click
    //The code goes here
End Sub

Pls see the code below with the marked line.

---

I have the code below to show the modal-box after a LinkButton clicked. And, what I want to do is how to assign the Textbox value with the.

I have a gridview:

<asp:GridView ID="GV1" runat="server" DataSourceID="DS1" >
  <Columns>
    <asp:BoundField HeaderText="ID" DataField="ID"/>
    <asp:TemplateField ShowHeader="False">
      <ItemTemplate>
        <asp:LinkButton ID="Edit_Linkbutton" runat="server" CausesValidation="False" >
          <asp:Image ID="Edit_Linkbutton_Image" runat="server" ImageUrl="~/edit.png"></asp:Image>
        </asp:LinkButton>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

And on the same page (this is a div as modal-box to be showed after the Linkbutton on the Gridview clicked):

<div id="dialog-form" title="Modal Box">
    <input type="text" id="Textbox1" />

    #--------------------------------------------------------------------#
    #This button didn't get fired while clicked
    <asp:Button ID="Save_Button" runat="server" Text="Save"></asp:Button>
    #--------------------------------------------------------------------#

</div>

And then I attach a Javascript function to the LinkButton through code-behind:

Dim myLinkButton As LinkButton

For i As Integer = 0 To GV1.Rows.Count - 1
  myLinkButton = DirectCast(GV1.Rows(i).Cells(1).FindControl("LinkButton"), LinkButton)
  myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + .Rows(i).Cells(0).Text & "'); return false;")
Next

Rows(i).Cells(0) is the first column on the Gridview, it is “ID“.

The Javascript code is on the same page as the Gridview code:

<script>
function shopModalPopup(id){
//show the modal-box
    $("#dialog-form").dialog("open");
    // ---> How to assign the 'id' value to the Textbox1 on the modalbox?
} 

$(function () {
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true
    });
});
</script>

The code above do open the modal-box but not assign the value to the Textbox1 on the modal-box.

What I am gonna ask is how to assign the Id value to the Textbox1 on the modal-box? I have try to search any relevant article but they do separate the modal-box onto the other page. But in this case, the modal-box is on the same page as the Linkbutton clicked. How can I do that? Thank you very much.

Answer 1

not tested but should work.

i think you can also avoid to use inline js and just bind the click event of the buttonLink

#dialog-form { display:none } /* CSS */

<script>  /* JS */
/* Assuming all dialogs share the same default Settings in this grid scenario */
var grid_modal_options = {
        height: 300,
        width: 350,
        modal: true
};
function shopModalPopup(id){
    var DataField = id;
    grid_modal_options.open = function(){
        $('#dialog-form #Textbox1').val( DataField );
        // OR
        // $('#dialog-form').find('textarea').val( DataField );
    };

    $("#dialog-form").dialog(grid_modal_options);
} 
</script>