插入数据后,jquery更新下拉div

时间:2015-01-22 06:54:32

标签: javascript php jquery css html5

我有一个下拉列表,我从数据库填充(ss和源附件)

enter image description here

 <div id="divmedium">
        <label>Medium:</label> <a data-toggle="modal" role="button" href="#medium_m">[Add New Medium]</a>
        <select data-placeholder="Select Medium" class="select-full"  tabindex="2" id="media" name="media">
        <option value=""></option>
        <?php
        $quee = 'SELECT  `media_id` , `mediatype` FROM `media` WHERE `bus_id_fk` = "'. $_SESSION['bus_id_fk'].'"  order by `mediatype` asc';
        $rs=$DBH->query($quee);
        while($row = $rs->fetch_assoc()){ 
        echo "<option value=$row[media_id]>$row[mediatype]</option>";
        }
        ?>
        </select>
        </div>

如果我点击[添加新媒体],会出现一个模型,我可以在其中添加值。 enter image description here

<div id="medium_m" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"><i class="icon-paragraph-justify2"></i> Add New Medium </h4>
        </div>

        <!-- Form inside modal -->
        <form action="#" role="form" id="med1">

            <div class="modal-body with-padding">                          

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-9">
                            <label>First Medium</label>
                            <input type="text" name="fname" placeholder="Eugene" class="form-control">
                        </div>

                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                <button type="submit" id = "m_btn" class="btn btn-primary">Submit form</button>
            </div>

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

点击提交表单(AJAX)

    $(document).ready(function(){
    $('#med1').submit(function(){

            var formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: 'addmedium.php', 
                //data: formData.serialize()
                data: $(this).serialize()
            })
            .done(function(data){
                $('#response').html(data);
                if(data.status == 'success'){
                    $("#divmedium").html(data);

                }else if(data.status == 'error'){
                    alert("Error on query!");
                }
        })
            .fail(function() {

            // just in case posting your form failed
            alert( "Posting failed." );

        });

        // to prevent refreshing the whole page page
        return false;

    });
  });

addmedium.php

    <?php

session_start(); 
INCLUDE './config/databases.php';  
header('Content-type: application/json');

$loc= $_POST['fname'];
$busid=$_SESSION['bus_id_fk'];
$sql = "INSERT INTO media (mediatype,bus_id_fk)VALUES ( '$loc','$busid' )";


//echo $sql;
if ($DBH->query($sql) === TRUE) {
  //  echo "New record created successfully";
} else {
   // echo "Error: " . $sql . "<br>" . $DBH->error;
}
$response_array['status'] = 'success';
echo json_encode($response_array);  

exit;
?>

现在问题是

  1. 数据插入数据库但我无法刷新 格,
  2. 点击submit form模型后并没有消失。我需要点击关闭或模特以外的其他地方。
  3. 点击Submit form后,div divmedium正在消失。
  4. 让我知道我做错了什么。

1 个答案:

答案 0 :(得分:0)

如果你不介意的话,我会从最后开始。

  1. 点击提交表格后,div divmedium正在消失。
  2. 在您的AJAX代码$("#divmedium").html(data);中,您正在用divmedium

    替换json_encode($response_array);内容
    1. 点击提交表单模型后不会消失。我需要点击关闭或模特以外的其他地方。
    2. 我没有看到任何应该关闭它的代码。尝试添加data-dismiss="modal"

      1. 数据已插入数据库但我无法刷新div
      2. 与第3个问题相同,检查this并编辑您的AJAX成功回调。