CODEWITHSUNDEEP
javascriptc#jqueryasp.net.net
optionsix
optionsix

Reputation: 956

Attaching a jquery modal pop script to a button event

I'm using a simple out of the box jQuery script called bPopup (http://dinbror.dk/bpopup/) to launch a modal pop on a .net web form. I'm sort of new to jQuery, and the behavior I want is for the modal pop to be fired after the codebehind event on the button click is finished processing. In the modal pop element I have two panels, one with a success message, one with a fail message. I have the script tied to the button, and the issue is, its just firing the jquery and not firing the codebehind event at all anymore.

Here is the jQuery script (relatively copied and pasted from the author's demo):

 <script>
     // Semicolon (;) to ensure closing of earlier scripting
     // Encapsulation
     // $ is assigned to jQuery
     ; (function ($) {

         // DOM Ready
         $(function () {

             // Binding a click event
             // From jQuery v.1.7.0 use .on() instead of .bind()
             $('#my-button').bind('click', function (e) {

                 // Prevents the default action to be triggered. 
                 e.preventDefault();

                 // Triggering bPopup when click event is fired
                 $('#element_to_pop_up').bPopup();

             });

         });

     })(jQuery);
    </script>

Here is the modal pop element:

<!-- Element to pop up -->
            <div id="element_to_pop_up">
            <asp:Panel ID="pnlSubmitSuccess" runat="server" Visible="true">
            <div style="font-size:25px; font-weight:bold; font-style: italic; color:#4d90fe;">Success!</div><br /><br />
            <div style="font-size:20px;">The submitted data was successfully saved.</div>
            </asp:Panel>
            <asp:Panel ID="pnlSubmitFail" runat="server" Visible="false">
            <div style="font-size:25px; font-weight:bold; font-style: italic; color:#4d90fe;">Whoops!</div>
            <br /><br /><div style="font-size:20px;">There seems to be a few issues with the data you submitted. Please check all required fields for accuracy.</div>
            </asp:Panel>
            </div>

And here is the button its attached to:

 <asp:Button ID="btnProcess" runat="server" Text="Process" CssClass="button"
        onclick="btnProcess_Click" />

That onclick event never happens the jquery just pops the modal no matter what happens. How can I fix this?

Upvotes: 1

Views: 189

Answers (3)

Karl Anderson
Karl Anderson

Reputation: 34846

You might want to consider using an ASP.NET AJAX Page Method to achieve your call to the server, while still allowing for a clean way to determine success or failure (failure could be the actual call to the server failed for some reason; exception thrown while processing on the server or an explicit failure Boolean value of false was returned) via jQuery's ajax() function, like this:

<script>
    // Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ; (function ($) {
        // DOM Ready
        $(function () {
            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#my-button').bind('click', function (e) {
               // Prevents the default action to be triggered. 
               e.preventDefault();

               // Call server-side page method to do processing
               $.ajax({
                   type: "POST",
                   url: "Your_Page_Name.aspx/DidProcessingSucceed",
                   data: "{}",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function(result) {
                       // Note, the JSON value coming back from the Page Method
                       // has a d value automatically added,
                       // so you need to dereference tha value through this
                       // d value, like this:
                       if(result.d) {
                           // Show success message in modal here
                           $('#success_message_to_pop_up').bPopup();
                       }
                       else {
                           // Show error message in modal here
                           $('#error_message_to_pop_up').bPopup();
                       }
                   },
                   error: function(xhr, status, error) {
                       // When an error happens calling the server,
                       // then show an error saying as much
                       $('#server_error_message_to_pop_up').bPopup();
                   }            
               });
            });
        });
    })(jQuery);
</script>

Now on the server-side you need to create the ASP.NET AJAX Page Method which is called in the jQuery code above, like this:

[WebMethod]
public static bool DidProcessingSucceed()
{
    // TODO: Put your processing logic here
    var didSucceed = YourLogic.DoProcessing();

    // Return true if successful, false otherwise
    return didSucceed;
}

Note - An ASP.NET AJAX Page Method must be decorated with the WebMethod attribute and must be marked as static. The return value of the Page Method will automatically be JSON-encoded and all requests to a Page Method must be a POST.

Upvotes: 1

Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

First of all make sure you have all the jQuery-UI and bootstrap css and js files with you and properly referenced in the head section.

Next write a script in the Master-Page if you have one or in the same page at the end of the page, like this : 

<script type="text/javascript">
function openPopUp() {
       $('#element_to_pop_up').bPopup();
}
</script>

Then I could call the modal popup from code-behind with the following:

   protected void btnProcess_Click(object sender, EventArgs e) {   
      ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openPopUp();", true);
    }

Upvotes: 1

boruchsiper
boruchsiper

Reputation: 2028

e.preventDefault(); stops the postBack, hence the code behind isn't firing. The way to do this is to set the success text in the code behind on button click, and then in jquery check for the success message.

code behind on button click

if(success){
    success_message_label.text = "The submitted data was successfully saved.";
}
else{
    success_message_label.text = "";
}

then in jquery on document ready:

if($('#success_message_label').text() == "The submitted data was successfully saved.") {
    $('#element_to_pop_up').bPopup();
}

Also make sure that clientIdMode="Static" in your success_message_label.

Upvotes: 1

Related Questions