In my single page application inside one of route templates I have script which loads (in place where it is placed) some content, like inputs and some forms.
simple example hot it looks:
<div class="col-xs-12">
<div class="col-md-12 centered-col-div" style="height:300px">
<script type='text/javascript' src='https://www.getContent.com' ></script>
</div>
</div>
When I put this code in main page, it works perfectly, but inside route template it is not executing. maybe someone can help me and say how to execute this code when route template is visible.
Related
I'm creating a website using GitHub Pages and I want to put the header and footer into separate documents to then link to them on each page I make. GitHub pages only supports static websites, so I can't use PHP or anything like that.
I'm trying to use the advice I found on:
Make header and footer files to be included in multiple html pages
https://www.youtube.com/watch?v=rDFxEALe0JA&ab_channel=JoseMartinez
https://www.quora.com/How-do-I-include-a-header-and-footer-file-in-every-HTML-page-we-are-designing
which uses jQuery but it's just not working for me. Can someone tell me where I'm going wrong?
My file hierarchy:
- index.html
- html
- header.html
- footer.html
- otherfiles.html
- css
- header.css
- footer.css
- otherfiles.css
this is in the index.html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("html/header.html");
$("#footer").load("html/footer.html");
});
</script>
</head>
<body>
<!-- Header-->
<div id="header"></div>
<!--main section-->
<!-- Footer -->
<div id="footer"></div>
And I put this in footer.html and header.html body:
<body>
click here for google
This is from what I can tell, what I'm meant to do, but it's not working at all. Just no header or footer appears on my website.
possibly look into using an iframe object to reference the page, theres an example on the last link you posted (one of the comments)
OR try removing header/footer files from the html folder and put them in the same directory as index.html, to eliminate the possibility that its the file reference that is the issue.
OR look into using the handlebars.js library. this library can be used to implement an MVC layout (basically files are referenced by a home controller to display content). And it will work with GithubPages, I've done it before.
hopefully this helps a little, at the very least pointing you in the right direction.
So I am trying to make a template using HTML and jQuery AJAX. The problem that I am running to is HTML is automatically closing tags prior to receiving my closing tags so it messes up my format i need to know more info about this or a better way to do this
JavaScript
$.post( "https://url.com/header.php", function(data){
$( "#header" ).after(data);
});
$.post( "https://url.com/footer.php", function(data){
$( "#footer" ).before(data);
});
This is the opening tag in the #header file that I'm pulling from server
<div class='container-fixed'>
This is closing tag my #footer file that im pulling from the server
</div>
Than I have my home.html file which is my template page with my #header,#footer
<header id='header'></header>
<div>HELLO WORLD</div>
<footer id='header'></footer>
This is how I want my final code to look after header and footer has loaded
<div class='container-fixed'>
<div>HELLO WORLD</div>
</div>
But this is what is actually happening
<div class='container-fixed'>
</div>
<div>HELLO WORLD</div>
The browser is not wrapping my code in the container file, it just closes my container div on its own than it just deletes my closing tag in footer file. My code is way more complex than what I'm using in this example, but I'm just trying to keep it simple; I know that I can add the container div to my home.html but that's not what I'm trying to do. Any workaround? Thanks
My question is how can I send and unclosed tag in 1 file and close it in the other without browser doing it for me.
It's a hassle (and not a good practice) to spread opening and closing tags across multiple files. Even if you want to have separate files for each header, content, and footer, make a base template file which includes these three (or more if needed) files and each of the file has its own neat and complete code with each file opening and closing its own tags within itself. That makes life easier for development, maintenance, and scaling.
Below is a sample layout for a base template file:
<html>
<head>
<!-- include HEAD file here (meta tags, styles, js/css files etc.) -->
</head>
<body>
<div id="container">
<header>
<!-- include/display HEADER file here -->
</header>
<nav>
<!-- include/display NAV/MENU file here -->
</nav>
<div id="content">
<!-- include/display CONTENT here -->
</div>
<footer>
<!-- include FOOTER file here -->
</footer>
</div>
</body>
</html>
You can add or remove individual modules (files) as per your requirements.
In my opinion, this approach will be most suited to you since you are trying to build the template through ajax, so you can easily keep all files separate and then include them as and when you need them. You can also have some files included by default (on page load) and include others dynamically through ajax. Hope you get the idea.
I am working on a project that requires two angularjs files, textAngular-sanitize and angular-sanitize. When both of these files are loaded in the header or footer, the part of the document that requires the file that is loaded first will work, however the element that requires the file that is loaded after the first ceases to work. I.e when angular-sanitize is loaded first, then the textAngular dependent element stops working, whereas if the textAangular file is loaded first, then the angular-sanitize element stops working. This is presumably because both files are loaded and run over the entire document. Is there a way to confine the 'scope' of one of the files to only one element on the page so that both scripts can be run without interfering with one another?
Or perhaps, is there an alternative method of loading external scripts other than the <script> tag?
Here is an example of what is going on:
<head ng-app="myApp">
<script src="scripts/textAngular.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
</head>
<body ng-controller="MainController" ng-init="initialize()">
<div id="ngSanitizeElement">
<!-- This element won't work -->
</div>
<div id="textAngularSanitizeElement">
<!-- This element will work -->
</div>
</body>
Not sure to understand your problem, but if you're looking for something to load external files from your controllers or your router, try ocLazyLoad : https://oclazyload.readme.io/docs
Which backend do you use? PHP? I would then put in the script tag the value of the right file depending?
Or can't you use 2 different ng-controllers?
<div ng-controller="textAngular ">
<div ng-controlelr="angular-sanitize">
I am building a one page application with AngularJS. Right now I am using just one controller which is one very long file (of course there are several factories but nevertheless the Ctrl is still full). So as I could divide my page into navbar and the body, i thought of having a separate Ctrl for the navbar. (the thing is here, the navbar includes a big options dropdown and some other stuff, so not just Title and Links) However I do not really how to do that. Right now my main.html file looks like the following:
<div ng-include="'views/templates/navbar.html'" id="navbarContainer"></div>
<div id="map-container" class="container-fluid">
<leaflet id="map" lf-center="hamburg" markers-nested="true" layers="layers" defaults="defaults" markers="markers" class="map"></leaflet>
</div>
So as you can see, my navbar is a template in the main html file. Additionally the navbar and the main html should have the same route. So now, I definitely do not know how to use a second Ctrl. Do I not use the ng-template or can I just give the ng-template a separate Ctrl than the part below?
The navbar.html file can include its own controller.
Navbar.html
<div ng-controller="NavbarCtrl">
<!-- your code -->
</div>
See the Controller: Scope Inheritance Example in the AngularJS Docs for more info.
I am loading a html page via angular route inside a ng-view.
The page which I am loading contains a ng-include tag, pointing to
another html file.
I tried all the below syntax =
<div ng-include src="'some.jsp'"></div>
<div ng-include="'login.jsp'"></div>
<div ng-include src="include.url"></div>
None working. But If I put the same tag outside the ng-view
its working fine.
What am I doing wrong?
The url to the file should be relative to your index.html (main html file).
If your structure is like this:
index.html
template
template1.html
template2.html
and in template1 you want to ng-include template2.html,
you should do
<div ng-include="'template/template2.html'"></div>
Here is a working example.