Jhtml :: คำสั่งสคริปต์ - วิธีการเลื่อนจนกว่าจะโหลด jQuery แล้ว?

11

ฉันใช้JHtml::scriptเพื่อเพิ่มสคริปต์ในหน้าของฉันในโมดูลที่พัฒนาขึ้นเอง อย่างไรก็ตามสคริปต์เหล่านี้จะถูกแทรกเข้าไปในส่วนหัวก่อนที่ J3 จะเพิ่มใน jQuery - ตัวอย่างเช่น:

<!-- my module js -->
<script src="/modules/mod_tiles/js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="/modules/mod_tiles/js/jquery.hoverintent.min.js" type="text/javascript"></script>
<script src="/modules/mod_tiles/js/mod_tiles.js" type="text/javascript"></script>
<!-- then joomla loads jQuery --->
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>

ฉันจะบังคับให้ Joomla โหลด jQuery ก่อนสคริปต์อื่น ๆ ได้อย่างไร?

joomla-3.x jquery

— codinghands
แหล่งที่มา

15

คุณควรโทร

JHtml::_('jquery.framework');

ก่อน JHtml :: script อื่นของคุณ AFAIK ทำให้แน่ใจว่าโหลด jQuery ก่อน

— fruppel
แหล่งที่มา

นี่เป็นทางออกเดียวที่ทำงานสำหรับฉัน - วางไว้ในmod_tiles.phpjQuery นี้บังคับให้โหลดก่อน ขอขอบคุณ!

— codinghands

1

@codinghands docs.joomla.org/…

— Ville Niemi

2

ถ้าฉันอ่านคำถามของคุณถูกต้องคุณกำลังพัฒนาโมดูลของคุณเอง

ลองนี้ใน default.php - มุมมองของโมดูล (ใน "tmpl"):

JHtml::stylesheet('modules/'.$module->module.'/assets/css/yourfile.css');

JHtml::script('modules/'.$module->module.'/assets/js/yourscript.js');

หรือสิ่งนี้:

JHtml::_('stylesheet', 'modules/'.$module->module.'/assets/css/anotherfile.css');

JHtml::_('script', 'modules/'.$module->module.'/assets/js/othercript.js');

ในทั้งสองกรณีไฟล์ JS ของคุณควรถูกฉีดหลังจาก jQuery โดยที่คุณได้สร้างโฟลเดอร์ "asset" และโฟลเดอร์ "css" และ "js" ข้างใน

ทางออกที่สองนั้นสอดคล้องกับ joomla 3.XX API มากขึ้น

หวังว่ามันจะช่วย

— Ghazal
แหล่งที่มา

การเปลี่ยนแปลงเพียงอย่างเดียวที่ฉันทำที่นี่คือการเพิ่มassetsโฟลเดอร์ - ทำให้ไม่แตกต่างกันและสคริปต์ยังคงโหลดก่อนที่ jQuery จะทำ ฉันยังสงสัยเกี่ยวกับภูมิปัญญาในการวางโค้ดประเภทนี้ลงในไฟล์เทมเพลต (โดยเฉพาะถ้ามีเทมเพลตหลายตัวที่ใช้สคริปต์เดียวกัน DRY ฯลฯ ฯลฯ )

— codinghands

เฮ้ความคิดเห็นของคุณแปลก -> "ใส่รหัสแบบนี้ในไฟล์แม่แบบ" ฉันและอาจไม่ชัดเจนพอที่จะพูดถึงโมดูลที่คุณพัฒนาและใช้ isotope.js และสคริปต์ JS อื่น ๆ ฉันเสียใจมากถ้าฉันผิดและคุณใช้โมดูลบุคคลที่สามชื่อ mod_tiles BTW มีวิธีอื่นในการแทรกสคริปต์ JS ในเทมเพลต

— ghazal

ขอโทษนะฉันไม่ได้ตั้งใจจะฟังเสียงฮาฮ่าฮ่า! ต้องตื่น แต่เช้าเกินไป ... คุณพูดถูกนั่นคือสิ่งที่ฉันกำลังทำอยู่นั่นคือโมดูลของฉัน สิ่งที่ฉันหมายถึงไฟล์เทมเพลตคือdefault.phpในtmplโฟลเดอร์ (เทมเพลต) ของโมดูล ฉันคิดว่าควรจะโหลดสคริปต์mod_tiles.php('ตัวควบคุม') แทนdefault.php(มุมมอง)

— codinghands

วางไว้ใน tmpl / default.php ช่วยให้แทนที่ ใน mod_tiles.php จะไม่สามารถเขียนทับได้

— sovainfo

2

ฉันพบปัญหานี้เมื่อสัปดาห์ที่แล้วและเกี่ยวข้องกับตำแหน่งที่ฉันโทรหา JHtml :: script คุณทำสิ่งนี้ในมุมมองหรือเทมเพลตของมุมมองหรือไม่ หากคุณพยายามเพิ่มสคริปต์ในมุมมองตัวเอง (views / yourview / view.html.php) สคริปต์เหล่านั้นจะถูกแทรกก่อนสคริปต์ของ Joomla! แต่ถ้าคุณเพิ่มสคริปต์ในเทมเพลต (views / yourview / tmpl / default.php) มันจะถูกแทรกหลังจากสคริปต์ของ Joomla!

