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. — Pandincus, Mar 07 '13 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, Mar 07 '13 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, Mar 07 '13 at 19:26

Shahdat · Accepted Answer · 2013-03-07T19:46:52.007

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 07 '13 at 19:46

answered Mar 07 '13 at 18:54

Shahdat

5,343
4
37
37

@Shahdat I tried waht you said, but there is a script error "'__doPostBack' is undefined". – Naveen Mar 07 '13 at 19:13
@Naveen on which browser and whats the version? – Shahdat Mar 07 '13 at 19:20
1

@Naveen works well here with IE9, FF and chrome. I am referring you here http://forums.asp.net/t/1754789.aspx/1 and http://forums.asp.net/post/4763405.aspx – Shahdat Mar 07 '13 at 19:29
@Naveen I have another perfect reference for you is http://www.hanselman.com/blog/BugAndFixASPNETFailsToDetectIE10CausingDoPostBackIsUndefinedJavaScriptErrorOrMaintainFF5ScrollbarPosition.aspx – Shahdat Mar 07 '13 at 19:35
Thanks Shahdat for your valuable inputs. It helped a lot. – Naveen Mar 07 '13 at 21:26
Hello guys, I did some research and i was able to correct the __doPostBack error by adding the ClientScript.GetPostBackEventReference(this, string.Empty);.. Here is the link http://stackoverflow.com/questions/3480362/dopostback-is-not-defined – Naveen Mar 11 '13 at 14:36

score 2 · Answer 2 · answered Mar 11 '13 at 15:41

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..

Fire button click event and use value from jquery dialog

2 Answers2