i use Yii 1.1.13 and Yii Booster 1.0.6
On one page i need to use TbButtonGroup with checkbox toggle and jQRangeSlider (http://ghusse.github.io/jQRangeSlider/)
To use slider, i need to include jQuery UI lib, BUT when i include it, the checkbox mode of buttonGroup does not works.
With some versions of UI it just does not work, with with the latest it writes in console on TbButtonGroup click:
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'
The full list of sources is
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/jquery-ui-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-notify.css" />
<link rel="stylesheet" type="text/css" href="/jqslider/iThing-min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/assets/b1075121/jquery.yiiactiveform.js"></script>
<script type="text/javascript" src="/assets/b1075121/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.bootbox.min.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.notify.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places&language=en"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript" src="/jqslider/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/jqslider/jQAllRangeSliders-min.js"></script>
<script type="text/javascript" src="/js/search.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
If i delete the jquery ui, where is no slider, but all works fine. Help me please, where is the bug?
maybe you need to manually include your whatever scripts you need, using Yii::app()->clientScript
its safe becuz Yii wont load duplicate scipts
Related
I am getting this error even when all the jquery has been loaded before bootstrap and also have used the version 1.9.1
tried using jquery version 1.9.1 and it still dint solve
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="https://www.bootstrap-year-calendar.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/respond.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-year-calendar.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-popover.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/scripts.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-year-calendar.min.css">
I have had this issue previously when I have referenced two different versions of jquery or Bootstrap, you have done both here. You have three versions of JQuery in this code:
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="https://www.bootstrap-year-calendar.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
You are also loading bootstrap and the bootstrap min js files which will interfere with each other.
Try simplifying your code and only use 1 version of each library/framework.
So one version of JQuery loaded before Bootstrap stuff. One version of bootstrap. So make sure you have your JQuery script src THEN your Bootstrap one.
If you try to add more than one version of bootstrap this error comes. Order of bootstrap and jquery also matters. Try including this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
try including this
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I'm trying to use a ready template that uses revolution slider in my vue-cli app, how can i use the external script of this template?
I've tried to import the scripts that the template used in the tag in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balad | Govt HTML Template</title>
<!-- CSS Files -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/color.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/slick.css" rel="stylesheet">
<link rel="icon" href="images/fav.png" type="image/png">
<!--Rev Slider Start-->
<link rel="stylesheet" href="js/rev-slider/css/settings.css" type='text/css' media='all' />
<link rel="stylesheet" href="js/rev-slider/css/layers.css" type='text/css' media='all' />
<link rel="stylesheet" href="js/rev-slider/css/navigation.css" type='text/css' media='all' />
<!--Rev Slider End-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<noscript>
<strong>We're sorry but brikma-website doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
<!--Rev Slider Start-->
<script type="text/javascript" src="js/rev-slider/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/rev-slider.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.video.min.js"></script>
</body>
</html>
and i past the body of the template in the vue js component that renderd by #app
the jquery work on the site, but there are other problems, the revolution slider Not displayed,
I also tried to use this packages with node modules but i have seen the work is hard with this way
and here is my project structure :
this folders in the public i put them there that index.html can reach them directly, this folders were in the template (all js and css ...)
I don't have any problems in console and with the build
I added the advag module and it seems to be combining files, but noticed this:
<link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__sqX0oV0PzZnon4-v--YUWKBX0MY_EglamExp-1FI654__IOPiOtulrIZqqAM0BdQCjTz3N2n6srsVUk6UjqwYEZ0__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.css" media="all" />
<link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__1bGi9mT6hqx9o6nD5bJXmoSMpEPHhptLYP525xD_0e0__8xO7pFjt9gkiLqNXp1T5pf1qVx1B3E4JiRdo_bonpCk__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.css" media="all" />
<link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__WYBdBM69hbZ67HwkvEm3Klcgr0gEMg-hTDrv-ofiu_0__UJzap9vYL6P5WufuIpZ4HrhEDqpuUpzKBitKuUMmMwY__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.css" media="all" />
<link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__dC61ke986faoUib_CT99MB7tZjBA8yWX9ATTkjpTWyw__Vi6qRHAK9JP9CJy6hO-AskwMgX7bln4vsoJjDBzEOnE__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.css" media="all" />
<script type="text/javascript" src="/sites/default/files/advagg_js/js__OFsSsQzSaj6v-Oy0a_SsA80EpScOeUbJnZ4cKkiFU9o__uGtSosYSD4fR0mdlliQtbwJx0EbabeubaVWqq2KIlTA__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__ZnLWb-BTdQmjePHZT3a_HE5Vg9BrAL8v6h1eu0z7Eek__4LsSbjnjVeap6QGx4vvBE7-WJQUGh3gN1gnMb0Bjh48__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__bf0eTJ6iQnY3GsZO7jbyMczh0IjbGhGwoHB8QRMrO6M__JT_BtjvKQ3w-jLHLX6W2O9rJXNxR4c_rolkuXQfBusU__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__PdS3RA9MOoQrUBcBhAkRohLUbcIwqBt3WT-iQ0WBYYM__J5JCc-DaME9iOvxgHsman1xajK_HcsQnORtLYdyva5g__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__hrgDaYfGryCYs0RZQAb5BmgzuYw72p8FV3Uo4YGA-no__Osy32LqTRLSPiyOxYFNLa9K5k3YtrwL2yGKmO4sq_74__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
Why is Drupal Advag creating multiple files and not just one? And how do I fix it?
Out of the box AdvAgg will mimic what core does; you need to configure it act how you want it to. On the admin/config/development/performance/advagg page uncheck "Use cores grouping logic". A really good guide on how to get your site to load faster is this issue for using AdvAgg on drupal.org: https://www.drupal.org/node/2493801
I am trying to add bootstrap popover on my page.
I have following code
$("#s1").popover({ placement: 'top' }).popover("show");
I have added following files to my page
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap.css.map
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap-theme.css.map
<link href="vendor/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.js" type="text/javascript"></script>
It was working fine some time ago. But I am not sure maybe some files I added or removed but now it's not working. Any help will be appreciated. Thanks
You are loading jQuery twice and v1.4.1 is ancient and not supported by bootstrap.js. You need to use at least v 1.11.1
I have a Android app built with JQuery Mobile 1.4.2 and PhoneGap 3.3
In about 1 in 3 loads, when I click a button it pops out of place and looks terrible. Is there some type of onDeviceReady function I should be using to avoid this issue? Thanks!Here is a screenshot:
My scripts in header in case this is helpful:
<link href="js/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/index.js"></script>
<link rel="apple-touch-icon" href="img/HomeScreenIcon.png" />
<link rel="apple-touch-startup-image" href="img/SplashSceen.jpg"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"type="text/javascript"></script>
<script src="js/jquerymobile10.3.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/categories.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:700' rel='stylesheet' type='text/css'>
<link href="css/overwrite.css" rel="stylesheet" type="text/css">