schmidt1024/Blank-Bootstrap-Edition

Script loading order

Closed this issue · 4 comments

Hello,
First a big thank for Blank 5. I really love it

I've got the following problem:
I'm using a component that heavily rely on JQuery.
This component doesn't work well because of javascript error.
I suspect that is because Bootstrap 4 JQuery library is loaded after the scripts of the component.

How could I load app.js file before any other scripts?

Thank you

Well, BBE comes with Bootstrap 4 and so with jQuery.slim (1). I quess you need jQuery in full. If you want to use the library of Joomla, you can comment out line 16 - 18 in logic.php (2)

(1) https://github.com/Bloggerschmidt/Blank-Bootstrap-Edition/blob/ba6e14c44b0b87558c455829a9aef79ac384cb12/gulpfile.js#L29
(2) https://github.com/Bloggerschmidt/Blank-Bootstrap-Edition/blob/ba6e14c44b0b87558c455829a9aef79ac384cb12/logic.php#L16-L18

Hello Bloggerschmidt,
Thank you for your reply.

I've commented out lines 16, 17, 18 as suggested.
I had to comment out line 21 as well: unset($doc->_scripts[$this->baseurl .'/media/system/js/core.js']);

I have less errors but still one that prevent a form to be submitted.

It seems I have a conflict with the scrpits loaded by BBE 5.
If I prevent the loading of app.js my form is working again (while doing the above changes).

What can I do?

Hello,
I could manage (I hope) a workaround by modifying the js part of logic.php this way:

`JHtml::_('jquery.framework');
$doc->addScript('https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js', '', array('integrity' => '', 'crossorigin' => 'anonymous', 'defer' => 'defer'));
$doc->addScript($tpath . '/js/bootstrap.min.js', '', array('defer' => 'defer'));
$doc->addScript($tpath . '/js/custom.js', '', array('defer' => 'defer'));

// unset
// unset($doc->_scripts[$this->baseurl .'/media/jui/js/jquery.min.js']);
unset($doc->_scripts[$this->baseurl .'/media/jui/js/jquery-noconflict.js']);
unset($doc->_scripts[$this->baseurl .'/media/jui/js/jquery-migrate.min.js']);
unset($doc->_scripts[$this->baseurl .'/media/jui/js/bootstrap.min.js']);
unset($doc->_scripts[$this->baseurl .'/media/system/js/caption.js']);
// unset($doc->_scripts[$this->baseurl .'/media/system/js/core.js']);
unset($doc->_scripts[$this->baseurl .'/media/system/js/tabs-state.js']);
unset($doc->_scripts[$this->baseurl .'/media/system/js/validate.js']);

if (isset($doc->_script['text/javascript']))
{
$doc->_script['text/javascript'] = preg_replace('%jQuery(window).on('load',\sfunction()\s{\snew\sJCaption('img.caption');\s*}\s*);\s*%', '', $doc->_script['text/javascript']);
$doc->_script['text/javascript'] = preg_replace("%\sjQuery(document).ready(function(){\sjQuery('.hasTooltip').tooltip({"html":\strue,"container":\s"body"});\s*});\s*%", '', $doc->_script['text/javascript']);
if (empty($doc->_script['text/javascript']))
{
unset($doc->_script['text/javascript']);
}
}
`
I got inspired by Coolcat Creation BS4 Joomla template: https://github.com/coolcat-creations/ccc-mountain

Hurry on J4!, because all the JS libraries in J3! are a nightmare.
Thank you

Yes, hard wired frameworks or libraries in a CMS are always a hell.