Hi… I created input with onchange event. When I just open the page, the script won’t work, but if I reload again the page the script work correctly… ofcourse being problem when I have to always reload the page to make the script work… Please somebody help, I waste my time really much for this… And this is my code:
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only" data-i18n="home">Home</span>
</a>
</div>
<div class="title md-only" data-i18n="booking">Tambah Booking</div>
<div class="subnavbar ios-only">
<div class="subnavbar-inner">
<div class="title" data-i18n="booking">Tambah Booking</div>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="list no-hairlines no-hairlines-between">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Tanggal Booking</div>
<div class="item-input-wrap">
<input type="date" name="tanggal_booking" id="tanggal_booking"/>
<!-- <input type="text" name="tanggal_booking" id="tanggal_booking"/> -->
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Jam Booking</div>
<div class="item-input-wrap">
<input type="time" name="jam_booking" id="jam_booking" placeholder="Select"/>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li>
<div id="kolom_dokter_kosong"></div>
</li>
<li class="item-content item-input" id="form_pilih_dokter">
<div class="item-inner">
<div class="item-title item-label">Pilih Dokter</div>
<div class="item-input-wrap input-dropdown-wrap">
<select name="id_dokter" id="id_dokter" required>
<option value=""> Pilih Dokter </option>
</select>
</div>
</div>
</li>
<li>
<div id="kolom_dokter_sudah_dibooking"></div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-floating-label">Keterangan</div>
<div class="item-input-wrap">
<textarea class="resizable" name="keterangan" id="keterangan"></textarea>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<button class="button button-big button-fill" name="mulai_booking" id="mulai_booking">
<span>Booking Dokter</span>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<style scoped>
.fa-stack {
width: 2em;
}
.custom-list .item-row .item-cell {
box-sizing: border-box;
color: #000;
padding: 4px;
text-align: center;
}
</style>
<script>
// alert(urlweb("url_api"));
return {
methods: {
cekOnokDokter: function(){
var self = this;
var docroot = app.data.config.app.urlweb;
let tanggal_booking = $("#tanggal_booking").val();
let jam_booking = $("#jam_booking").val();
if($("#jam_booking").val() != "" && $("#tanggal_booking").val() != ""){
$.ajax({
url: docroot+"api/tampilin_dokter_berdasarkanjadwal",
method: "POST",
data:{tanggal_booking: $("#tanggal_booking").val(), jam_booking: $("#jam_booking").val()},
success: function(response){
console.log(response[0].status);
if(response[0].status == "kosong"){
$("#id_dokter").html("");
$("#kolom_dokter_kosong").html("<div class='note note-warning'>Dokter tidak tersedia untuk tanggal <b>"+$("#tanggal_booking").val()+" "+$("#jam_booking").val()+"</b></div>");
$("#id_dokter").append("<option value='0'>Booking tanpa Dokter</option>");
$("#kolom_dokter_sudah_dibooking").html("");
}else{
$("#id_dokter").html("<option></option>");
$("#kolom_dokter_kosong").html("");
$("#kolom_dokter_sudah_dibooking").html("");
for(var key in response){
$("#id_dokter").append("<option value='"+response[key].id_dokter+"'>"+response[key].nama+"</option>");
}
}
}
});
$("#form_pilih_dokter").show();
}else{
$("#form_pilih_dokter").hide();
}
},
hitunginJumlahBooking: function() {
var docroot = app.data.config.app.urlweb;
$.ajax({
method: 'get',
url: docroot + 'api/mybooking_jumlah/' + localStorage.getItem('ses_id_pasien'),
dataType: 'json',
success: function(data) {
$('#jumlah_booking').html(data);
//console.log("datanya :"+data);
}
});
},
resetFormPopup: function() {
$("#form_tanggal_booking").hide();
$(".jadwal_dokter").html('');
$("#tanggal_booking").val('');
$("#jam_booking").val('');
$("#keterangan").val('');
$("#id_dokter").val('');
}
},
on: {
pageInit: function() {
var self = this;
var docroot = app.data.config.app.urlweb;
$("#form_pilih_dokter").hide();
$('#tanggal_booking').on('change', function() {
self.cekOnokDokter();
});
$('#jam_booking').on('change', function() {
self.cekOnokDokter();
});
$('#mulai_booking').on('click', function() {
var id_dokter = document.getElementById("id_dokter").value;
var tanggal_booking = document.getElementById("tanggal_booking").value;
var jam_booking = document.getElementById("jam_booking").value;
var keterangan = document.getElementById("keterangan").value;
// alert("hehe");
console.log(docroot);
$.ajax({
cache: false,
method: 'post',
url: docroot + "api/tambah_booking_dokter",
data: {
id_dokter: id_dokter,
jam_booking: jam_booking,
tanggal_booking: tanggal_booking,
keterangan: keterangan,
id_pasien: localStorage.getItem('ses_id_pasien'),
nama_pasien: localStorage.getItem('ses_nama'),
no_telp: localStorage.getItem('ses_no_telp'),
status: '0'
},
success: function(data) {
app.toast.show({
icon: '<i class="icon fas fa-lg fa-check"></i>',
text: 'Berhasil menambah data.',
position: 'bottom',
cssClass: 'toast-round bg-color-green'
});
self.hitunginJumlahBooking();
self.resetFormPopup();
self.$router.navigate('/home');
// self.$router.back('/booking', {
// 'force': true
// });
},
error: function(output) {
// console.log(output);
app.toast.show({
icon: '<i class="icon fas fa-lg fa-times"></i>',
text: 'Gagal menambah data.',
position: 'bottom',
cssClass: 'toast-round bg-color-red'
});
}
});
});
$.ajax({
method: 'get',
url: docroot + 'api/data_dokter',
dataType: 'json',
success: function(data) {
var dotone = "<option value=''> Pilih Dokter </option>";
for (i = 0; i < data.length; i++) {
dotone += "<option value='" + data[i].id_dokter + "'>" + data[i].nama + "</option>";
}
$('#id_dokter').html(dotone);
}
});
}
}
}
</script>