bootstrap modal disappearing

Question

I am having issues creating a module where it displays if the submission is valid (based on factors outside of the code- ex. the length of a string is acceptable).

When everything passes the test submits and then the modal pops up but disappears in about .5 seconds. Is there a way to make it stay longer?

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="faviconmoney.ico"/>
    <meta charset="utf-8">
    <title>Employee Info</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<div>


    <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">Expenses</a></li>
        <li role="presentation"><a href="/UpdatePersonalData">Employee Data</a></li>
        <li role="presentation"><a href="logout">Logout</a></li>
    </ul>

    <hr />

</div>

<div>
    <form role="form" method="post" id="user">
        <div class="col-md-4">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
            </div>
            <div class="form-group">
                <label for="first name">First Name:</label>
                <input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
            </div>

            <div class="form-group">
                <label for="last name">Last Name:</label>
                <input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
            </div>


            <button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button>

        </div>
    </form>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Your changes have been submitted and updated!
                </h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

</body>
</html>

Have you tried to display the same Modal by a simple click, i.e. without any tests and/or conditions? If it is disappearing automatically after the same time, then there might be an issue with JS and/or your configuration. — Mohammed Akhtar Zuberi, Apr 22 '17 at 23:42
Yes, I think it has something to do with the submit button. Not sure how to fix that issue, but if the submission is acceptable the modal pops up for about half a second. — Stephen Phillips, Apr 23 '17 at 20:10
Can you share the code of your HTML Form along with Action File? — Mohammed Akhtar Zuberi, Apr 23 '17 at 20:12
I think I have figured out the problem. Before I can share the answer, just want to confirm if you are processing the Form information using Ajax? Since you want to show a confirmation message via Modal, so it is obvious that you are not moving away from the page and getting the form submission and process result without reloading. — Mohammed Akhtar Zuberi, Apr 23 '17 at 20:26
I am not processing the information using Ajax. I am checking the data using business logic to make sure that the fields Username, LastName, FirstName, and Email all have the appropriate characters. Then using SQL statements in a DAO to change the data in the database. Thanks for the help. — Stephen Phillips, Apr 23 '17 at 20:36
Check the answer. What you want to do CANNOT be achieved without Ajax as the input and output are both on the same page and without page reload. — Mohammed Akhtar Zuberi, Apr 23 '17 at 20:59
@MohammedAkhtarZuberi, Ajax [can be detected](https://davidwalsh.name/detect-ajax) in php. Which means you can use the same URL for both async and sync requests. — tao, Apr 23 '17 at 21:32
I agree to what @AndreiGheorghiu said. What I meant is if you use a PHP action as your processing for HTML Form, then your page will reload making the UI JS end. — Mohammed Akhtar Zuberi, Apr 24 '17 at 15:23

score 2 · Answer 1 · edited May 23 '17 at 12:34

Load jquery(.min).js before bootstrap(.min).js.
As a rule of thumb, don't expect files from different versions of the same library/plugin to work well together. You are using Bootstrap .css from v.3.7.7 and .js from version v3.1.0.

Working example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
        </button>
        <h4 class="modal-title" id="myModalLabel">
                        Your changes have been submitted and updated!
        </h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<a href="#myModal" data-toggle="modal" datatarget="#myModal" class="btn btn-default">Submit</a>

As you can see, I'm using your code in the above example, linking the required dependencies in their correct order and the modal doesn't go away.
If this doesn't help you, you'll need to reproduce the bug here so we could pinpoint its source.

Edit, based on addition to question: Your modal does not disappear. It is dumped by browser, together with the page, because you are submitting a form simultaneously with displaying the modal. Submitting the form causes your page to refresh the page in its entirety. You need to:

Prevent conventional form submission:

$('form#user').submit( function(e){
  e.preventDefault();
  // send your data here in an $.ajax() 
})

send the data async (via $.ajax()) and parse the result into your existing page.
For help on how to do that, see this question - and its answers.

I have updated to show full code. I tried your solution and it doesn't seem to be working. Not sure what else to try but I've been googling for hours on this issue — Stephen Phillips, Apr 23 '17 at 20:14
I've updated my answer. It takes 0.5s for your page to send the form and refresh the page. You are dumping the entire contents of your page (including the modal) and reloading the response from server when submitting the form. You need to prevent the conventional form submission, send async and parse the response from server if you want to show a modal on form submission. — tao, Apr 23 '17 at 20:25
Although not tested, but I have a feeling that @Andrei answer should work. — Mohammed Akhtar Zuberi, Apr 23 '17 at 20:30

score 0 · Answer 2 · answered Apr 23 '17 at 20:58

Below is the solution with the explanation.

HTML Form Submission has a set process that cannot be modified. We can stop the default form submission action and use our script instead.

HTML Form Submission Process

HTML Form has an Action file defined with the form itself in action along with method and other attributes.

This ensures that once the form is submitted, the browser will move to the action file and process based on the HTML Form Input values. Since the browser is moving away from the Form page, therefore any UI object on the Form page will end immediately.

In your case, you are not supposed to move away from the page. Instead you have to prevent the default Form Submit action and use Ajax call to process user input via an external file and then show the result. Below is the code that works and also displays the entered Username in the Modal Title.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="faviconmoney.ico"/>
    <meta charset="utf-8">
    <title>Employee Info</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<div>


    <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">Expenses</a></li>
        <li role="presentation"><a href="/UpdatePersonalData">Employee Data</a></li>
        <li role="presentation"><a href="logout">Logout</a></li>
    </ul>

    <hr />

</div>

<div>
    <form role="form" method="post" id="user">
        <div class="col-md-4">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
            </div>
            <div class="form-group">
                <label for="first name">First Name:</label>
                <input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
            </div>

            <div class="form-group">
                <label for="last name">Last Name:</label>
                <input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
            </div>


            <!-- <button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button> -->

            <button type="submit" class="btn btn-default" id="modelSubmit1">Submit</button>

        </div>
    </form>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Username Entered is <strong><span id="username_value">UserName</span></strong>.
                </h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<script type="text/javascript">
    $('form#user').submit( function(e){
        e.preventDefault();

      var username = $('#username').val();
        var dataString = "username="+username;

        // $('#myModal').modal({ show: false});

        $.ajax({
            type: "POST",
            url: "form-submission.php", // Name of the php files
            data: dataString,
            success: function(html)
            {
                $("#username_value").html(html);

                $('#myModal').modal('show');
            }
        });
    });
</script>

</body>
</html>

Note that I have used <span id="username_value"> to display the entered text in the middle of an HTML text.

Below is the code of external PHP file that you can use to process data entered. Which means, the modal will only show once the entry is processed successfully.

<?php
  if ($_POST) {
    $username_value = $_POST['username'];

    echo $username_value;
  }
?>

Hope this helps.

bootstrap modal disappearing

2 Answers2