j query updating div of drop-down after inserting data

Question

I have a drop down which i am filling from database (ss and source attached)

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>

if i click on [Add New Medium] , a model appears in which i can add value. 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>

click on submit form (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;
?>

Now the problem is

data getting inserted in the database but i am unable to refresh the div,
After clicking on submit form model is not disappearing. i need to click on close or some where else besides model.
after clicking on Submit form , the div divmedium is disappearing.

Let me know what i am doing wrong.

2) after submit the form, you can call the hide() in success or complete of ajax, for disappear the modal with that id — amtest, Jan 22 '15 at 07:15

score 0 · Answer 1 · edited May 23 '17 at 12:20

I'll start from the end, if you won't mind.

after clicking on Submit form , the div divmedium is disappearing.

In your AJAX code $("#divmedium").html(data); you are replacing divmedium content with json_encode($response_array);

After clicking on submit form model is not disappearing. i need to click on close or some where else besides model.

I don't see any code that should close it. Try to add data-dismiss="modal"

data getting inserted in the database but i am unable to refresh the div

Same stuff as in 3rd question, check this and edit your AJAX success callback.

j query updating div of drop-down after inserting data

1 Answers1