ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
Moderator: mindphp
- secivon
- PHP Full Member
- Posts: 35
- Joined: 24/03/2009 5:15 pm
ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
อธิบายไม่ค่อยถูกแฮะ รบกวนพยายามทำความเข้าใจหน่อยนะครับ - -''
ประมาณว่า ถ้าผมต้องการเขียน 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 ?)
ขอบคุณครับ
ประมาณว่า ถ้าผมต้องการเขียน 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
- Posts: 27109
- Joined: 22/09/2008 6:18 pm
- Contact:
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
อ่านสองรอบ ล่ะ ยังไม่ค่อยเข้าใจเท่าไร
พอมีรูปตัวอย่างไหมครับ
แต่ที่เคยทำ DOM จะมีปัญหาเยอะถ้าเราสร้างอะไรขึ้นมาใหม่จาก DOM แล้ว เอามันไปใช้งานต่อ
แต่ถ้าเป็น html จาก Tooltip แล้วเรียกใช้งานอย่างอื่นอีกชั้นไม่น่าจะมีปัญหา
พอมีรูปตัวอย่างไหมครับ
แต่ที่เคยทำ 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
ติดตาม 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
- Posts: 35
- Joined: 24/03/2009 5:15 pm
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
แทรกโค้ดไว้หน่อยนะครับ
จากโค้ดคร่าวๆนี้ ผมอยาก 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 เป็นอะไรน่ะครับ - -''
Code: Select all
<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 , 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>
ประเด็นคือ
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 เป็นอะไรน่ะครับ - -''
- Attachments
-
- tooltip.rar
- code เดียวกัน open ได้เลยครับ
javascript code อยู่ที่ original site แล้ว - (770 Bytes) Downloaded 255 times
"อย่าเอาแต่โทษเด็ก ถ้าเด็กมันจะห่วย ดูตัวเองบ้างว่าทำบ้านเมืองไว้เป็นยังไง"
- imsn
- PHP Super Member
- Posts: 375
- Joined: 07/05/2010 12:58 pm
- Contact:
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
เข้ามาร่วมด้วย ช่วยกันงง
หมึนตึบไปเลยครับ
หมึนตึบไปเลยครับ
ช่วยตอบเพราะอยากโปรโหมทเว็บ คิคิคลิกเลย
หาเพื่อนฝรั่งคุย M ...
หาเพื่อนฝรั่งคุย M ...
- mindphp
- ผู้ดูแลระบบ MindPHP
- Posts: 27109
- Joined: 22/09/2008 6:18 pm
- Contact:
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
ลองสร้าง function ไปเรียก อีกที
ข้อมูลที่ส่งมา เพิ่ม event เข้าไป ให้ event นั้นเรียก function ที่สร้างขึ้นมา
ไม่รู้ตรงตามต้องการหรือเปล่านะครับ ได้ไม่ได้หรือ เข้าใจผิดยังไง ขออภัยด้วยครับ
ข้อมูลที่ส่งมา เพิ่ม event เข้าไป ให้ event นั้นเรียก function ที่สร้างขึ้นมา
Code: Select all
$('#main').html('<div class="hoverable" onclick="getxx()" style="width:500px;height:300px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , hover me , live() binding will active , while qtip() will not</div>');
Code: Select all
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
ติดตาม 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
- Posts: 35
- Joined: 24/03/2009 5:15 pm
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
โอ้ว ขอบคุณท่าน webmaster มากเลยครับ ผมลืม idea การเรียก function ไปซะสนิท
ตอนนี้ได้ลองแก้ script ดูแล้วครับ แต่แทนที่จะฝัง event ลงไปใน Element ที่สร้างขึ้นมาใหม่
ก็เปลี่ยนเป็นเมื่อมีการจะแก้ไข / สร้าง element ใหม่ ( ในจุดที่จะเอาไปใช้คือรับ response ของ AJAX )
ก็ให้ Qtip ทำการ initialize() ใหม่หมดอีกครั้ง

ตอนนี้ได้ลองแก้ script ดูแล้วครับ แต่แทนที่จะฝัง event ลงไปใน Element ที่สร้างขึ้นมาใหม่
ก็เปลี่ยนเป็นเมื่อมีการจะแก้ไข / สร้าง element ใหม่ ( ในจุดที่จะเอาไปใช้คือรับ response ของ AJAX )
ก็ให้ Qtip ทำการ initialize() ใหม่หมดอีกครั้ง
Code: Select all
<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 , 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
- Replies
- Views
- Last post
-
-
Selenium IDE - waitFor.. แก้ปัญหา element not found กับ ajax
by chbbk » 07/10/2014 6:23 pm » in Software testing - 0 Replies
- 1510 Views
-
Last post by chbbk
07/10/2014 6:23 pm
-
-
-
Ajax การใช้ Visibility และ Display แสดง/ซ่อน Element
by M009 » 10/05/2013 10:52 am » in Share Knowledge - 0 Replies
- 853 Views
-
Last post by M009
10/05/2013 10:52 am
-
-
- 0 Replies
- 958 Views
-
Last post by jamepiyawat
26/08/2019 5:37 pm
-
-
ถ้าเราจะเขียนสูตรใน google sheet หาเปอร์เซ็นของการทำงาน ให้มัน Dynamic ตามจำนวนเเถว
by thatsawan » 07/08/2019 3:06 pm » in ถาม - ตอบ คอมพิวเตอร์ - 1 Replies
- 520 Views
-
Last post by mindphp
07/09/2019 1:50 pm
-
-
-
ช่วยแนะนำการทำ dropdown เราทำ list ขึ้นมาเองแต่กดเลือกเจะไปตรงกับ data ใน server
by seeker » 30/01/2015 9:00 am » in Programming - PHP - 8 Replies
- 3531 Views
-
Last post by seeker
04/02/2015 3:16 pm
-
-
- 0 Replies
- 665 Views
-
Last post by m038
01/08/2016 4:34 pm
-
- 0 Replies
- 2014 Views
-
Last post by abdkode
17/01/2019 7:10 pm
Who is online
Users browsing this forum: No registered users and 4 guests