How to include/import custom js files into vue project? - javascript

I have downloaded html template from some site and now want to convert that whole template into vue cli project.The template has jquery and other custom js files.For jquery and bootstrap I used npm package but for other custom js I don't know how can I make it run.below is index.html file inside public folder in vue cli project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>License Renewal</title>
<!-- Stylesheets -->
<link href="css/nepali.datepicker.v3.min.css" rel="stylesheet" type="text/css"/>
<link href="css/revolution-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="images/ezee-logo.png" type="image/x-icon">
<link rel="icon" href="images/ezee-logo.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="page-wrapper">
<div id="app"></div>
<!-- built files will be auto injected -->
</div>
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-long-arrow-up"></span></div>
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
<!--Google Map APi Key-->
<script src="http://maps.google.com/maps/api/js?key="></script>
<script src="js/map-script.js"></script>
<!--End Google Map APi-->
<script type="text/javascript">
$('.modal').on('shown.bs.modal', function () {
$.getScript('js/nepali.datepicker.v3.min.js')
.done(function(script, textStatus) {
console.log(textStatus)
/*var mainInput = document.getElementById("nepali-datepicker");
mainInput.nepaliDatePicker();
console.log('date');
console.log(mainInput);*/
});
})
</script>
<script>
$('.motor-block').on('click',function () {
test('application');
console.log('yes');
})
function test(elID)
{
var dest = document.getElementById(elID);
$([document.documentElement, document.body]).animate({
scrollTop: $(dest).offset().top -25
}, 500);
}
</script>
</body>
</html>
below script files are those I am talking about.How can I run them?
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
below is main.js file
import Vue from 'vue'
import App from './App.vue'
import Main from './Main'
import router from './router'
import store from './store'
import jQuery from 'jquery'
global.jQuery=jQuery
global.$=jQuery
let Bootstrap=require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(Main)
}).$mount('#app')

There are a few routes you can take here. The easiest by far would be to find the files on NPM and install them in your project, use Webpack or Gulp, to copy the files over to the public JS path that is used in Index.js. Another way is to find those files online and copy them by hand (copy whole file contents, paste to new local file) and save to the template core files public path you wish.

Related

Firebase messaging importScripts is not defined

I write a WEB application on the platform Firebase
I have a file "firebase-messaging-sw.js", and when I access the file from home.html page, I get an error:
importScripts is not
File "firebase-messaging-sw.js" is at the root level.
home.html:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="shortcut icon" href="img/favicon.png"/>
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/home.css" type="text/css" media="screen and (min-width:901px)" />
<link rel="stylesheet" href="css/mhome.css" type="text/css" media="screen and (max-width:900px)" />
</head>
<body>
<header>
...
</header>
<div class="function">
...
</div>
<footer>
...
</footer>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-performance.js"></script>
<script src="javaScript/initFirebase.js"></script>
<script src="javaScript/homeFirebase.js"></script>
<script src="javaScript/initHomePage.js"></script> 
<script src="javaScript/latlon-geohash.js"></script>
<script src="firebase-messaging-sw.js"></script>
</body>
firebase-messaging-sw.js:
importScripts('https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.3/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': '123456654321'
});
Help fix the error! Thank!
firebase-messaging-sw.js is service worker JavaScript file.
So you should not load JavaScript file using <script src="firebase-messaging-sw.js"></script>.
Remove <script src="firebase-messaging-sw.js"></script> and try the following code.
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/firebase-messaging-sw.js');
});
}
</script>
See https://developers.google.com/web/fundamentals/primers/service-workers/#register_a_service_worker

Progress bar for upload not working again for Jquery/Javascript

