Fire button click event and use value from jquery dialog

Question

I am trying to pop-up a window to enter value to use the value on postback.

I searched a lot on internet and able to build the pop-up codes for the server control, below is my code.

But after building this much i am not able to fire button click event(do postback) from dialog "Charge" button and how to use the value entered.

I tried to use document.getElementById("<%=Open.ClientID %>").click(); from "Charge" with no use as well as used $(e.currentTarget).unbind('click'); e.currentTarget.click();. But non worked.

    $(document).ready(function() {  

    $('#Open').click(function(e){
                e.preventDefault();
                $( "#Open-dialog" ).dialog( "open" );
    });

 $( "#Open-dialog" ).dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Charge": function() {
                     var amount = $('#Amount').val();                                                                                  
                     $( this ).dialog( "close" ); 
                     return true;               
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
    });   
});

    <form id="form1" runat="server">   
    <asp:Button id="Open" Text="Charge" runat="server" OnClick="Open_Click"/>
    <asp:Label ID="txt" Text="hi" runat="server" Visible="false"></asp:Label>
    <div id="Open-dialog" style="display: none;" title="Enter Amount">
        <label for="Amount">Amount</label>
        <input type="text" name="Amount" id="Amount" class="text ui-widget-content ui-corner-all" value="$" />
    </div>
    </form>

I am not able to find any clear picture of doing this in any of the questions,could anyone please help me out and give a hint on how to proceed..

Thanks in advance..

Can't you just submit the form? $("#form1").submit(); This will cause a postback of all values that are inside the form. — codes_occasionally
– codes_occasionally, Commented Mar 7, 2013 at 18:47
No. I just want to fire the button event. Where i am calling some function with the use of entered value in dialog textbox. — Naveen
– Naveen, Commented Mar 7, 2013 at 18:50
@Pandian I am using asp.net server control here, all i want is to trigger post back event from jquery dialog. But the link is imple html controls with no postback. — Naveen
– Naveen, Commented Mar 7, 2013 at 19:26

Shahdat · Accepted Answer · 2013-03-07 19:46:52Z

4

Open button is server control, you need catch client id and you need to call _dopostback(action, param) to apply manual post back on 'Changes' button click.

<script>
        $(document).ready(function () {

            $('[id$=Open]').click(function (e) {
                e.preventDefault();
                $("#Open-dialog").dialog("open");
            });
            $("#Open-dialog").dialog({
                modal: true,
                autoOpen: false,
                height: 255,
                width: 300,
                buttons: {
                    "Charge": function () {
                        var amount = $('#Amount').val();
                         //manual do post back
                        __doPostBack('btnSave ', amount)
                        $(this).dialog("close");
                        return true;
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
            });
        });
    </script>

In server side you can catch the post by following

 protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                string amount = Request["__EVENTARGUMENT"]; // parameter
                string btnSave = Request["__EVENTTARGET"]; // actionname
            }

        }

happy coding...

If you got _dopostback is undefined error in browser I would like to refer you here Hanselman Or you'll need to get the Zip file and put the new browser files in App_Browsers manually.

edited Mar 7, 2013 at 19:46

answered Mar 7, 2013 at 18:54

Shahdat

5,5234 gold badges42 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Naveen Over a year ago

@Shahdat I tried waht you said, but there is a script error "'__doPostBack' is undefined".

Shahdat Over a year ago

@Naveen on which browser and whats the version?

Shahdat Over a year ago

@Naveen works well here with IE9, FF and chrome. I am referring you here forums.asp.net/t/1754789.aspx/1 and forums.asp.net/post/4763405.aspx

Shahdat Over a year ago

@Naveen I have another perfect reference for you is hanselman.com/blog/…

Naveen Over a year ago

Thanks Shahdat for your valuable inputs. It helped a lot.

|

Naveen · Accepted Answer · 2013-03-11 15:41:37Z

Finally i am able to find a solution. I am putting it alltogether if some one is looking for Jquery dialogue box with postback.

<script type="text/javascript">
    $(document).ready(function() {
        $('#Open').click(function(e){
                    e.preventDefault();
                    $( "#Open-dialog" ).dialog( "open" );
        });
     $( "#Open-dialog" ).dialog({
                modal: true,
                autoOpen: false,
                height: 255,
                width: 300,
                buttons: {
                    "Charge": function() {  
                         __doPostBack("<%= Open.UniqueID %>", $('#Amount').val()); 
                         $( this ).dialog( "close" );                                    

                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
        });
    });
</script>

<form id="form1" runat="server">
<asp:Button ID="Open" Text="Charge" runat="server" OnClick="Open_Click" CausesValidation="false" />
<asp:Label ID="txt" Text="hi" runat="server" Visible="false"></asp:Label>
<div id="Open-dialog" style="display: none;" title="Enter Amount">
    <label for="Amount">
        Amount</label>
    <input type="text" name="Amount" id="Amount" class="text ui-widget-content ui-corner-all"
        value="$" />
</div>
</form>

If you encounter script error

'__doPostBack' is undefined

add

ClientScript.GetPostBackEventReference(this, string.Empty);

Thank you all for your valuable inputs in this thread..

Collectives™ on Stack Overflow

Fire button click event and use value from jquery dialog

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related