PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

jquery ไม่ทำงานร่วมกัน ในการใช้งาน fancybox และ google chart

jquery ไม่ทำงานร่วมกัน ในการใช้งาน fancybox และ google chart
จากตัวอย่าง
http://www.ninenik.com/%E0%B9%81%E0%B8%99%E0%B8%B0%E0%B8%99%E0%B8%B3_%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%81%E0%B8%A3%E0%B8%B2%E0%B8%9F%E0%B9%81%E0%B8%99%E0%B8%A7%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87_%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2_google_chart_%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2-592.html
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
ไปชนกันกับโค้ดเรื่อง fancybox
http://fancyapps.com/fancybox/
 
จะทำอย่างไรจึงจะใช้ในหน้าเดียวกันได้ค่ะ
 
 
 


โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 27-01-2015 เวลา: 15:30:36

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 4
ได้แล้วค่ะ
หน้าแรกก็ไว้อย่างเดิม คือ
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Add fancyBox -->
<link rel="stylesheet" href="../fancybox/fancybox2/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="../fancybox/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"></script>
......
 $.fancybox({
                 //closeBtn:false,
                  content:$.ajax({       
                      width:500,
                      url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                     data:'dataVal1='+data_col1,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
//  data: {'dataVal1': data_col1, 'dataVal2': data_col2},
                      async:false       
                  }).responseText    
            });

ส่วนหน้า get_content.php

ก็ใส่โค้ด fancybox อีกชุด

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 <link rel="stylesheet" href="../fancybox/fancybox2/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
 <script type="text/javascript" src="../fancybox/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"></script>      
  <script type="text/javascript">
$(document).ready(function() {
$("a#example3").fancybox({
'type' : 'iframe',
'width' : '60%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script> 
ขอบคุณนะคะ 


โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 28-01-2015 เวลา: 09:58:38
 ความคิดเห็นที่ 3
น่าจะมีไฟล์ที่เกียวข้องหลายไฟล์ คงต้องไล่เอง อันนี้แนะนำไม่ได้   
หรือลอง แบบนี้แทน ใช้เป็น iframe ตั้งแต่ popup แรก มี การใช้งาน facybox ครั้งเดียว ตอกกดที่กราฟ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Add fancyBox -->
<link rel="stylesheet" href="../fancybox/fancybox2/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="../fancybox/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

//ย่อโค้ดส่วนที่ไม่เกี่ยวข้องกับที่ถามออก
  // When the table is selected, update the orgchart.
        google.visualization.events.addListener(chart, 'select', function() {
            selection = chart.getSelection();  
            var data_col1=text_alert[selection[0].row][selection[0].column];   // เก็บค่าข้อมูลของคอลัมน์ที่ได้
		//	var data_col2=text_alert[selection[0].row+1][selection[0].column];
            $.fancybox({
	'type' : 'iframe',
	'width' : '60%',
	'height' : '100%',
	'autoScale' : true,
                  'content':$.ajax({       
                      width:500,
                      url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                     data:'dataVal1='+data_col1,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
					 //  data: {'dataVal1': data_col1, 'dataVal2': data_col2},
                      async:false       
                  }).responseText    
            });

	});

        });
          
      }
    </script>   
</body>
</html>



ส่วนลิ้งค์ในไฟล์ get_content.php ก็เป็นลิ้งค์ธรรมดา ไม่ต้องกำหนดเป็น fancybox





โดย:  Ninenik IP: 1.46.208.xxx วันที่: 27-01-2015
 ความคิดเห็นที่ 2
หน้า show.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Add fancyBox -->
<link rel="stylesheet" href="../fancybox/fancybox2/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="../fancybox/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

//ย่อโค้ดส่วนที่ไม่เกี่ยวข้องกับที่ถามออก
  // When the table is selected, update the orgchart.
        google.visualization.events.addListener(chart, 'select', function() {
            selection = chart.getSelection();  
            var data_col1=text_alert[selection[0].row][selection[0].column];   // เก็บค่าข้อมูลของคอลัมน์ที่ได้
		//	var data_col2=text_alert[selection[0].row+1][selection[0].column];
            $.fancybox({
                 //closeBtn:false,
                  content:$.ajax({       
                      width:500,
                      url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                     data:'dataVal1='+data_col1,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
					 //  data: {'dataVal1': data_col1, 'dataVal2': data_col2},
                      async:false       
                  }).responseText    
            });
			$(document).ready(function() {
			$("a#example3").fancybox({
				'type' : 'iframe',
				'width' : '60%',
				'height' : '100%',
				'autoScale' : false,
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'
		});
	});

        });
          
      }
    </script>   
</body>
<!DOCTYPE html>
</html>


หน้า get_content.php
echo "<b>".$row['cname']."</b><a id='example3' href='viewQT.php?idx=$row[codeQT]'><b>(".$row['codeQT'].")</b></a> ";

รูปหน้า chart






โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 27-01-2015 เวลา: 17:03:58
 ความคิดเห็นที่ 1
วางโค้ดปิดหรือเปล่า ลองดูตัวอย่างเป็นแนวทาง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
</head>
<body>

<div style="margin:auto;width:80%;">
<div id="chart_div" style="margin:auto;width:600px;height:400px;"></div>  
<a class="fancybox" rel="group" href="picup/1416976392-1.jpg">
<img src="picup/1416976392-1.jpg" alt="" style="width:100px;" />
</a>
<a class="fancybox" rel="group" href="picup/1416989573-1.jpg">
<img src="picup/1416989573-1.jpg" alt="" style="width:100px;" />
</a>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
    // สร้างตัวแปร array เก็บค่า ข้อมูล
    var dataArray1=[
      ['ปี', 'ยอดขาย', 'ค่าใช้จ่าย'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]            
    ];
        
    // แปลงข้อมูลจาก array สำหรับใช้ในการสร้าง กราฟ
    var data = google.visualization.arrayToDataTable(dataArray1);

    // ตั้งค่าต่างๆ ของกราฟ
    var options = { 
        title: "หัวข้อกราฟ",
        hAxis: {title: 'ข้อความแนวนอน', titleTextStyle: {color: 'red'}},
        vAxis: {title: 'ข้อความแนวตั้ง', titleTextStyle: {color: 'blue'}},
        width: 600,
        height: 400,
        bar: {groupWidth: "70%"},
        legend: { position: 'right', maxLines: 3 },
        tooltip: { trigger: 'select' }
    };

    // สร้างกราฟแนวตั้ง แสดงใน div id = chart_div
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options); // สร้างกราฟ
    
}
$(function(){
    $(".fancybox").fancybox();    
});
</script>       
</body>
</html>


โดย:  Ninenik IP: 115.87.69.xxx วันที่: 27-01-2015