I recently discovered that my upload for an already existing php, Javascript, jQuery, bootstrap application stopped working. I have been trying to resolve this issue for over a week now. On the javascript console I am getting this error
: main.js:604 Uncaught TypeError: $(...).clipresize is not a function. Please any assistance will be of great assistance. I was thinking that the many references to various Jquery files could be causing this error or is it that all browsers have been recently upgraded not to support some snippets being referenced. I am confused.
The application codes are below:
add.php
<!DOCTYPE html>
<html lang="en" class="no-js">
<!--<![endif]--><!-- start: HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload</title>
<!-- start: META -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description">
<meta content="" name="author">
<!-- end: META -->
<!-- start: MAIN CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/fonts/style.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/main-responsive.css">
<!--<link rel="stylesheet" href="../css/all.css">-->
<link rel="stylesheet" href="../css/bootstrap-colorpalette.css">
<link rel="stylesheet" href="../css/perfect-scrollbar.css">
<link rel="stylesheet" href="../css/theme_light.css" type="text/css"
id="skin_color">
<link rel="stylesheet" href="../css/print.css" type="text/css"
media="print">
<link href="../css/bootstrap-modal-bs3patch.css" rel="stylesheet"
type="text/css">
<link href="../css/bootstrap-modal.css" rel="stylesheet" type="text/css">
<link href="../css/validate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-
16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-hover-dropdown.min.js"></script>
<script src="../js/jquery.blockUI.js"></script>
<script src="../js/jquery.icheck.min.js"></script>
<script src="../js/jquery.mousewheel.js"></script>
<script src="../js/perfect-scrollbar.js"></script>
<script src="../js/less-1.5.0.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/bootstrap-colorpalette.js"></script>
<script src="../js/main.js"></script>
<script src="../js/index.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-modalmanager.js"></script>
<script src="../js/validations.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="../js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="../js/jquery.maskMoney.js"></script>
<script src="../js/form-elements.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
UIModals.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Index.init();
});
</script>
.......
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.form.min.js" type="text/javascript"></script>
<script src="materialize.js" type="text/javascript"></script>
<link rel="stylesheet" href="materialize.css">
.................
<script type="text/javascript">
$(document).ready(function() {
$('#add_app').submit(function(e) {
var value = manage_form();
if(value==false)
{
return false;
}else{
e.preventDefault();
$('#loader-icon').show();
$(this).ajaxSubmit({
//target: '#targetLayer',
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total,
percentComplete){
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' +
percentComplete +' %</div>')
},
success:function (data){
$('#modal1').openModal();
$('#loader-icon').hide();
$("#progress-bar").width('0%');
var res = data.split("~");
$('#mode7').html('<a href="add.php?flag=edit&id='+res[1]+'"
class="btn light-green modal-action modal-close waves-effect waves-
green btn-flat">Okay</a>');
document.getElementById('row_id').value = res[1];
document.getElementById('row1_id').value = res[1];
document.getElementById('package').value = res[0];
//document.getElementById('process_id').html = data;
//$('#mode7').html('<a href="add.php?
flag=edit&id='+res[1]+'" class="btn light-green modal-action modal-close
waves-effect waves-green btn-flat">Okay</a>');
},
resetForm: true
});
return false;
}
});
});
and the "main.js" script that throws the error is below:
//Window Resize Function
var runWIndowResize = function(func, threshold, execAsap) {
//wait until the user is done resizing the window, then execute
$(window).clipresize(function() {
runElementsPosition();
});
};
I finally was able to get my progress bar working and all the assets uploaded to the required folder by removing a mailing library called Php Mailer in my php submit script. The Php mailer library was failing in my application and I discovered that it was throwing up a blank or null output which was causing my application to break by not responding to the submit button. And broken libraries at times are the reason for which many formerly functioning web applications are said to stop functioning. The solution many times will be to update the required libraries or to remove them and find a way to tweak the application to work without those libraries. Thanks

How to load angular2 using CDN and SystemJS

