I'm using both AngularJS (v1.6.4) and jQuery (v2.1.4) in my web application. I included static html files using ng-include. So my index.html is like that:
<body>
<div id="wrapper" ng-controller="mainCtrl">
<div ng-include="'partials/header.html'"></div>
<div ng-include="'partials/menu.html'"></div>
<div class="content-page">
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="plugins/jquery-datatables-editable/jquery.dataTables.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/main.js"></script>
<script>
$("#datatable-editable").DataTable();
</script>
</body>
As you see above I have 3 include files and 1 view. I used datatable in angular view. And I want to initialize it in my index.html file with $("#datatable-editable").DataTable(); But it doesn't work. When I write html elements directly to the page instead of including, it works fine. Why is this happening? How can I solve it?
Related
I'm trying to import header.html for avoiding file duplication. But in this situation, I can't use PHP.
This is the head section of index.html file,
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
The body section I have called my header.html as follows,
<body>
<!-- include Header -->
<div id="header"></div>
<!-- end include header -->
</body>
The header is including fine but after the header included the dropdown lists become unclickable.
When I go to inspect elements there are following errors,
One possible reason for your problem would be that if you already have <html><head><body> tags in all header.html, footer.html and your master page. When you import those sub pages in your master page all those tags will come along with contents. If its true delete those tags from your sub pages because your master page should only have one of specific tags
1) Remove the following tags from header.html and footer.html
<html>
<head>
</head>
<body>
</body>
</html>
2) Regarding Slick error please make sure you are not calling the init twice, best way would be
$('.selector').slick();
$(document).ready(function() {
$.get("header.html", function(response){
$('#header').html(response);
});
})
<?php include_once('header.html');?>
<div id="header"></div>
<?php include_once('footer.html');?>
I have the below code. However, my JQuery wont run when the #id and .classes it is looking for are in partials when viewing this static page. How do I get it to work?
<body ng-app>
<h2>JQuery wont run if code it is looking for is in a Partial</h2>
<div ng-include="'_includes/partials/menu.html'" ></div>
<br />
<h2>JQuery will work if the code it is looking for is here on the page (DOM)</h2>
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav">
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Services</a></li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="_includes/scripts/custom.js"></script>
</body>
It is not a good practice to try to find html elements and modify them in an AngularJS app as you would normally do in a JQuery enabled html. Instead, try to implement whatever you are thinking of only using Angular.
Anyway you want to use ng-directives instead jQuery calls.
I'm looking for a good option to have an export to pdf functionality on each of my app's pages using angular. Does anyone have any recommendations on angular modules that can achieve this as I haven't been able to find any angular based ones.
You should use this angular-save-html-to-pdf
//Here goes your script in html file
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script>
<script src="../bower_components/jsPDF/dist/jspdf.debug.js"></script>
<script src="../dist/saveHtmlToPdf.min.js"></script>
//Add this module to your angular app :
var app = angular.module('app' , ['htmlToPdfSave']) ;
//This is your html file
<button pdf-save-button="idOneGraph" pdf-name="hello.pdf" class="btn">Hello World</button>
<!-- below block will be saved as pdf -->
<div pdf-save-content="idOneGraph" >
Hello World
</div>
I am presenting my issue in a simple manner as below
There is a index.html as below
Index.html
<script src="js/libs/jquery/jquery.js"></script> <!--JQuery library-->
<script src="js/libs/angularjs/angular.js"></script>
<script src="js/libs/angularjs/app.js"></script>
{{title}}<br>
<ng-include src="'document.html'"></ng-include><br>
newPage
My app.js is as follows
angular.module('myApp',[])
.controller('myController',function($scope){
//array to store the items
$scope.title = "This is a test message";
$scope.secondPage = "this is the second page"
});
The document.html is as follows
<div ng-controller="myController">
{{secondPage}}
</div>
I need to run the document.html in a new page, but obviously since the document.html does not have the import script of angular.js,app.js it won't render. But if i do put the script statements in document.html there will be multiple imports in the index.html. How do i solve this issue ?
Require.js would not solve this issue.
One bad way to solve the issue would be import the document.html as text and remove the importing statements.(bad bad way !!)
Create a new page for the new window opener similar to index.html
So your code will be like:
Index.html
<script src="js/libs/jquery/jquery.js"></script> <!--JQuery library-->
<script src="js/libs/angularjs/angular.js"></script>
<script src="js/libs/angularjs/app.js"></script>
{{title}}<br>
<ng-include src="'document.html'"></ng-include><br>
newPage
documentwindow.html
<script src="js/libs/jquery/jquery.js"></script> <!--JQuery library-->
<script src="js/libs/angularjs/angular.js"></script>
<script src="js/libs/angularjs/app.js"></script>
{{title}}<br>
<ng-include src="'document.html'"></ng-include><br>
Hope this works for you
I'm trying to use Ember in my grails project. However, I'm having a layout issue. The ember templates are always displaying below the footer. This does not happen with regular html, when I don't use Ember.
Here is my layout
<html>
<head>
<g:layoutHead/>
<r:require module="application"/>
</head>
<body>
<div id="wrap">
<g:layoutBody/>
<div id="push"></div>
</div>
<div id="footer>
</div>
</r:layoutResources/>
</body>
</html>
This is the page where I'm using ember template
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<script type="text/x-handlebars">
<h1>test</h1>
</script>
</body>
</html>
Here is my applicationresources.groovy
modules = {
application {
dependsOn "jquery", "emberjs","emberjsdata"
resource url:'js/application.js'
resource url:'js/App.js'
}
emberjs {
dependsOn 'jquery,handlebars'
resource url: 'js/ember-latest-stable.js'
}
handlebars {
resource url: 'js/handlebars-1.0.0-rc.4.js'
}
emberjsdata{
dependsOn 'emberjs'
resource url: 'js/ember-data-latest.js'
}
}
Problem
For some reason the hello shows up below the footer. Not sure why since it works fine with plain html
By default ember use the body as root element, then the contents of templates will be inserted and replaced in that element. So by default ember is a single page application.
If you need ember just for some piece of html, use by example:
Javacript
YourAppNamespace.rootElement = "#myEmberApp";
Html
<body>
<div id="wrap">
<!-- render normally contents from server -->
<g:layoutBody/>
</div>
<div id="myEmberApp">
<!-- all content here is controlled by ember -->
</div>
<div id="footer>
My company all rights reserved
</div>
</r:layoutResources/>
</body>
Hope it helps