0
Firebase 프로젝트의 상태 데이터를 HTML 사이트로 변경하거나 javascript (.js)를 사용하여 Firebase 프로젝트에 연결할 수 없습니다. Firebase의 상태 데이터를 변경하기위한 체크 박스를 만들었습니다. 하지만 Firebase에서 데이터 값을 변경할 수는 없습니다. ID 체크 박스를 변경했는데 결과가 없습니다. 누구든지 나를 도와주세요. 나는 초보자이다. 이건 내 HTML 코드웹 기반 Firebase의 상태 데이터 변경 (true/false)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description">
<meta name="author">
<title>
Web Kontrol
</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link href="assets/css/style.css" rel="stylesheet"> -->
<link href="assets/css/sh-default.css" rel="stylesheet" default-stylesheet="true" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body style="cursor: auto;">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href>Web Kontrol Lampu</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a data-target="#login" href>Login</a>
</li>
<!--<li>
<a data-target="#register" href>Signup</a>
</li>-->
<li>
<a data-target="#lists" href>Control</a>
</li>
<li>
<a id="logout" href>Logout</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="welcome"></div>
<div class="container tab default" id="login">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
<em class="stackhive-marker"></em>Login to Your Account
</h2>
<hr>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="login-email"><input type="password" class="form-control" placeholder="Password"
required="" id="login-password">
<button class="btn btn-primary" type="button" id="login-btn">
Login
</button>
<hr>
<div class="status alert alert-info hide"></div>
</form>
</div>
<div class="container tab hide" id="register">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
Daftar Akun Baru
</h2>
<hr>
<input type="text" class="form-control" placeholder="Your Name" required="" autofocus="" id="name"><input type="email" class="form-control" placeholder="Email address" required=""
autofocus="" id="email"><input type="password" class="form-control" placeholder="Password" required="" id="password">
<button class="btn btn-primary" type="button" id="signup-btn">
Masuk !
</button>
</form>
<hr>
<div class="status alert alert-info hide"></div>
</div>
<div class="container tab hide" id="lists">
<div class="status alert alert-info hide"></div><br>
<h1>Kontrol Lampu</h1>
<div align="center">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round-1" type="checkbox">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round-2" type="checkbox">
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="./firebasefunctions.js"></script>
<script type="text/javascript" src="./script.js"></script>
<!-- <script type="text/javascript" src="./script-coba.js"></script> -->
</body>
입니다 그리고 이것은 당신은 데이터 액세스 패턴의 모든 종류를 혼합하고
$(document).ready(function() {
//this URL to my FIrebase project
var ref = new Firebase("https://firesmartlamp.firebaseio.com/devices/smartlamp/parameters/");
/*****************************************************************
Get the status on Firebase
******************************************************************/
ref.once("value", function(res) {
var status = res.child("state").val(); //state is my data on Firebase
$('#cmn-toggle-1').attr('checked', status); //cmn-toggle-1 is my checkbox id
console.log("Statusnya: " +status)
});
ref.once("value", function(res) {
var status2 = res.child("state2").val();
$('#cmn-toggle-2').attr('checked', status);
console.log("Statusnya: " +status2)
});
/*****************************************************************
Sync to firebase
******************************************************************/
ref.on("child_changed", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
console.log("Cek: " +states)
});
ref.on("child_changed", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
console.log("Cek: " +states2)
});
/*****************************************************************
Update value, changed status of Switch
******************************************************************/
$('#cmn-toggle-1').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state: true }); //true and false are value of data on Firebase
}
else{
console.log("Off")
ref.update({ state: false });
}
});
$('#cmn-toggle-2').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state2: true });
}
else{
console.log("Off")
ref.update({ state2: false });
}
});
});
firebase에 [docs] (https://firebase.google.com/docs/web/setup)와 같은 앱 세부 정보로 연결하고 있습니까? 또한 버전 2를 사용 중입니다. 방금 시작하는 경우 현재 버전 3.1을 사용하십시오. 그렇지 않으면 기존 문서를 사용하고 있는지 확인해야합니다. –
브라우저 콘솔에 오류가 있습니까? –
또한 jQuery UI가 포함되어 있습니다. jQuery 자체를 포함 시켰습니까? –