The button didn't get fired while clicked on the modal-box

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>

Answer 2

You can bind javascript event like this...

<asp:LinkButton ID="LinkButton" runat="server" OnClientClick="SomeMethod();" />

other way you can bind javascript method in code behind where you have more control an example is here

If you are passing arguments into your javascript function, for instance you are passing to arguments in javascript then you should define you function like

function SomeFunction(arg1, arg2)
{

//your statements

}

Answer 3

If you're post back is not firing it is likely that your modal is not within your form with runat=server. I've run into this before when using the jQuery UI Dialog. You'll need to move the modal back inside the <form></form> tags.

Try this after you've initialized your modal:

$("#dialog-form").parent().appendTo('form:first');