Meteor: Dynamic page not transitioning properly - javascript

Okay, this is a really weird one. Unfortunately, I can't show a whole lot of code because I really have no idea where the problem is originating -- However, I can describe the problem. That said, if there' s some code you think is relevant, please ask and I'll post it! So, here goes:
I have an HTML template (found here) that I'm chopping up into Blaze templates for integration into a real estate site that I'm working on using Meteor. The template includes all these external CSS and JavaScript files that I've included by simply leaving the templates as-is and putting all the assets required by the template into /public folder of the Meteor project. The files are loaded via regular <script> and <link> elements embedded in the <head> and near the bottom of the main layout.
Here is what my <head> looks like:
<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>Real Places</title>
<link rel="icon" href="images/cropped-ms-icon-310x310-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-ms-icon-310x310-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="images/cropped-ms-icon-310x310-180x180.png">
<!-- Google font-->
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700,600,500' rel='stylesheet' type='text/css'>
<!-- Include the flexslider stylesheet -->
<link href="js/flexslider/flexslider.css" rel="stylesheet">
<!-- Include the lightslider stylesheet -->
<link href="js/lightslider/css/lightslider.min.css" rel="stylesheet">
<!-- Include the owl-carousel stylesheet -->
<link href="js/owl.carousel/owl.carousel.css" rel="stylesheet">
<!-- Include the swipebox stylesheet -->
<link href="js/swipebox/css/swipebox.min.css" rel="stylesheet">
<!-- Include the select2 stylesheet -->
<link href="js/select2/select2.css" rel="stylesheet">
<!-- Include the font-awesome stylesheet -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Include the select2 stylesheet -->
<link href="css/animate.css" rel="stylesheet">
<link href="js/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/main.css"/>
<!-- Default Theme stylesheet -->
<link rel="stylesheet" href="css/theme.css"/>
</head>
Here is what my main layout looks like:
<template name="app_home"> <!-- note this is distinct from site_home, which is a different template -->
<body class="inspiry-slider-two">
{{> page_loader}}
{{> mobile_header}}
{{> site_header}}
{{> Template.dynamic template=main}}
{{> site_footer}}
{{> login_modal}}
{{> real_places_includes}}
</body>
</template>
All of the scripts that the template depends on are inserted via the real_places_includes template call. Here is what this template looks like:
<template name="real_places_includes">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/flexslider/jquery.flexslider-min.js"></script>
<script src="js/lightslider/js/lightslider.min.js"></script>
<script src="js/select2/select2.min.js"></script>
<script src="js/owl.carousel/owl.carousel.min.js"></script>
<script src="js/swipebox/js/jquery.swipebox.min.js"></script>
<script src="js/jquery.hoverIntent.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/transition.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/modal.js"></script>
<script src="js/meanmenu/jquery.meanmenu.min.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/custom.js"></script>
<!-- .modal -->
<script>
...
// This is a bunch of modal code specific to the template
...
</script>
</template>
This works great when the page first loads, but when I route away from the main page and back, it appears as if assets aren't loading properly when I come back. Here is some relevant routing code:
FlowRouter.route('/', {
name: 'Site.home',
action() {
BlazeLayout.render('app_home', { main: 'site_home' });
}
});
FlowRouter.notFound = {
action() {
BlazeLayout.render('app_home', { main: 'site_not_found' });
}
};
Right now almost all the links in the template don't work since I haven't swapped them out for 'live' {{pathFor 'route'}} calls. So, if I say, click on one of those links, I get the 404 page, as I should. It appears to load just fine. On the 404 page, I added a {{pathFor 'Site.home'}} to navigate the user back to the main page. However, when you click it, all the page elements on the home page (the ones that previously loaded fine!) that depend on JavaScript don't seem to format correctly. I checked the Chrome debugger to find this out. However, all of the assets are still loaded properly according to Chrome's Resource inspector!
Here is what the page looks like initially and after routing back home:
Before routing
After routing
As you can see, the select boxes haven't been rendered properly, the slider at the top of the page below the nav bar also isn't rendering and displays an animated loading graphic... basically anything that depends on JavaScript is kaput.
Here are a couple of screenshots of my debugger highlighting the problem:
Before routing
After routing
This is what that same 'Location' select looks like before and after using my route.
So, for whatever reason, when I hit some route, the code that the route depends on doesn't seem to execute as it should in order to format the page as it was originally HOWEVER if the route is hit when the site first loads, it executes fine... I feel like I need to be firing some global event or something like that manually, but I don't really know what... Or maybe something else entirely. I have tried firing 'load' and 'ready' events manually on the Template.site_home.onRendered callback, but that hasn't worked.
Does anyone have any idea how I can fix this and make the page transition properly?

