ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

ภาพประจำตัวสมาชิก
secivon
PHP Full Member
PHP Full Member
โพสต์: 35
ลงทะเบียนเมื่อ: 24/03/2009 5:15 pm

ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ

โพสต์ที่ยังไม่ได้อ่าน โดย secivon »

อธิบายไม่ค่อยถูกแฮะ รบกวนพยายามทำความเข้าใจหน่อยนะครับ - -''

ประมาณว่า ถ้าผมต้องการเขียน jQuery event handler ให้มันไป bind กับ DOM element ที่ generate on-the-fly ( เช่น generate มาจาก AJAX ) เนีย เท่าที่ทราบ คือ jQuery จะใช้ live() ในการ bind object กับ event เอา

ประเด็น คือ เท่าที่ผมดู Tooltip Plugin ผ่านๆมา 2-3 ตัว ( qtip2 , jQuery bubble popup )
ไม่ค่อยพูดถึงกรณีนี้เท่าไหร่อ่ะครับ ส่วนใหญ่จะเป็น static element มากกว่า (ส่วนใหญ่จะเน้นว่าไปดึง dynamic content มาแสดงในตัว tooltip ได้) โดยที่ส่วนใหญ่ plugin พวกนี้ จะเข้าไป handle พวก mouse event เองอยู่แล้ว

คำถามครับ
1.ถ้าผมจะทำให้ on-the-fly DOM นี่ทำงานร่วมกันกับ Tooltips Plugin นี่ มี Plugin ตัวไหนที่เป็น native (ไม่ต้องเขียน code จัดการ bind new Element / Event ) เลยไหมครับ
2.ถ้าจำเป็นต้องใช้ live() เข้ามาช่วยจริงๆ eventType ควรจะต้องเป็นอะไรครับ ( ไม่น่าจะเป็น mouse event ?)


ขอบคุณครับ
"อย่าเอาแต่โทษเด็ก ถ้าเด็กมันจะห่วย ดูตัวเองบ้างว่าทำบ้านเมืองไว้เป็นยังไง"
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41239
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

อ่านสองรอบ ล่ะ ยังไม่ค่อยเข้าใจเท่าไร
พอมีรูปตัวอย่างไหมครับ
แต่ที่เคยทำ DOM จะมีปัญหาเยอะถ้าเราสร้างอะไรขึ้นมาใหม่จาก DOM แล้ว เอามันไปใช้งานต่อ
แต่ถ้าเป็น html จาก Tooltip แล้วเรียกใช้งานอย่างอื่นอีกชั้นไม่น่าจะมีปัญหา
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
secivon
PHP Full Member
PHP Full Member
โพสต์: 35
ลงทะเบียนเมื่อ: 24/03/2009 5:15 pm

Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ

โพสต์ที่ยังไม่ได้อ่าน โดย secivon »

แทรกโค้ดไว้หน่อยนะครับ

โค้ด: เลือกทั้งหมด

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.css" />
<link rel="stylesheet" type="text/css" href="jquery.qtip.css" />
<script type="text/javascript">


$(document).ready(function() {
			$('.hoverable').qtip({
				content : {text : 'This is Random Text<img src="http://www.google.com/intl/th/images/logos/translate_logo.gif">'  }
				, position: { my: 'top center' , at : 'bottom center'}
				, style: {
					   classes: 'ui-tooltip-shadow ui-tooltip-light' 
					}
		   });		

			$('#main').html('<div class="hoverable" style="width:500px;height:300px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , &nbsp; hover me , live() binding will active , while qtip() will not</div>');

			$('.hoverable').live('mouseover', function() {
				$(this).css('border','solid 1px red');
			});
			$('.hoverable').live('mouseout', function() {
				$(this).css('border','');
			});

});
</script>
<div id="demo-tips" class="hoverable" style="background:#E1E1E1;padding:15px;">I'm static Element, Hover me!  both live() and qtip() should do the trick</div>
<center id="main"> </center>
<div id="divDebug"></div>
จากโค้ดคร่าวๆนี้ ผมอยาก apply tooltip กับ class ที่เป็น hoverable ทั้งหมด ซึ่งมีทั้ง static DOM และ on-the-fly ที่มาจาก AJAX ครับ (ใน code เอาเป็นว่า inject string ดื้อๆไปละกัน - -'')
ประเด็นคือ
1.เท่าที่ดูมา ไม่มี jQuery tooltip plugin ตัวไหน ที่ bind ตรงนี้ให้โดยอัตโนมัติ (แทบไม่พูดถึงเลย) เพื่อหลีกเลี่ยงความยุ่งยากในการ binding Element / Event (ดู 2. ประกอบ) ก็เลยอยากจะถามว่ามีใครพอรู้จัก Tooltips ที่มี feature ตรงนี้ให้แล้วบ้างไหมครับ
2.ถ้าหลีกเลี่ยงไม่ได้ และจำเป็นต้อง bind เอง , parameter eventType ของ live() เนี่ย ควรจะเป็นอะไรครับ เท่าที่คิดไว้ไม่น่าเป็น mouse event เพราะใน jQuery tooltip plugin น่าจะมีส่วนที่ handle event ตรงนี้ไว้แล้ว?
นั่นก็คือ ผมไม่รู้ว่าจะต้องใช้ parameter eventType ใน line 19 ,22 เป็นอะไรน่ะครับ - -''
แนบไฟล์
tooltip.rar
code เดียวกัน open ได้เลยครับ
javascript code อยู่ที่ original site แล้ว
(770 ไบต์) ดาวน์โหลดแล้ว 321 ครั้ง
"อย่าเอาแต่โทษเด็ก ถ้าเด็กมันจะห่วย ดูตัวเองบ้างว่าทำบ้านเมืองไว้เป็นยังไง"
ภาพประจำตัวสมาชิก
imsn
PHP Super Member
PHP Super Member
โพสต์: 375
ลงทะเบียนเมื่อ: 07/05/2010 12:58 pm
ติดต่อ:

Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ

