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.

@NiK: No, it's different. The ID posted on query string is bind from the gridview through the datasource. — mrjimoy_05, Apr 15 '12 at 07:50

Adil · Answer 1 · 2012-04-15T09:29:57.703

1

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

}

edited Apr 15 '12 at 09:29

answered Apr 15 '12 at 07:46

Adil

146,340
25
209
204

Got it, I've edit the code. Please take a look. But now the problem is how to take the passed value from the javascript and print it to the modal-box? – mrjimoy_05 Apr 15 '12 at 08:21
Suppose you are passing to arguments in javascript then you should define you function like function SomeFunction(arg1, arg2){//your statements} – Adil Apr 15 '12 at 09:27
Yes, but how to assign the 'arg1' to the textbox on the modalbox? I have tried using `document.getElementById(Textbox1).value = id;` but it got the page reloaded and the modal box disappear. – mrjimoy_05 Apr 15 '12 at 09:57
Your have to pass it to child window your model dialog page please follow this link if it is so http://www.codeproject.com/Articles/4980/Modal-popup-dialog-window-with-multiple-parameters – Adil Apr 15 '12 at 10:07
Thanks, but it's not what I means. I want it not on the separate window (child to parent), but on the same window... – mrjimoy_05 Apr 15 '12 at 11:00
I misunderstood, check this one http://stackoverflow.com/questions/394491/passing-data-to-a-jquery-ui-dialog – Adil Apr 15 '12 at 11:15

Luca Filosofi · Accepted Answer · 2012-04-22T12:51:05.960

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>

edited Apr 22 '12 at 12:51

answered Apr 22 '12 at 12:15

Luca Filosofi

30,905
9
70
77

Thanks.. But now the problem is the modal-box appear on the bottom of the page (even if I am not click the Linkbutton). I have tried to use `autoOpen: false` but it caused the modal-box don't want to appear while I clicked the Linkbutton. How to fix it? – mrjimoy_05 Apr 22 '12 at 12:31
1

this is what my code is supposed to do: it only show when you click the LinkButton. Do as follow: remove the `autoOpen: false` and add a css to your dialog `#dialog-form { display:none }` – Luca Filosofi Apr 22 '12 at 12:40
@mrjimoy_05: you welcome, also remember that you can use the dialog close event to do action before the dialog is closed, this can be usefull if you want clean the textbox before close the dialog. – Luca Filosofi Apr 22 '12 at 12:49
Hi aSeptik, I have one more question. I kno this is quite OOT, but, why the button on the modalbox don't get fired while clicked? It has been handled on the server-side code. – mrjimoy_05 Apr 22 '12 at 13:31
what do you mean? what button? – Luca Filosofi Apr 22 '12 at 13:33
Pls see the code above. I've append a line on the dialog-form div. – mrjimoy_05 Apr 22 '12 at 13:36
when you append an element after the dom is loaded you should use live method like this:`$('#Save_Button').live('click', function(){ });` remember that you can use the `buttons` function of the ui dialog to create custom dialog buttons. – Luca Filosofi Apr 22 '12 at 14:02
I don't get it. You means I've to add the code as a Javascript function? But how do if I want to handle it on server-side? – mrjimoy_05 Apr 22 '12 at 14:32
you need to use ajax. inside the click function. – Luca Filosofi Apr 22 '12 at 14:35
But doesn't it usually automatically the click event handled when the button clicked without ajax? – mrjimoy_05 Apr 22 '12 at 14:44
yes the click is fired, but in order to communicate with server-side you need ajax. – Luca Filosofi Apr 22 '12 at 14:48

score 1 · Answer 3 · answered Apr 23 '12 at 00:17

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');

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

3 Answers3

Linked