Related

Why isn't my JavaScript rendering properly when using Blazor?

So I have this theme that I usually use, it's a folder containing all the files, such as the assets, the html pages etc etc.
And if I start the index page from there and I click a menu item, wen can clearly see that the animation works perfectly.
However, as soon as I add the same CSS and JS which that page uses, this is how it starts acting.
You can't see it but I'm clicking each item, and it doesn't animate the menu.
It's also missing some icons which you can see if you compare the two.
Now here is what's interesting..
It works PERFECTLY if I change the render-mode to static rather than ServerPrerendered here
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
But if I do that we have this issue..
Rendering server components from a static HTML page isn't supported.
The way I add the HTML is by doing this.. I go into the _Host.cshtml file and at the top in the tags like so
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />
<link href="assets/css/site.css" rel="stylesheet" />
<!-- Articles CSS -->
<link type="text/css" rel="stylesheet" href="assets/plugins/dataTable/datatables.min.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/summernote/summernote.min.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
<!-- Main CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/style.css" />
And the same goes for the JS files, but I do it before the tag like so..
<script src="_framework/blazor.server.js"></script>
<!-- Footer Script -->
<!--================================-->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
<script src="assets/plugins/popper/popper.js"></script>
And it can obviously find some of it because it keeps the same general style, and when I render it using "static" as I mentioned before, it works just fine. It's almost as if it's rendering something too fast.
Where did I go wrong on this?
I think that's now easier to achieve with the Net5. You can add this JavaScript module to your .NET library as a static web asset (wwwroot/exampleJsInterop.js) and then import the module into your .NET code using the IJSRuntime service:
await jsRuntime.InvokeAsync<JSObjectReference>("import", "./_content/MyComponents/exampleJsInterop.js");
The “import” identifier is a special identifier used specifically for importing a JavaScript module. You specify the module using its stable static web asset path: _content/[LIBRARY NAME]/[PATH UNDER WWWROOT].
Learn more about it here

Make DIV load CSS file

