成功提交时显示Bootstrap的警报

时间:2016-02-23 22:25:46

标签: javascript php jquery html twitter-bootstrap

我正在尝试使用bootstrap的警报。特别是:

private final static long TIMEOUT = 10000; private Handler mHandler; final Lock lock = new ReentrantLock(); final Condition condition = lock.newCondition(); @Override protected void onCreate(Bundle savedInstanceState) { ... mHandler = new Handler(); ... } private void timeOutSignal() { mHandler.postDelayed(new Runnable() { @Override public void run() { Log.d(">> ", "---> timeout notify"); lock.lock(); try { condition.signal(); // releases lock and waits until doSomethingElse is called } finally { lock.unlock(); } } }, TIMEOUT); } public void buttonClick(View view) { timeOutSignal(); Log.i("???", "... WAIT"); lock.lock(); try { condition.await(); } catch (InterruptedException e) { // todo } finally { lock.unlock(); } Log.i("???", "... WAIT DONE !"); }

我想在成功点击提交按钮后弹出模态。我该怎么做?

以下是我的代码:

<div class="alert alert-success" role="alert">...</div>

这是我的PHP:

<!--____________________________ADD AGENT________________________--> 
<div class="modal fade" id="addAgent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
             <div class="modal-dialog" role="document">
                        <form role="form" action="php/addAgent.php" method="POST">           
             <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add Agent</h4>
             </div>
             <div class="modal-body">
                <div class="row">
                <div class="col-sm-12">
                            <div class="form-group">
                                <label for="fullname">Full Name</label>
                                <div class="row">
                                    <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="First Name"    name="fname">
                                    </div>
                                    <div class="col-sm-4">                                  
                                    <input type="text" class="form-control" placeholder="Middle Name"   name="mname">
                                    </div>
                                    <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="Last Name"     name="lname">
                                    </div>
                                </div>
                            </div><!--___________FORM GROUP_____________-->

                                <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label for="sel1">Type:</label>                                     
                                        <select class="form-control" name="agentType" id="sel1">
                                            <option value="1">Broker</option>
                                            <option value="2">Agent</option>
                                            <option value="3">Sub-Agent</option>
                                        </select> 
                                    </div>

                                    <div class="col-sm-4">
                                        <label for="sel1">Project:</label>                                      
                                        <select class="form-control" id="sel1">
                                            <option>Mezza</option>
                                                <option>Tivoli Gardens</option>
                                            <option>Verawoods Residences</option>
                                        </select> 
                                    </div>
                                </div>
                                </div>

                                <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                    <label for="email">Email Address</label>
                                    <input type="email" class="form-control" name="email"   id="email">
                                </div>
                                <div class="col-sm-4">
                                    <label for="contact">Contact Number</label>
                                    <input type="text" class="form-control" name="contact" id="contact">
                                </div>
                                </div>
                                </div>

                                <div class="form-group">
                                <div class="row">
                                <div class="col-sm-12">
                                    <label for="homeAdd">Home Address</label>
                                    <input type="text" class="form-control" name="homeAdd" id="homeAdd">
                                </div>
                                </div>
                                </div>
                        </form>         
                </div>
             </div>          </div>
             <div class="modal-footer">
                <input  type="submit" class="btn btn-primary" value="submit"/>  
                <button type="button" class="btn btn-default" data-dismiss="modal"> Close</button>                                   
             </div>
             </div>
</div>
</div><!--______________________ADD AGENTS MODAL_______________________-->

<!-- Button trigger modal -->

我在数据库中成功添加值后如何做到这一点?

2 个答案:

答案 0 :(得分:0)

如果您没有使用AJAX来调用addAgent.php并且您的PHP和HTML在一个文件中,那么一种方法是在PHP中设置变量,如下所示:

if ($insert) {
    $alert_success = '<div class="alert alert-success" role="alert">...</div>';
}

然后在HTML中的任何位置添加一条回显该变量的行。

<?php
    echo $alert_success;
?>

答案 1 :(得分:0)

您可以为表单使用提交处理程序:

// Add an ID to your form
$( "#formID" ).submit(function( event ) {

  // Stop form from submitting normally
  event.preventDefault();

  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );

  // Send the data using post
  var posting = $.post( url, { s: term } );

  // Put the results in a div
  posting.done(function( data ) {
    $(".modal-body, #orModalBodyID"). append('<div class="alert alert-success" role="alert">Post Success</div>')
  });
});

您可以在@ API documentation website

中找到有关jQuery的post()方法的更多信息