0

I'm having an issue in getting my bootstrap modal to pop up after button submit.

what needs to happen is the following:

  1. Web Form gets filled out
  2. Submit button gets clicked and data is added to the database
  3. Modal pops up saying yes or no if data was added.

steps 1 and 2 are working fine I just can't get step 3 to work. below is a snippet of my code.

<asp:Button ID="addcomputerassetbutton" CssClass="btn btn-primary" 
OnClick="AddcomputerassetBtn_Click" runat="server" Text="Add Computer Asset" />



                    <!-- Modal -->
                    <div class="modal fade" id="ModalCenter" tabindex="-1" role="dialog" aria-labelledby="Assetadded" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered" role="document">
                          <asp:ScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ScriptManager>
                          <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                              <ContentTemplate>
                                            <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                          <asp:Label ID ="assetadded" runat="server"></asp:Label>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="javascript:window.location='http://assetdb.local/asset?action=addcomputer'">OK</button>

                          </div>
                        </div>
                              </ContentTemplate>


                          </asp:UpdatePanel>

                      </div>
                    </div>

Code Behind file

  protected void AddcomputerassetBtn_Click(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["AssetDBConnection"].ConnectionString);
        SqlCommand cmd = new SqlCommand("usp_addnewasset", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("assetNumber", inputassettag.Text);
        cmd.Parameters.AddWithValue("assetcatid", categoryid);
        cmd.Parameters.AddWithValue("assetname", inputassetname.Text);
        cmd.Parameters.AddWithValue("assetmodel", inputmodelnumber.Text);
        cmd.Parameters.AddWithValue("assetmanufacture", inputassetmanufacture.Text);
        cmd.Parameters.AddWithValue("assetservicetag", inputassetservicetag.Text);
        cmd.Parameters.AddWithValue("assetstatus", inputassetstatus.Text);
        cmd.Parameters.AddWithValue("assetcompany", inputassetcompany.Text);
        cmd.Parameters.AddWithValue("assetoffice", inputassetoffice.Text);
        cmd.Parameters.AddWithValue("assetdepartment", inputassetdepartment.Text);
        cmd.Parameters.AddWithValue("assetuser", inputassetuser.Text);
        cmd.Parameters.AddWithValue("assetcost", inputassetcost.Text);
        cmd.Parameters.AddWithValue("assetram", inputassetram.Text);
        cmd.Parameters.AddWithValue("assetcpu", inputassetcpu.Text);
        cmd.Parameters.AddWithValue("assetdiskdrive", inputassethdd.Text);
        cmd.Parameters.AddWithValue("assetlocaladminuser", inputassetadminusername.Text);
        cmd.Parameters.AddWithValue("assetlocaladminpassword", inputassetlocaladminpassword.Text);
        //cmd.Parameters.AddWithValue("catdescription", inputimei.Text);
        //cmd.Parameters.AddWithValue("catname", inputassetmobilenumber.Text);

        con.Open();
        int k = cmd.ExecuteNonQuery();
        if (k != 0)
        {
            lblModalTitle.Text = "Asset Added OK";
            assetadded.Text = "The Asset has been added to the Database";
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ModalCenter", "$('#ModalCenter').modal();", true);
            upModal.Update();


        }
        else
        {

            lblModalTitle.Text = "Asset Not added OK";
            assetadded.Text = "There was an error adding the asset";
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ModalCenter", "$('#ModalCenter').modal();", true);
            upModal.Update();
        }
        con.Close();
    }

I would be grateful for your assistance

dbjoe
  • 65
  • 9
  • did you add bootstrap js library? – Ercan Peker Oct 14 '18 at 13:22
  • In the browser press F12 to open the debugger. When the page is shown initially, type this in the console `$('#ModalCenter').modal();`. What happens? – CodingYoshi Oct 14 '18 at 13:29
  • Hello,I get the Modal shown – dbjoe Oct 14 '18 at 14:17
  • Ok good. When you fill out the form, keep the debugger open, then submit the form and the page refreshes, are there any errors in the console? – CodingYoshi Oct 14 '18 at 14:46
  • Yes, I get this error: Uncaught ReferenceError: $ is not defined at asset?action=addcomputer:294 which i think is this section `ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "", false);` – dbjoe Oct 14 '18 at 14:49
  • Well there you go, that is the issue. See [this](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) to help you fix the issue. And FYI, if you want a person to receive a notification on Stack Overflow when you write a comment to them, use the `@` symbol plus the user name. For example, `@codingyoshi`. Otherwise, the person will not know you messaged them. – CodingYoshi Oct 14 '18 at 15:49
  • Many Thanks @CodingYoshi the link you gave helped me – dbjoe Oct 14 '18 at 16:11

1 Answers1

0

First you check if you can open a modal by a simple button click

If successful then what you can start with is pass an parameter like

AddRecord.aspx?added=true 

and on

 $(document).ready(function(){
//Read the parameter values and if true show the dialog using
$('#ModalCenter').modal();

});
Prakash
  • 357
  • 2
  • 14