Javascript firebase查询无法正常工作

时间:2017-03-10 07:09:27

标签: javascript firebase firebase-realtime-database alert

我的用户表格如下:

<!DOCTYPE html>
<html>
<head>
  <title>Firebase Web Basics</title>
  <link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body onload="retrieveUser()">
  <div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
      <div class="mdl-layout-icon"></div>
      <div class="mdl-layout__header-row">
        <span class="mdl-layout__title">User Details</span>
        <div class="mdl-layout-spacer"></div>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="index.html">Home</a> <a class="mdl-navigation__link" href="acess_points.html">Access Points</a> <a class="mdl-navigation__link" href="events.html">Events</a> <a class="mdl-navigation__link" href="holidays.html">Holiday</a> <a class="mdl-navigation__link" href="notification.html">Notifications</a> <a class="mdl-navigation__link" href="organization.html">Organizations</a> <a class="mdl-navigation__link" href="timestamps.html">Time Stamps</a> <a class="mdl-navigation__link" href="users.html">Users</a>
        </nav>
      </div>
    </header>
    <div>
      <div class="container">
        <div class="col-md-5">
          <form id="form" name="form">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" id="uEmail" type="email"> <label class="mdl-textfield__label" for="sample3">Email</label>
            </div><br>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" id="fName" type="text"> <label class="mdl-textfield__label" for="sample3">First Name</label>
            </div><br>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" id="lName" type="text"> <label class="mdl-textfield__label" for="sample3">Last Name</label>
            </div><br>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" id="password" type="password"> <label class="mdl-textfield__label" for="sample3">Password</label>
            </div><br>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" id="tName" type="text"> <label class="mdl-textfield__label" for="sample3">Team Name</label>
            </div><br>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <label class="mdl-textfield__label" for="sample3">SSID</label><br>
              <select id="ssId" multiple>
              </select>
            </div><br>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <label class="mdl-textfield__label" for="sample3">Organization Id</label><br>
              <select id="org_id">
              </select>
            </div><br>
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="submitButton" onclick="submitClickUser()" type="submit" value="Submit">Submit</button>
          </form>
        </div>
        <div class="col-md-7">
          <table class="mdl-data-table mdl-js-data-table">
            <thead>
              <tr>
                <th>User Id</th>
                <th>Email</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Password</th>
                <th>Team Name</th>
                <th>SSID</th>
                <th>BSSID</th>
              </tr>
            </thead>
            <tbody id="table_body"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <script src="https://www.gstatic.com/firebasejs/3.7.0/firebase.js">
  </script> 
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "*********",
      authDomain: "**************",
      databaseURL: "***************",
      storageBucket: "**************",
      messagingSenderId: "************"
    };
    firebase.initializeApp(config);
  </script> 
  <script src="user.js" type="text/javascript">
  </script> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
  </script> 
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js">
  </script>
</body>
</html>

user.js这样的文件:

//User Details
var userEmail = document.getElementById("uEmail");
var firstName = document.getElementById("fName");
var lastName = document.getElementById("lName");
var passwd = document.getElementById("password");
var teamName = document.getElementById("tName");
var organization_id = document.getElementById("org_id");
var submitButton = document.getElementById("submitButton");

function submitClickUser() {
  // user  info to firebase
  var uEmail = userEmail.value;
  var fName = firstName.value;
  var lName = lastName.value;
  var password = passwd.value;
  var tName = teamName.value;
  var firebaseRef = firebase.database().ref().child("users");
  var newPostRef = firebaseRef.push();
  newPostRef.set({
    Email: uEmail,
    FirstName: fName,
    LastName: lName,
    Password: password,
    TeamName: tName
  });
  var key = newPostRef.key;
  var ss_id = document.getElementById("ssId");
  for (var i = 0; i < ss_id.options.length; i++) {
    if (ss_id.options[i].selected == true) {
      var query = firebase.database().ref('/access_points').orderByChild('SSID').equalTo(ss_id.options[i].value);
      alert(ss_id.options[i].value);
      query.on('value', data => {
        alert(query);
        data.forEach(userSnapshot => {
          var user = userSnapshot.val();
          var key1 = userSnapshot.key;
          var firebaseRef2 = firebase.database().ref().child("users/" + key).child("AccessPoint").child(key1).set({
            SSID: user.SSID,
            BSSID: user.BSSID
          });
          alert("Values inserted");
        });
      });
    }
  }
  // organization input
  var value = organization_id.value;
  var query = firebase.database().ref('/organization').orderByChild('OrganizationName').equalTo(value);
  query.on('value', data => {
    data.forEach(userSnapshot => {
      var key1 = userSnapshot.key;
      var firebaseRef2 = firebase.database().ref().child("users/" + key).child("OrganizationId").set(key1);
      alert("Values inserted");
    });
  });
}
// Retrieve multiple user
function retrieveUser() {
  // collecting keys in an array for users
  var rootRef2 = firebase.database().ref().child("access_points");
  var keys1 = [];
  rootRef2.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var childKey = childSnapshot.val();
      keys1.push(childKey.SSID);
    });
    var i;
    for (i = 0; i < keys1.length; i++) {
      $("#ssId").append("<option>" + keys1[i] + "</option>");
    }
  });
  // collecting keys in an array for organization
  var rootRef3 = firebase.database().ref().child("organization");
  var keys2 = [];
  rootRef3.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var childKey = childSnapshot.val();
      keys2.push(childKey.OrganizationName);
    });
    var i;
    for (i = 0; i < keys2.length; i++) {
      $("#org_id").append("<option>" + keys2[i] + "</option>");
    }
  });
}

问题是当我为SSID输入多个select时,表单将所有数据放在firebase中但是当我只选择多个选项时,选择函数SubmitClickUser()中的firebase查询停止工作。它与javascript有关,我意外地在电子邮件字段中输入了名称,因此在给出电子邮件验证错误时,查询适用于单个选择。 有人可以弄清楚什么是错的?

0 个答案:

没有答案