For the program I'm writing I have a main navigation page where the user get landed after he / she log into the system.
On this screen I use 2 DIV's one div is for the navigation bar second one is used as an iFrame.
I'm using w3.css library to create the navigation bar but this actually mess up my CSS main CSS file when I load the target file in the second div. But it works fine if I use an iFrame which I really don't like to do.
If I could load my CSS file when the div loads the target link file the problem will be solved.
So my problem is how to load the CSS file in to the div when the external file loads.
This is my HTML:
<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>
</head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
Home
Link 1
Link 2
Link 3
</div>
<div id="My-container">
<!-- All pages load here -->
</div>
</body>
</html>
My NavBar JavaScript:
$(document).ready(function(){
$('#main').click(function () {
$('#My-container').load('listUser.php');
})
});
File loader JavaScript:
$(document).ready(function(){
if($("#my-container").size>0){
if (document.createStyleSheet){
document.createStyleSheet('../../CSS/main.css');
}
else {
$("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
}
}
});
Above file loader function is not mine I found it on a site and tried to use it but when I do console throws an error saying "Size" is not a function. When I change it to length the error goes away but code doesn't work.
If any one asks why don't you just copy paste the nav bar to all the files my answer is I'm lazy.
Any way please show me the light.
It seems you want to check if that specific dom exist or not. For that you need to use length. Also the dom id seems to be My-container but not my-container.
You can try the following
if($("#My-container").length>0){
// rest of the code
}

AngularJS - Include <script> after all directives have rendered

Apologies if this is an old question. I have spent a few hours searching for an answer but had no luck.
I'm attempting to convert an existing (primarily jQuery) application to use AngularJS. I've hit a problem where a JavaScript file I am including in index.html is being run too early when being included in my AngularJS application. i.e. by using a <script> tag:
<script type="text/javascript" src="/components/js/theme.js"></script>
This file contains a lot of jQuery which needs the rest of the page to have been rendered to have an effect. So is there a way I can include this script and ensure it is only loaded after the rest of the page has finished loading? I have a set of directives on the page and the script is being loaded before these are rendered.
Update:
Here is the structure of my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App Title</title>
<base href="/">
<!-- icons and CSS -->
<link href="/img/ico/favicon.ico" rel="shortcut icon"
type="image/vnd.microsoft.icon">
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet"
type="text/css">
<!-- External Libraries -->
<script type="text/javascript" src="/external/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/external/angular/angular.js"></script>
<!-- Angular Components -->
<script type="text/javascript" src="/components/services/ui.js"></script>
<script type="text/javascript"
src="/components/navigation/js/navigation.js"></script>
<!-- App set and config -->
<script type="text/javascript" src="/js/app/app.js"></script>
<script type="text/javascript" src="/js/app/config.js"></script>
<script type="text/javascript" src="/js/app/routes.js"></script>
<!-- endbuild -->
<!-- Precompiled HTML templates -->
<script type="text/javascript" src="/js/templates.module.js"></script>
</head>
<body ng-cloak>
<!-- directive -->
<top-nav-bar></top-nav-bar>
<div class="content">
<div class="container">
<!-- directive -->
<side-nav-bar></side-nav-bar>
<!-- angular view -->
<div ng-view></div>
</div>
</div>
<!-- directive -->
<adysis-footer></adysis-footer>
<!-- Bootstrapper -->
<script src='/js/app.bootstrap.js' type='text/javascript'></script>
<!-- JAVASCRIPT FILE WHICH NEEDS TO RUN AFTER PAGE HAS LOADED! -->
<script type="text/javascript" src="/components/js/theme.js"></script>
</body>
</html>
As you can see, the "theme.js" file is the last item of the <body>. I have stopped in the file to ensure it is being loaded. But this is always done before the rest of the page has rendered. Could some other JavaScript be interfering upsetting things? Note that I have not included all of the JavaScript files that are being included.
Update 2:
I've added further break points in the JavaScript functions for the directives you can see in my index.html. Each of them is stopped in after the theme.js is executed. I don't know why this is, so I'm mentioning this in case it gives more clues as to the problem.
Update 3:
The first line of the "theme.js" file is:
jQuery(document).ready(function($)
And then the function contains a long series of jQuery selectors to setup events and so on. My understanding is the point of this line is to wait until the document has been loaded. But could something in my setup, e.g. Angular, be preventing this from happening?
I've tried changing this line to:
angular.element(document).ready(function($)
and whilst this does lead to the content on the function to be run later, it's still not after the whole document has loaded.
Make sure it's at the end of your HTML Body and not in the header section. If it's in the head section it'll load before the page renders.

Adding bootstrap in HTML

I'm going to use bootstrap to build up my front end. Also I'm using JSP and JSTL
What I've read in some articles over the internet is the proper approach of adding an external javascript file should be written before the body closing tag for more optimization of the page. Now I'm trying to apply this with the bootstrap, what i did is put the css of the bootstrap to an external html file:
import_header.html:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.min.css">
which I imported to the head of the html like this:
<jsp:include page="import_header.html" flush="true" />
Now I want to do the same thing with the js file of the of the bootstrap and the jQuery lib but I don't know what is the proper way of doing this.
that's the recommended way, how to place them:
e.g. footer.html
<!-- Placed at the end of the document so the pages load faster -->
<script src="jquery/jquery-2.0.3.min.js"></script>
<script src="bootstrap/bootstrap-2.3.1.min.js"></script>
<script src="myOwn.js"></script>
</body>
</html>

Twitter Bootstrap: How do I align section in navbar to right?

Here is the plunker - http://plunker.co/edit/YplsPFRiYo4jjbi7HcYV?p=preview
Required?
- The User Settings dropdown should be on the extreme right side
- The User setting should look like another section like other Link, and not as button
How do I do that?
Thank you
UPDATE
I worked for a while and was able to get it displayed on right side, but nothing happens on click
http://plunker.co/edit/YplsPFRiYo4jjbi7HcYV?p=preview
You need to include JQuery in your index.html file, JQuery is a dependency of the bootstrap.js
http://plunker.co/edit/dePLLK?p=preview
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>

Categories