โพสต์ที่ยังไม่ได้อ่าน โดย imsn »

เข้ามาร่วมด้วย ช่วยกันงง
หมึนตึบไปเลยครับ
ช่วยตอบเพราะอยากโปรโหมทเว็บ คิคิคลิกเลย
หาเพื่อนฝรั่งคุย M ...
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41239
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ลองสร้าง function ไปเรียก อีกที
ข้อมูลที่ส่งมา เพิ่ม event เข้าไป ให้ event นั้นเรียก function ที่สร้างขึ้นมา

โค้ด: เลือกทั้งหมด

	$('#main').html('<div class="hoverable" onclick="getxx()"  style="width:500px;height:300px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , &nbsp; hover me , live() binding will active , while qtip() will not</div>');

โค้ด: เลือกทั้งหมด

function getxx() {
	alert('ทดสอบ');
}
ไม่รู้ตรงตามต้องการหรือเปล่านะครับ ได้ไม่ได้หรือ เข้าใจผิดยังไง ขออภัยด้วยครับ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
secivon
PHP Full Member
PHP Full Member
โพสต์: 35
ลงทะเบียนเมื่อ: 24/03/2009 5:15 pm

Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ

โพสต์ที่ยังไม่ได้อ่าน โดย secivon »

โอ้ว ขอบคุณท่าน webmaster มากเลยครับ ผมลืม idea การเรียก function ไปซะสนิท :oops:

ตอนนี้ได้ลองแก้ script ดูแล้วครับ แต่แทนที่จะฝัง event ลงไปใน Element ที่สร้างขึ้นมาใหม่
ก็เปลี่ยนเป็นเมื่อมีการจะแก้ไข / สร้าง element ใหม่ ( ในจุดที่จะเอาไปใช้คือรับ response ของ AJAX )
ก็ให้ Qtip ทำการ initialize() ใหม่หมดอีกครั้ง

โค้ด: เลือกทั้งหมด

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.css" />
<link rel="stylesheet" type="text/css" href="jquery.qtip.css" />
<script type="text/javascript">


$(document).ready(function() {

		function doQtipInit() {
			 $('.hoverable').qtip({
				content : {text : 'This is Random Text<img src="http://www.google.com/intl/th/images/logos/translate_logo.gif">'  }
				, position: { my: 'top center' , at : 'bottom center'}
				, style: {
					  classes: 'ui-tooltip-shadow ui-tooltip-light'
				   }
			 });      
		 }


         $('.hoverable').live('mouseover', function() {
            $(this).css('border','solid 1px red');
         });
         $('.hoverable').live('mouseout', function() {
            $(this).css('border','');
         });


		 $('#btnAddContent').click(function() {
			 $('#main').append('<div class="hoverable" style="width:500px;height:100px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , &nbsp; hover me , live() binding will active , while qtip() will not</div>');
			 doQtipInit();		 
		 })

		 // first call for static element
		 doQtipInit();

});
</script>
<div id="demo-tips" class="hoverable" style="background:#E1E1E1;padding:15px;">I'm static Element, Hover me!  both live() and qtip() should do the trick</div>
<center id="main"> </center>
<div id="divDebug"></div>

<input type="button" value="Add content" id="btnAddContent">
"อย่าเอาแต่โทษเด็ก ถ้าเด็กมันจะห่วย ดูตัวเองบ้างว่าทำบ้านเมืองไว้เป็นยังไง"
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 61