bootbox with jQuery and Bootstrap with ASP.NET page - how to submit form

Question

bootbox with jQuery and Bootstrap with ASP.NET page - how to submit form

4.3k views Asked by user995727 At 14 September 2024 at 14:47

If I have a .net page with bootstrap min and some other js files on the page, it won't run the js files. However, if I move the < form ...> to the end of the file the bootbox javascript works perfectly.

This won't work until you move the form to the end of the file. How come? I want to use a confirm button to make sure the user actually wants to submit the form but I'm starting with this simple example.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Untitled Page</title>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
    rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="span12">
        <h2>
          Bootbox.Js - Creativity Tuts</h2>
        <button class="btn btn-danger">
          Alert Box!</button>
      </div>
    </div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <script src="js/bootbox.min.js"></script>

  <script type="text/javascript">
        $(document).ready(function(){
            $('.btn').on('click', function(){
                bootbox.prompt("Enter your name", function(res){
                    if(res == null){
                        alert("Prompt cancelled by user.");
                    }else{
                        alert("Hi: "+res);
                    }
                });    
            });
        });

  </script>

  <form id="form1" runat="server">
  </form>
</body>
</html>

Original Q&A

There are 2 answers

**M Rahim** · Answer 1 · 2014-01-11 02:02:06

You can add a function to a script at the top of the page "" like the following:

    <script type="text/JavaScript">
    function PassToServerSide() {
        bootbox.confirm("Are you sure?", function (result) {
            if (result)
                __doPostBack('__EVENTTARGET', '__EVENTARGUMENT');
        });
    }
</script>

and then capture the post back at the server side by using something like the following:

protected void Page_Load(object sender, EventArgs e)
{
    string parameter = Request["__EVENTARGUMENT"];
    switch (Request.Form["__EVENTTARGET"])
    {
        ...
    }
}

To assign the javascript function to the asp button ue the following:

        cmdButton.OnClientClick = "PassToServerSide();return false;";

Make sure to add "return false" other wise the button will case a post back it self

**Kiran Patil** · Answer 2 · 2014-01-29 13:52:34

Another approach is:

ASPX Page:

<asp:Button ID="btnProcess" runat="server" Text="Process"
OnClick="btnProcess_Click"
OnClientClick="return ShowConfirm(this.id);" />

Javascript:

var confirmed = false;

function ShowConfirm(controlID)
{
    if (confirmed) { return true; }

    bootbox.confirm("Are you sure want to continue?", function (result) {
        if (result) {
            if (controlID != null) {
                var controlToClick = document.getElementById(controlID);
                if (controlToClick != null) {
                    confirmed = true;
                    controlToClick.click();
                    confirmed = false;
                }
            }
        }

    });

    return false;

}

TechQA.

bootbox with jQuery and Bootstrap with ASP.NET page - how to submit form

There are 2 answers

Related Questions in JQUERY

Related Questions in ASP.NET

Related Questions in TWITTER-BOOTSTRAP

Related Questions in DOPOSTBACK

Popular Questions

Popular Tags

Trending Questions