Select not working - options not appearing on click

Question

I created a select tag using materialize CSS. creating options for this select tag dynamically. retrieve data from firebase then create the options. but options are not displayed when I click on the select tag. but when I go to inspect it will display those options are in the select tag. how to solve this

this is how 'chrome inspect' and the result looks like

this is HTML the part

<!DOCTYPE html>
<html>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
  />

  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
  />


  <!-- Compiled and minified JavaScript -->

  <!-- <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  /> -->

  <head>
    <title></title>
  </head>
  <body>
    <div class="container">
      <h2>Create schedule</h2>

      <div class="input-field col s12">
    <select id="doctors"  onchange="myFunction()">
      <option value="0" disabled selected>Choose your option</option>
    </select>
    <label>Materialize Select</label>
  </div>
</div>







    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>

    <script src="config.js"></script>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
      $(document).ready(function() {

        $('select').formSelect();

      });
    </script>

    <script src="doctor_scheduler_JS.js"></script> //external js file
  </body>
</html>

external js file (doctor_scheduler_JS.js)

const auth = firebase.auth();
const db = firebase.firestore();

var doctorsnames=[];
var doctorsuids=[];

const dropdown = document.getElementById("doctors");
const option1 = document.createElement("option");


db.collection("doctors")
    .get()
    .then(function(querySnapshot) {

        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
           // var js = JSON.stringify(doc.data());
           // document.getElementById("container25").innerHTML = js;
            doctorsnames.push(doc.data().Name.fullname);

            doctorsuids.push(doc.id);


        });
        SetDropDown();

    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });


    function SetDropDown(){


      var loop = 0;

      doctorsnames.forEach(k=>{
        //feildcotorsnames +=k + "<br>";

        var option1 = document.createElement("option");
        option1.value =doctorsuids[loop];
        option1.innerHTML =k;
        dropdown.appendChild(option1);
        loop++;
      });

      document.getElementById("container25").innerHTML = doctorsuids;

    }



    var show = ["india","pakisthan","usa","uk"];
    var values = ["3","4","5","6"];

    var j=0;
    show.forEach(i=>{

        const option1 = document.createElement("option");
            option1.value =values[j];
            option1.innerHTML =i;
            dropdown.appendChild(option1);
            j++;

    });

It seems that there is a type mismatch in your `data` field. Try to send a simple `string` (it may be a stringified JSON object). Also, take a look at this: https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery . Anyway, you should put more effort in posing your questions. — gscaparrotti, Feb 11 '20 at 19:15

score 1 · Answer 1 · answered Feb 11 '20 at 19:20

The problem lies in this section of your code

$.ajax({
        url: 'upload.php', // point to server-side PHP script 
        data: form_data,                         
        type: 'post',
        success: function(data){
            console.log(data); // display response from the PHP script, if any
        }
     });

Add these parameter to your ajax call

    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        data: form_data,         
        enctype: 'multipart/form-data',
        type: 'post',
        processData: false,
        contentType: false,
        success: function(data){
            console.log(data); // display response from the PHP script, if any
        }
     });

Refer to Jquery documentation here https://api.jquery.com/jQuery.ajax/

processData

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data

score 0 · Answer 2 · answered Feb 12 '20 at 05:17

0

Just add a form with enctype="multipart/form-data" in it then use that form in your form data

answered Feb 12 '20 at 05:17

dlan

103
8

Select not working - options not appearing on click

2 Answers2