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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา jquery ไม่ทำงานร่วมกัน ในการใช้งาน fancybox และ google chart

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

จากตัวอย่าง

https://www.ninenik.com/แนะนำ_สร้างกราฟแนวตั้ง_ด้วย_google_chart_อย่างง่าย-592.html

ไปชนกันกับโค้ดเรื่อง fancybox

http://fancyapps.com/fancybox/

จะทำอย่างไรจึงจะใช้ในหน้าเดียวกันได้ค่ะ

Saranya2532 27-01-2015 15:30:36

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 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 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 27-01-2015 17:03

ความคิดเห็นที่ 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 27-01-2015

ความคิดเห็นที่ 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 28-01-2015 09:58

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน