reloading a select drop down box without refreshing the page

Question

I have a drop down list that is dynamically filled with categories using php embeded in the html as follows:

<select name="select" id="choosevidCat" required class="choosevidCat">
<option>Choose the Catagory for your Video Here</option>
            <?php 
    $sql = ("SELECT albumId, albumName FROM albums");
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($mysqli, $sql);

while($row = mysqli_fetch_array($result)) {
$albumid = ($row['albumId']);
$album_name = ($row['albumName']);
echo "<option value=".$albumid. ">$album_name</option>";
}

?>


<option id="createCat" value="createCatagory">Create New Catagory Here</option>
</select>

on the option with id of "createCatagory" a pop up opens and allows the creation of a new category folder on the server using an ajax call as follows:

<script type="text/javascript">

$(document).ready(function() {


        $("#vidcatBut").click(function()    {

//  event.preventDefault();


        var albumName = $("#albumName").val();


        $.post("includes/createAlbum.php",{albumName: albumName}, function(json)
         {

            if(json.result === "success") {

        $("#vidcatResult").html( "The Album "+albumName+"has been Created!");


    }else{
        $("#vidcatResult").html(json.message);
    }   

         })

$('#choosevidCat').load(location.href + "#choosevidCat");

    });//click function
});//ready function
</script>

What I would like to happen is when the create button is clicked that the select list will reload and reflect the new category in the drop down list without the need to refresh the page after the pop up box is closed. is this possible please

Answer 1

You can use jQuery's append to append your new category within the container that contains your categories.

---

An example:

$(".categoryContainer").append('<div class="category">My new Category</div>');

You can easily modify the above to append to your option list instead of a container

Note: I suggest you do this on the success callback of your AJAX call to make sure that it has already been saved on your server before appending.

$("#appendBtn").click(function() {
  $(".container").append("<div class='category'>New Category</div>");

})

.container {
  margin: 0 auto;
  width: 320px;
  height: auto;
  padding-bottom: 64px;
  background-color: #999;
}
#appendBtn {
  display: block;
  margin: 12px auto;
  padding: 12px;
  font-size: 14px;
  cursor: pointer;
}
.category {
  width: 90%;
  height: 32px;
  margin: 0 auto;
  line-height: 32px;
  text-align: center;
  background-color: #eee;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="category">Category</div>
  <div class="category">Category</div>
  <div class="category">Category</div>
</div>

<button id="appendBtn">Append Category</button>

Answer 2

You could remove all the current options using jQuery's .empty() and then load the contents of the select box in the POST success callback like this:

$.post("includes/createAlbum.php",{albumName: albumName}, function(json)
{

    if(json.result === "success") {

        $("#vidcatResult").html( "The Album "+albumName+"has been Created!");

        // First remove all the existing options
       $('#choosevidCat').empty();

        // Load the content:
        $('#choosevidCat').load(location.href + "#choosevidCat > *");

    } else {
        $("#vidcatResult").html(json.message);
    }   

})

Using #choosevidCat > * in the load() function adds all of #choosevidCat's children (all of the options) into the select box. Otherwise (using just #choosevidCat), jQuery will add the select box into the existing select box, like this:

<select name="select" id="choosevidCat">

    <select name="select" id="choosevidCat">

        ...

    </select>

</select>