โชคดี!

— Zachary Draper
แหล่งที่มา

นี้โมดูลกับ mod_tiles.php เท่านั้นไฟล์ helper.php และแม่แบบเดียว (default.php) tmplใน ฉันพยายามเพิ่มสคริปต์ทั้งใน mod_tiles.php และ default.php - โหลดทั้งก่อน jQuery

— codinghands

0

อาจเป็นเพราะวิธีการที่ผู้พัฒนาmod_tilesใช้เพื่อนำเข้าสคริปต์ ฉันคิดว่าพวกเขาไม่ได้ติดอยู่กับมาตรฐานการเข้ารหัสของ Joomla ในสถานการณ์นี้

คุณมี 2 ตัวเลือก (ที่ฉันนึกได้) hwre:

หากสคริปต์ที่ถูกนำเข้ามาจากไฟล์ภายในที่tmplโฟลเดอร์ภายในโมดูลคุณสามารถดำเนินการแทนที่แม่แบบJHtmlและเปลี่ยนวิธีการสคริปต์ที่ถูกนำเข้ามาใช้
คุณสามารถดาวน์โหลดและติดตั้งjQuery Easyซึ่งเป็นปลั๊กอินที่นำเข้า jQuery และวางไว้เหนือสคริปต์อื่นทั้งหมด

หวังว่านี่จะช่วยได้

— Lodder
แหล่งที่มา

ฉันพัฒนาโมดูล - ฉันควรใช้วิธีการอย่างไร ฉันถามคำถามนี้ ( joomla.stackexchange.com/questions/325/ ...... ) และได้รับการบอกว่า JHtml :: script เป็นหนทางข้างหน้า

— codinghands

0

ฉันต้องการเพิ่มสองบิตหลังจากข้อเท็จจริง ฉันมีสคริปต์และสไตล์ชีทที่ต้องโหลดสำหรับทุกมุมมองที่เรามีในองค์ประกอบและต้องการจุดเดียวเพื่อให้เกิดความมั่นใจว่าพวกเขาจะโหลดตามลำดับที่ถูกต้อง

ในไฟล์components\myComponent\mycomponent.php:

defined('_JEXEC') or die;

// Include dependancies
jimport('joomla.application.component.controller');

JHtml::stylesheet('http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css', array(), true);
JHtml::stylesheet('components/com_mycomponent/assets/css/mycomponent.css');

JHtml::_('jquery.framework');   // Make sure jQuery is loaded before component JS
JHtml::script( 'components/mycomponent/assets/js/jquery.cookie.js');

// Execute the task.
$controller = JControllerLegacy::getInstance('Mycomponent');
$controller->execute(JFactory::getApplication()->input->get('task'));
$controller->redirect();

— จีดีพี
แหล่งที่มา

-1

ฉันรู้ว่านี่เป็นหัวข้อเก่า แต่คุณเคยไปถึงจุดต่ำสุดของเรื่องนี้หรือไม่? ฉันเพิ่งพบปัญหาเดียวกัน ฉันระบุสาเหตุ แต่ไม่ใช่ปัญหา / วิธีแก้ไข ฉันสงสัยว่าเป็นเรื่องลับๆล่อๆว่าเป็นข้อผิดพลาด แต่สามารถทำกับคนอื่นลองมัน

สถานการณ์จำลอง: คุณได้สร้างโมดูลที่มีสคริปต์ขึ้นอยู่กับ jQuery เพื่อให้คุณใช้สิ่งต่อไปนี้ในมุมมอง default.php ของคุณ:

$doc = JFactory::getDocument();
$doc->addScript("media/mod_accordion/js/accordion.js");

จากนั้นคุณติดตั้งโมดูลและให้ตำแหน่งโมดูลให้พูด 'ซ้าย' เมื่อคุณดูซอร์สโค้ดส่วนหน้าทุกอย่างดูดีสคริปต์ทั้งหมดโหลดหลังจากสคริปต์ที่รวมอยู่ใน

JHtml::_('bootstrap.framework');

อย่างไรก็ตามถ้าคุณให้โมดูลตำแหน่ง 'หีบเพลง' และใช้คุณสมบัติการโหลด joomla เพื่อเพิ่มโมดูลไปยังบทความ

{loadposition accordion}

จากนั้น accordion.js จะถูกเพิ่มเข้าไปก่อนไฟล์ bootstrap.framework

วิธีเดียวที่ฉันสามารถขัดขวางการทำงานได้คือการเพิ่มสคริปต์เป็นสคริปต์แบบอินไลน์แทนที่จะรวมไว้ในหัว

แก้ไข: เดียวกันไปรวม css; มันจะถูกเพิ่มไปด้านบนของรายการของการประกาศ css (ก่อนที่ไฟล์เทมเพลตและ bootstrap css) สิ่งนี้คือการเพิ่ม! สำคัญกับการประกาศ CSS

— ฟิลิป
แหล่งที่มา