PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

อยากจะแสดงผมการค้นหา ให้อยู่หน้าเดียวกัน พอกดปุ่มค้นหาแล้วให้อยู่หน้าเดียวกันครับ

อยากจะแสดงผมการค้นหา ให้อยู่หน้าเดียวกัน พอกดปุ่มค้นหาแล้วให้อยู่หน้าเดียวกันครับ
<script src="js/select.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    var searchroom = function(e) {
            if(document.getElementById("idroom").value == ""){
                    alert('กรูณาเลือกวันที่');
                    document.getElementById("idroom").focus();
            }else{
                $.ajax({
                    type: 'POST',
                    data: {idroom: e[0],
                    url: 'http://localhost/roombooking/fullcalendar_opt/cal_opt.php',
                    success: function(data) {
                        $('#calendar').html(data);
                    }
                });
                return false;
             }
        
    }    
</script>
<div class="container">
    <div class="row">
        <div class="box">
            <div class="col-md-6 col-md-offset-3 text-center">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <div class="form-group">
                            <form action="fullcalendar_opt/cal_opt.php" method="POST" class="form-horizontal" name="frmMain" onSubmit="Javascript:return fncSubmit();">
                                <label for="idroom" class="col-sm-2 control-label">ห้อง</label>
                                <div class="col-sm-6">
                                  <select id="idroom" name="idroom" class="form-control" placeholder="ระบุ ห้อง">     
                                    <?php
                                    $strSQL = "SELECT * FROM `bk_room_details` WHERE `id_room_type`='4'";
                                    $objQuery=$mysqli->query($strSQL); 
                                    while($objResuut = mysqli_fetch_array($objQuery))
                                    {

                                      ?>
                                      <option value="<?php echo $objResuut["idroom"];?>" ><?php echo $objResuut["room_name"];?></option>
                                      <?php
                                    }
                                    ?>
                                  </select>
                                </div>
                                <div class="form-group">
                                  <div class="col-sm-offset-1">
                                    <input type="submit" name="send" value="ค้นหาห้อง" class="btn btn-success">
                                  </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
form ค้นหา



อยากให้กดปุ่มค้นหาห้อง แล้วขึ้นปฏิทิน ในหน้าเดียวกันกับค้นหาอ่ะครับ พอดีอันเก่ามันลิงค์ไปอีกหน้าหนึ่งครับ


โค้ดหน้าปฏิทินครับ
<?php
@session_start();
include ('../session.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">


<link rel="stylesheet" type="text/css" href="http://www.helloweba.com/demo/css/main.css">
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<link rel="stylesheet" type="text/css" href="css/fancybox.css">

<style type="text/css">
		#calendar{width:960px; margin:20px auto 10px auto}
		.fancy{width:470px; height:auto}
		.fancy h3{height:30px; line-height:30px; border-bottom:1px solid #d3d3d3; font-size:14px}
		.fancy form{padding:10px}
		.fancy p{height:28px; line-height:28px; padding:4px; color:#999}
		.input{height:20px; line-height:20px; padding:2px; border:1px solid #d3d3d3; width:100px}
		.btn{-webkit-border-radius: 3px;-moz-border-radius:3px;padding:5px 12px; cursor:pointer}
		.btn_ok{background: #360;border: 1px solid #390;color:#fff}
		.btn_cancel{background:#f0f0f0;border: 1px solid #d3d3d3; color:#666 }
		.btn_del{background:#f90;border: 1px solid #f80; color:#fff }
		.sub_btn{height:32px; line-height:32px; padding-top:6px; border-top:1px solid #f0f0f0; text-align:right; position:relative}
		.sub_btn .del{position:absolute; left:2px}
</style>

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/jquery.fancybox-1.3.1.pack.js'></script>

    <?php
    include ('../connect.php');
    $_SESSION["idroom"] = $_POST['idroom'];
    $idroom1 = $_SESSION["idroom"];
    $sql2="SELECT*FROM bk_room_details WHERE idroom = '$idroom1'";//เรียกข้อมูลจากฟอร์มโดยกำหนดเงื่อนไข
    $sql_query=$mysqli->query($sql2); 
    $row=mysqli_fetch_assoc($sql_query);
    $idroom2 = $row['room_name'];
    $_SESSION["idroom1"] = $idroom1;

    $data = array();
    $query = "SELECT * FROM bk_room_booking WHERE room_name = '$idroom2'";
    if ($result = $mysqli->query($query)) {
        /* fetch object array */
        while ($obj = $result->fetch_object()) {

            if($obj->id_status == 1){
                $color = "#31B0D5";
                }
            if($obj->id_status == 2){
                    $color = "#449D44";
                }
            if($obj->id_status == 3){
                    $color = "#D9534F";
                }
            if($obj->id_status == 4){
                    $color = "#EC971F";
                }

            $data[] = array(
                'id' => $obj->id_booking,
                'title'=> $obj->room_name."
".$obj->tb_time_start.'-'.$obj->tb_time_end,
                'start'=> $obj->tb_date.'T'.$obj->tb_time_start,
                'end'=> $obj->tb_date.'T'.$obj->tb_time_end,
                'color'=>$color
                );
        }
        /* free result set */
        $result->close();
    }
    mysqli_close($mysqli);
    ?>

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '<?php echo date('Y-m-d');?>',
            events : <?php echo json_encode($data);?>,
            dayClick: function(date, jsEvent, view) {
			var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');
			$.fancybox({
				'type':'ajax',
				'href':'event.php?action=add&date='+selDate
			});
    	}
        });
        
    });

</script>
</head>
<body>
<div id="main" style="width:1060px">
   <div id='calendar' name="calendar"></div>
</div>
<p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p>
</body>
</html>


โดย:  SkNing Supattra IP: 49.49.241.xxx วันที่: 29-06-2016 เวลา: 11:57:31

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 3
ลองดูเนื้อหานี้เป็นแวทาง

แนวทางการค้นหาข้อมูลกิจกรรมในฐานข้อมูล ประยุกต์กับ fullcalendar 
http://www.ninenik.com/content.php?arti_id=721 via @ninenik


โดย:  Ninenik IP: 180.183.46.xxx วันที่: 29-06-2016
 ความคิดเห็นที่ 2
ผมทำ ajax แล้วทำไมปฏิทินมันไม่ขึ้น มันเกิดจากไฟล์ js หรือป่าวครับ


โดย:  SkNing Supattra IP: 49.49.241.xxx วันที่: 29-06-2016 เวลา: 15:24:13
 ความคิดเห็นที่ 1
เปลี่ยนรูปแบบการดึงข้อมูลเป็นแบบ ajax แล้วใช้วิธี
เมื่อเปลี่ยนค่ารายการค้นหา ให้ส่งค่าใหม่ไปแทน

การใช้งาน fullcalendar v.2.1.1 กับฐานข้อมูล สร้างปฏิทินกิจกรรม  
http://www.ninenik.com/content.php?arti_id=564 via @ninenik

ไว้ทำเป็นบทความเพิ่ม กรณีค้นหาข้อมูลใน fullcalendar

โดย:  Ninenik IP: 180.183.46.xxx วันที่: 29-06-2016