AngularJS Tried to load more than once - javascript

My Angular JS app is displaying this message in the console :
angular.min.js tried to load more than once.
The app is fully working but is loading all the ajax requests several times before having any response.
I really don't understand what is could be. I don't even know what code to show you.
If anyone wants to help me, just tell me what part of my code you'd like to see and I'll copy paste it here...
thank you
UPDATE :
index.blade.php :
#extends('master')
#section('controller') ng-controller="AppController" #endsection
#section('content')
<div class="app" id="app"
ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded}"
ui-view></div>
<!-- jQuery -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/libs/moment.min.js"></script>
<script>
window.__user = {{Auth::user()->toJson()}};
window.__user_details = {{Auth::user()->details->toJson()}};
window.__company = {{ Auth::user()->getCompany()->toJson()}}
<?php if( Department::where('company_id', Auth::user()->company_id)->first() ): ?>
window.__startDepartment = {{ Department::where('company_id','=',Auth::user()->company_id)->first()->id }}
<?php endif; ?>
#if(Auth::user()->user_level == 4)
window.__companies = {{ Company::all()->toJson() }}
#endif;
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Angular -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-tree.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/functions.js"></script>
<script src="js/controllers/AppController.js"></script>
<script src="js/controllers/DashboardController.js"></script>
<script src="js/controllers/DemoControllers.js"></script>
<script src="js/controllers/LeaveControllers.js"></script>
<script src="js/controllers/ReporterControllers.js"></script>
<script src="js/controllers/TimeslotControllers.js"></script>
<script src="js/controllers/TasksControllers.js"></script>
<script src="js/controllers/MessagesControllers.js"></script>
<script src="js/controllers/ResourceControllers.js"></script>
<script src="js/controllers/LocationControllers.js"></script>
<script src="js/controllers/StaffController.js"></script>
<script src="js/controllers/DepartmentControllers.js"></script>
<script src="js/controllers/OtherControllers.js"></script>
<script src="js/controllers/DatePickerInputController.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- Lazy loading -->
<script>
window.intercomSettings = {
app_id: "eoo7q8o9",
user_id: '{{{ Auth::user()->id }}}',
name: '{{{ Auth::user()->first_name }}} {{{ Auth::user()->surname }}}',
email: '{{{ Auth::user()->email }}}',
user_type: '{{{ Auth::user()->getUserType() }}}',
company: '{{{ Auth::user()->getCompany()->name }}}'
};
</script>
<script>
(function () {
var w = window;
var ic = w.Intercom;
if (typeof ic === "function") {
ic('reattach_activator');
ic('update', intercomSettings);
} else {
var d = document;
var i = function () {
i.c(arguments)
};
i.q = [];
i.c = function (args) {
i.q.push(args)
};
w.Intercom = i;
function l() {
var s = d.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://widget.intercom.io/widget/eoo7q8o9';
var x = d.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (w.attachEvent) w.attachEvent('onload', l);
else w.addEventListener('load', l, false);
}
})()
</script>
#endsection

Looks like you're loading third party libraries twice
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-cookies.min.js"></script>
<script src="js/angular/angular-animate.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<script src="js/angular/angular-translate.js"></script>
<script src="js/angular/ngStorage.min.js"></script>
<script src="js/angular/ui-load.js"></script>
<script src="js/angular/ui-jq.js"></script>
<script src="js/angular/ui-tree.js"></script>
<script src="js/angular/ui-validate.js"></script>
<script src="js/angular/ui-bootstrap-tpls.min.js"></script>
<script src="js/libs/timer.js"></script>

There are multiple reasons to this. Can you show your routing code? These errors are often caused due to mix of routes or improper handling of the routing.

Related

How to Add Amazon Affliate Banner in vue app

I want to add the Amazon affliate banner to a component in my vue web application.
Below is the Amazon code.
<script type="text/javascript" language="javascript">
var aax_size='160x600';
var aax_pubname = 'samplename';
var aax_src='***';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
However adding this in the index.html wasn't giving expected results.
I want this to add to a vue component. The below code doesn't even show the banner.
mycomponent.vue
<template>
<div>
<!-- Some contents -->
</div>
</template>
<script type="text/javascript" language="javascript">
var aax_size='160x600';
var aax_pubname = 'samplename';
var aax_src='***';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
<script>
export default {
// Vue options api code
}
</script>

Script works in console but not in the original code

$('#edit-post').modal('hide'); works in console, but doesn't work in the script file. I also don't see the new information unless I refresh the page. Thanks in advance! (Suggested solution in the comment section below.)
The script file:
var postId = 0;
var postBodyElement = null;
$('.post').find('.interaction').find('.edit').on('click',function(event){
event.preventDefault();
postBodyElement = event.target.parentNode.parentNode.childNodes[1];
var postBody = postBodyElement.textContent;
//postId = event.target.parentNode.parentNode.dataset['postid'];
postId = event.target.dataset.postid;
$('#post-content').val(postBody);
$('#edit-post').modal();
});
$('#modal-save').on('click',function(){
$.ajax({
method: 'POST',
url: url,
data: {body: $('#post-content').val(), postId: postId, _token: token}
})
.done(function (msg){
//console.log(msg['message']);
//console.log(JSON.stringify(msg));
$(postBodyElement).text(msg['new_content']);
$('#edit-post').modal('hide');
})
});
The file is loaded in the master html using:
...
</head>
<body>
#include('includes.header')
<div class="container">
#yield('content')
</div>
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src={{ URL::to('src/js/app.js') }}></script>
</body>
</html>
After I hit "save" button in the modal it should close automatically and the page should be reflect the new data.

Add sticky sidebar

I'm trying to use sticky sidebar with theiaStickySidebar from Github projects. As it described in above link, this should be an easy work. I use below HTML construction:
<aside class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</aside>
This all these scripts need to work.
And also using scripts mentioned at Github page as below:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>
But this doesn't work currectly.
Have I done something wrong in this process?
Jquery selector seems wrong. Use .ssidebar or theiaStickySidebar depending on which one you want as the sidebar.
eg.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .ssidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>
I just didn't delete extra class .content. For:
<aside class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</aside>
Must use:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>

jquery undefined / null error

I am a c programmer and trying to call jquery function from html.
For example from open source I am having below, I would like to make a variable wd accessible to webdriver-app.js
A.html:
<html>
<!-- jQuery & jQuery UI + theme (required) -->
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="keyboard.css" rel="stylesheet">
<script src="jquery.keyboard.js"></script>
<script src="webdriver.js"></script>
<script src="base64-arraybuffer.js"></script>
<script src="FileSaver.js"></script>
<script src="hammer.min.js"></script>
<script src="webdriver-app.js"></script>
</head>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebDriverUrlPortChange()" onkeyup="wd.onWebDriverUrlPortChange()"/>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebPageChange()" onkeyup="wd.onWebPageChange()"/>
webdriver-app.js contains:
....
WebDriverJsController.prototype.onWebPageChange = function() {
this.view.updateSessionDepControls();
};
document.addEventListener("DOMContentLoaded", function(event) {
window.wd = new WebDriverJsController();
});
....
Currently, changing above wd.onWebPageChange() to window.wd.onWebPageChange() gives me undefined or null error. What could be wrong in above simplified code?

filter function in angular js not working

I've followed this basic AngularJS tutorial : https://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D
Everything went well until I added the clearCompleted() method. it does not seem to be working:
HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{getTotalTodos()}} </h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form class="form-horizontal">
<input type="text" ng-model="formTodoText" ng-model-instant>
<button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
</form>
<button class="btn-large" ng-click="clearCompletedTodos()">
Clear Completed
</button>
</div>
</body>
</html>
JS:
function TodoCtrl($scope) {
$scope.todos = [
{text: 'Learn Anagular', done:false},
{text: 'Build an app', done:false}
];
$scope.getTotalTodos = function() {
return $scope.todos.length;
};
$scope.addTodo = function() {
$scope.todos.push({text: $scope.formTodoText, done: false});
$scope.formTodoText = '';
};
$scope.clearCompletedTodos = function() {
$scope.todos = _.filter($scope.todos, function(todo) {
return !todo.done;
});
};
}
the "completed todos" are not getting removed .
Here is what I have done and it works for me:
Please notice that the follow lines has been changed (http:// added)
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
to the follow
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
I met the same problem, actually, write it like below, it works fine:
$scope.clearCompleted = function(){
$scope.todos = $scope.todos.filter(function(todo){
return !todo.done;
})
};
Actually none of those worked for me; I used this one.
var t = [];
angular.forEach($scope.todos, function (i)
{
if (!i.done)
t.push({text: i.text, done: i.done});
});
$scope.todos = t;

Categories