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>

Answer 1

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.

Answer 2

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

Question

2 answers

solution1
2 2017-04-22 23:58:04

solution2
0 2017-04-23 20:58:08

bootstrap modal disappearing

Question

2 answers

solution1 2 2017-04-22 23:58:04

solution2 0 2017-04-23 20:58:08

solution1
2 2017-04-22 23:58:04

solution2
0 2017-04-23 20:58:08