How the page loading is done in this template - javascript

I opened this template and I found that when I navigate from page to another that a progress bar appear and start to load inside the page itself then disappear and the page appear without the page itself reload like normal using of href tag. The URL become like this
http://localhost/devoops/index.php#ajax/charts_xcharts.html
I want to know only how to load a page like this, what scripts I should use ?. If you gave me just an example or a link to an article that would be enough.
Here is the template please test it to know what I mean as I dont know how to describe that.
devoops template

The magic in this template are made by LoadAjaxContent function on line 1136 on js/devoops.js file.
This function was used to: start on line 3361, menu on line 3400, top menu on line 3466 and search field on the line 3475, all in the same file.
I hope you at least know some knowledge of JQuery which in fact was what was used here.
BTW the link does the rest and all templates are in the ajax folder.

I think what you referred to is so called the partial load or refresh partial views.
There's a lot of frameworks out there can achieve things like this.
Check out AngularJS and a module called ui-router
Basically, say you have a page like this:
http://levi-lu.net/#/about
If I'm using ui-router, http://levi-lu.net is the main view, and the part after hashtag (/about) is a route under this view, switch between routes will only affects part of the page (partial refresh).

Related

Hugo: Javascript commands not working till after reloading the page

I am working on a Hugo Static Site Generator theme, the problem is that the Javascript features don't load unless I reload the page
e.g
Before reloading the page
After reloading the page
This is the code, I used in adding the new class
$(document).ready(function() {
$('h2').addClass('hello')
});
Now, the problem is that since it is a static site generator when opening a new page, it will not refresh/reload the site, but load the page like a cached page. therefore most of the javascript features only apply once unless the page is reloaded. The problem is also experienced when I am using VueJs on the theme, Which means, I need to find a way to force load a new URL, instead of it loading like an anchor link.
UPDATE: I have been able to resolve it, The problem was from another javascript file, making an ajax get request
Thanks
Did you debug or add console.log inside your ready function to see it can reach there? I am suspecting that your h2 is rendered by js and at the time your code to add class hello that h2 is not rendered yet.
If this is the case I think you need to render html at server first or you can include your script in the same place as your components

Where to put script references for widgets (partial page)

Working on MVC5 asp.net website.
I have a "dashboard" page that allows the user to place pre-defined "widgets" on the page. These widgets are simply MVC 5 partial pages (Razor). I really wanted each widget to be "self-contained" so all references, scripts, etc... are within the widget's cshtml file. BUT, the main "dashboard" page also needs certain references to jQuery, bootstrap, etc...
Of course, doing this, I could encounter conflicts, duplicate references (one from main page, one from widget), etc....
Question: What is the preferred method for this scenario? Should references like jQuery and bootstrap be JUST on the main "dashboard" page? What about javascript or jQuery code that is in the widget itself? Should this remain in the widget? If so, will I encounter the issue where it doesn't have jQuery defined (because it's in the parent page), etc...?
Any thoughts on this would be appreciated?
Thanks!
**** UPDATE ****
TO further clarify: If I put the scripts, references, etc (specific to the widget) at the bottom of the widget, then when the partial page is rendered on the main page, the scripts, etc.. are not rendered at the bottom of the main page. This causes my code to act funny because of the order that things are rendered. This is one reason I ask this question. Hope this makes sense. Thanks.
Put the script code and references that are global to the application , that are used everywhere and that are not specific to a widget in the most outer page.
What i would do, is i would bundle all my script references in one place and add that bundle link to the dashboard page, this makes your code cleaner and your page will have less external references thus a better client side performance.

Issue with AngularJS

My application seems to be fine. But when I click chrome's back or forward button, my URL is changed, but I see blank screen and empty body tag with ng-view attribute. I have put a console.log in each controller and I see that the controller of desired page is executed, but page is not rendered at all, just blank body tag.
How do I fix it? I am using angularjs with Ruby on Rails if it is important.
The solution for me was to migrate javascript libraries to vendor folder and move ng-app to html tag.
Check if you are using turbolinks. It's a bit tricky to make turbolinks and angularjs work together, I suggest you to take a look here

Website: Same universal menu on different pages

I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.
Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.

Multiple pages on a single page

I am using backbone.js and building a single page application, inspired by trello.com ..
I want to know how you show many pages on top of the original page. As in how you architect it.
How do you use Backbone routers to achieve this?
For example in trello
Basepage
And then now on top of the base page you have dynamic content
like a cards detail
like a boards details
How could i architecture something like this?
I've done a couple of approaches so far in projects with 50+ pages and they both scaled well. I did not use backbone.js but the approaches are straight forward and do not require a framework to learn other than I used jQuery for selectors.
Both of them have in common creating a single overlay window that you can pull in content into the window. I wrote mine from scratch but you could easily use jQuery UI dialog. The two approaches only differ in how the content is pulled. Also, using the information on the link is all you should need to pull in the "module" or overlay content as your rule. Do not need tons of scripts loaded in to start your app. Have the modules pull in the behavior for you.
Option 1) Use the jQuery load method to pull content from stand-alone web pages by using a placeholder variable like so:
var $ph = $('<div />');
$ph.load(URL); // loads gui of remote URL + executes any script that URL has
The $ph var now contains all the GUI loaded in from the external URL so you can use selector on it to extract the particular HTML and place it into your DOM or overlay as you need.
Here is an example of the stand-alone HTML output:
<div class="module">
<a class="link">click me</a>
</div>
<script>
(function(){
// put any private vars here
$('.module .link').click(function(){
// do something
});
})();
</script>
If you remove() or destroy the dom inside the overlay through jQuery, it will automatically remove all the events directly assigned aka "bind" and "unbind" them but using "live" or "delegate" you will need to worry about "die" and "undelegate" etc. just doing die('.namespace').live('click.namespace') will ensure is cleaned.
Here is an example of this on one of my websites -> http://www.kitgui.com/docs
But the better example is within the customer section as the docs is fairly simple using hash history.
2) Using an iframe inside your overlay and assigning it a URL.
This is the easiest option but is a little slower because each page called has to have a full standalone behavior and dependencies with the iframe. Also you must worry about sizing the frame etc. unless you have a fixed overlay window.
You must have a loader overlay your iframe while its loading then have the iframe talk the parent to tell it its done loading and hide the loader.
I did this for several sites but one of them is a site in development you can see here to get the code ->
http://dev.zipstory.com (sign in and go to my zipstory and click "group" settings etc to see this, just view source to see how I did this as its all there)
The thing about iframes is you should write some code on the parent that accepts standard messages from the iframe that you agree on as a typical set of behavior such as notifying its done loading or passing messages to update something on the parent etc. This can be added on the fly and refactored as you need as long as your aim is KISS approach.
Each of the 'dynamic content' pages should be a template (underscore.js gives you _.template()) rendered by a backbone view. The main page needs to have events that initialize new views and render the templates. Look at the todos app (http://documentcloud.github.com/backbone/docs/todos.html) to get a basic idea about the flow of a backbone app.

Categories

Resources