In my index.html file i load angular 2 through cdn but it seems because i import the modules of angular 2 systemjs thinks that i must have them locally, how can i fix that?
<html>
<head>
<base href="/">
<title>Angular 2 Arc</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ng2-app>Loading...</ng2-app>
<!-- Load Angular 2 Core libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system.js"></script>
<script src="https://npmcdn.com/rxjs#5.0.0-beta.2/bundles/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/angular2-polyfills.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/angular2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/http.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/router.min.js"></script>
<script src="https://npmcdn.com/angular2#2.0.0-beta.9/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js.map"></script>
<!-- Load Bootstrap and Jquery -->
<script src="lib/jquery/jquery.min.js" charset="utf-8"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="assets/css/app.css">
<!-- Configure SystemJS -->
<script>
System.config({
defaultJSExtensions: true,
packages: {
boot: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('js/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>
With SystemJS you can provide a mapping to load module from a different location.
SystemJS.config({
map: {
'#angular': 'https://npmcdn.com/#angular'
}
});
This will redirect all loading of a module #angular to that cdn location.
For more detailed info check systemjs.config.js in this plunker for more detailed info

Can not display the pages by ng-view using Angular.js

My pages are not coming by using ng-view in angular.js.When i am typing the url http://localhost:8888/dashboard the pages should come.I am explaining my code below.
view/dashboard.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="adminDashboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" /><!-- Date Range Picker -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-jvectormap.css" type="text/css" /><!-- Vector Map -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" /><!-- Carousal -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
</head>
<body ng-view>
</body>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/enscroll.js"></script>
<script type="text/javascript" src="js/grid-filter.js"></script>
<script type="text/javascript" src="app/routes/dashboard-route.js"></script>
<script type="text/javascript" src="app/controller/dashboard-controller.js"></script>
</html>
public/app/routes/dashboard-route.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/dashboard',{
templateUrl:'app/view/dashboard-partial.html',
controller:'dashboard-controller'
});
}
])
public/app/controller/dashboard-controller.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.controller('dashboard-controller',function($scope){
$.ajax({
type:'GET',
url:"/getAdminData",
success: function(data){
$scope.firstname=data.firstname;
$scope.lastname=data.lastname;
$scope.adminImage=data.image;
},
error: function(data){
console.log(data);
}
});
});
Please help me to resolve this issue so that the template will successfully display.I am also using node.js for client server architecture.
It looks like your dashboad-route.js is using templateUrl:'app/view/dashboard-partial.html', but the name of your HTML file is view/dashboard.html. Change templateUrl to app/view/dashboard.html (or whatever the correct path is) and see if that fixes things.
One problem is that if you use $.ajax to do scope changes angular is unaware of them so you need to use $apply() to tell angular to run digest scycle.
For this reason I suggest you don't use $.ajax and use angular $http

Angular directive not replacing dynamic element

i am creating a dynamic angular element on a new page as follows
Index.html
var openPrint = window.open('/acImageViewer/html/imageLibraries.html');
openPrint.onload = function() {
var doc = openPrint.document;
$(doc.body).html('<jqyiviewer class="filter_icon_ul viewerHeight" id="acImgViewer" src="http://www.wellclean.com/wp-content/themes/artgallery_3.0/images/car3.png" align="centre" width="auto" height="500" data="data"></jqyiviewer>');
};
this opens a new page where i have my libraries , directives and css loaded as follows (imageLibraries.html)
<html ng-app="acIViewerApp">
<head>
<meta charset="utf-8">
<title>Image viewer</title>
<link href="/acImageViewer/css/kendo.common.min.css" rel="stylesheet">
<link href="../css/new_kendo.css" rel="stylesheet">
<link href="../css/jquery.iviewer.css" rel="stylesheet">
<link href="../css/style.less" rel="stylesheet/less">
<script type="text/javascript" src="../libs/angular.min.js"></script>
<script type="text/javascript" src="../libs/less.js"></script>
<script type="text/javascript" src="../libs/jquery-1.8.3.min.js"></script><!--JQuery library-->
<script src="../libs/jquery-ui.min.js"></script><!--Jquery library -->
<script src="../libs/acImageViewer.js"></script><!--JQuery library for Imageviewer-->
<script src="../libs/kendo.all.min.js"></script><!--For Kendo Functionality -->
<script src="../libs/jquery.mousewheel.js"></script><!--JQuery library for use mouse event-->
<script src="../js/app.js"></script>
<script src="../js/directives/directives.js"></script><!--directive for iviewer-->
</head>
<body>
</body>
</html>
The body is getting dynamically generated in the index.html.
The problem is the directive.js is not replacing the jqyiviewer tag.
I am using the same tag in my index.html , here everything works fine.
I am guessing that my directive.js gets loaded and compiles 1st , after that the tag gets inserted , so it does not replace it.

Categories