I've changed the layout file in yii and now the problem with identifying the select2 function.
I've checked the source code - seems identical in both cases. In both of them the select2.js is present: <script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
Source code of one where the problem appears:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/ico" href="/app2/img/favicon.ico">
some css files are here...
<script type="text/javascript" src="/app3/assets/df744518/jquery.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.yii.js"></script>
<script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
<title>tarex. Page3</title>
some css files are here...
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="assets/35648952/jquery.yii.js"></script>
<script type="text/javascript">
jQuery(function($) {
jQuery('body').on('change','#_lang',function(){jQuery.yii.submitForm(this,'',{});return false;});
jQuery('body').on('change','#Cityes_Name',function(){jQuery.yii.submitForm(this,'',{});return false;});
});
</script>
<script language='javascript'>
var RoleId=1;
var UserName='admin';
var UserId='36';
var OrganizationId='7';
var Language='ru';
//console.log('Language '+Language);</script>
</head>
The source code where there is no problem:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="language" content="en" />
<link rel="shortcut icon" type="image/ico" href="/app2/img/favicon.ico">
<script language='javascript'>
var RoleId=1;
var UserName='admin';
var UserId='36';
var OrganizationId='7';
var Language='ru';
//console.log('Language '+Language);</script>
<!-- blueprint CSS framework -->
some css files are here...
<script type="text/javascript" src="/app3/assets/df744518/jquery.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.yii.js"></script>
<script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
<title>Главное меню</title>
</head>
What might be the problem in?
You are applying jQuery few times. Load jQuery only once with Yii::app()->clientScript->registerCoreScript('jQuery')
Related
I have this weird bug. If I add box2dweb to my list of javascripts. My bootstrap tooltip will no longer accept HTML. I have this code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<button class="btn-sm btn-primary col" id="btn-test" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<font size='30'>Tooltip</font> <u>with</u> <b>HTML</b>">Test</button>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
It doesn't render the HTML in the tooltip as HTML. But if I remove the script line which is embeding box2dweb it will work.
Is there a way to fix this?
Box2DWeb: Github
Make sure that you include
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
in <head> tag
and
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
outside <body> tag.
Am using a html website template to build an angular project, but am having issues with a custom js script. menu button(to toggle navigation) and some other stuffs in custom.js is not working
i tried linking the scripts files link in index.html, and referenced it in angular.json config file
here is github link to the file https://github.com/donprecious/crtx
here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CREXT | DRD</title>
<!--
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<app-root></app-root>
</div>
<!-- jQuery -->
<!-- <script src="assets/vendors/"></script> -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<script src="assets/vendors/nprogress/nprogress.js"></script>
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<script src="assets/vendors/echarts/dist/echarts.min.js"></script>
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<script src="assets/vendors/skycons/skycons.js"></script>
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<script src="assets/vendors/DateJS/build/date.js"></script>
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/site.js"></script>
</body>
</html>
Angular.json
"scripts": [
"src/assets/vendors/jquery/dist/jquery.min.js",
"src/assets/vendors/bootstrap/dist/js/bootstrap.min.js",
"src/assets/vendors/fastclick/lib/fastclick.js",
"src/assets/vendors/nprogress/nprogress.js",
"src/assets/vendors/Chart.js/dist/Chart.min.js",
"src/assets/vendors/echarts/dist/echarts.min.js",
"src/assets/vendors/gauge.js/dist/gauge.min.js",
"src/assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js",
"src/assets/vendors/iCheck/icheck.min.js",
"src/assets/vendors/skycons/skycons.js",
"src/assets/vendors/Flot/jquery.flot.js",
"src/assets/vendors/Flot/jquery.flot.pie.js",
"src/assets/vendors/Flot/jquery.flot.time.js",
"src/assets/vendors/Flot/jquery.flot.stack.js",
"src/assets/vendors/Flot/jquery.flot.resize.js",
"src/assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js",
"src/assets/vendors/flot-spline/js/jquery.flot.spline.min.js",
"src/assets/vendors/flot.curvedlines/curvedLines.js",
"src/assets/vendors/DateJS/build/date.js",
"src/assets/vendors/jqvmap/dist/jquery.vmap.js",
"src/assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js",
"src/assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js",
"src/assets/vendors/moment/min/moment.min.js",
"src/assets/vendors/bootstrap-daterangepicker/daterangepicker.js",
"src/assets/js/custom.js",
"src/assets/js/site.js"
]
},
custom.js file
var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
this code does not work when i integate the website template, but works when i just click run the template browser
$MENU_TOGGLE.on('click', function() {
console.log('clicked - menu toggle');
if ($BODY.hasClass('nav-md')) {
$SIDEBAR_MENU.find('li.active ul').hide();
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
} else {
$SIDEBAR_MENU.find('li.active-sm ul').show();
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
$BODY.toggleClass('nav-md nav-sm');
setContentHeight();
});
it seems that the javascript are rendered,
but when i click on button to toggle menu or any control that as to work with jquery it doesnt work
I am using Slickgrid and I want to create multiple grids in different tabs, but I am having the following error:
My Scripts
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<link rel="stylesheet" href="/Scripts/SlickGrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="examples.css" type="text/css" />
<script src="../../Scripts/SlickGrid/lib/firebugx.js"></script>
<script src="../../Scripts/SlickGrid/lib/jquery-1.11.2.min.js"></script>
<script src="../../Scripts/SlickGrid/lib/jquery-ui-1.11.3.min.js"></script>
<script src="../../Scripts/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="../../Scripts/SlickGrid/lib/jquery.tmpl.min.js"></script>
<script src="../../Scripts/SlickGrid/slick.core.js"></script>
<script src="../../Scripts/SlickGrid/plugins/slick.autotooltips.js"></script>
<script src="../../Scripts/SlickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="../../Scripts/SlickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="../../Scripts/SlickGrid/plugins/slick.cellcopymanager.js"></script>
<script src="../../Scripts/SlickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="../../Scripts/SlickGrid/slick.editors.js"></script>
<script src="../../Scripts/SlickGrid/slick.grid.js"></script>
<script src="../../Scripts/SlickGrid/slick.formatters.js"></script>
<script src="../../Scripts/SlickGrid/slick.compositeeditor.js"></script>
My Code
$(function () {$("div#tabs").tabs();})
Try looking in https://github.com/6pac/SlickGrid/wiki/Examples, under 'Bootstrap, Dynamic Grids and Third Party component editors'.
There are examples for multi grids on a page, and for dynamically creating new tabs containing a grid.
I am trying to do a project with javascript using events on keys to display alphabets on the screen, I'm stuck with this error. please help
<!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></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="script.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
This is the script file that I'm using
script.js
(document).keydown(function(event) {
if (event.which === 13) {
console.log("you pressed");
}
});
You're running your script before jQuery, so $ doesn't exist yet.
Place
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Before
<script src="script.js" charset="utf-8"></script>
I'm using ng-inculde to include an html file that aslo includes some javascript codes for that page, but the javascripts are not executed,
here is my Code :
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title ng-cloak>{{Page.Title}}</title>
<link rel="stylesheet" href="/media/css/bootstrap.min.css">
<link rel="stylesheet" href="/media/css/swiper.min.css">
<link rel="stylesheet" href="/media/css/owl.carousel.css">
<link rel="stylesheet" href="/media/css/style.css">
<link href="/media/css/nprogress.css" rel="stylesheet">
<script type="text/javascript" src="/media/js/angular.js"></script>
<script src="/media/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/media/js/app.js"></script>
<script src="/media/js/vendor/modernizr-2.8.3.min.js"></script>
<meta name="description" content="">
<meta name="fragment" content="!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script type="text/javascript" src="/media/js/ng-device-detector.js"></script>
<script type="text/javascript" src="/media/js/re-tree.js"></script>
<script type="text/javascript" src="/media/js/angular-route.js"></script>
<script type="text/javascript" src="/media/js/angular-md5.js"></script>
<script type="text/javascript" src="/media/js/angular-cache.js"></script>
<script type="text/javascript" src="/media/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
And my home.html page:
<p>Welcome, this is the home page!!</p>
<div ng-include src="'/template/include/home_s.html'"></div>
And this is my home_s.html:
<script>
console.log("Selam, chooni khasi?");
alert("Sellam, choooni?");
</script>
Either:
<ng-include src="'/template/include/home_s.html'"></ng-include>
Or:
<div ng-include="'/template/include/home_s.html'"></div>
However, Angular on its own doesn't support loading scripts inside templates. For this to work you need to include jQuery (make sure you load it before Angular).
Demo without jQuery: http://plnkr.co/edit/Qh27ArEyIk53VRB7e61C?p=preview
Demo with jQuery: http://plnkr.co/edit/TxOmx5ksEFC2larJiJBA?p=preview