Using javascript on loaded html - javascript

I've briefly looked to find any similar questions and found non that are alike or that I understand, so first I apologise if this is a duplicate.
My problem is that I cannot use javascript on loaded (.load) html.
I call a navbar into a div by use of:
$(document).ready(function() {
$('.nav').load("navbar.html");
});
This works perfectly and I have no problems with this.
Problems arise when I want to, for example, add a class to my loaded html code.
The script I currently use (saved in a separate .js file and called at the end of my html code):
$(document).ready(function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
Here is what I intended to happen to the loaded html code:
This is part of the navbar and is loaded through the first code snippet ^.
<li id="profile">Profile</li>
After page is loaded: (Added: 'class="active")
<li class="active" id="profile">Profile</li>
(This is part of an unordered list using bootstrap nav-tabs.)
Anyway, when I directly put this code into my html page and remove the import through javascript, I can add class's such as the 'active' class.
Additionally, I have a slider on my page which uses arrows through the use of javascript to 'slide' through the pictures and I experience exactly the same problem:
When the code is imported I cannot edit through use of javascript, but when the code is present in the actual raw html code, I can.
I don't understand why this is as I am fairly new to javascript and its syntax.
Thanks in advance, I'd be happy to answer any questions as I'm sure this isn't exactly clear because I am not entirely sure where the problem lies.

What's likely happening is that your code is trying to operate on the loaded html before it has actually loaded. Try putting it in the complete callback:
$('.nav').load("navbar.html", function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
This will make sure that the code runs after the load has completed.

Related

Animation to changing HTML page

I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.

How to preload all my javascript files before loading my website body?

This question have been already treated on the internet but i dont find a simple answer.
I would like to load only thoses javascript files and css, before starting to run the body my website.
I'm using packery.js, but when my website appears at first, my divs are misplaced. When i reload the page, everything gets back in place.
Is there a way to say : does all css and js files have been donwload? Yes? Ok run the body.
Thank you
There isn't a lot of information you provided which would help us solve the issue directly, however couple of things...
Make sure all your scripts and styles links are places in the head tags. The HTML page gets rendered in browser Top-Down. I.E. It'll load any files from HEAD tags before the body is reached, same thing if you want your scripts to be loaded after the body is loaded.. just put them at the bottom, before the BODY closing tag.
Using JQuery would be the fastest solution if you wanted to perform some functionality after your page has loaded (I know there isn't a JQuery tag, however thought providing a JQuery answer could be advantageous.
$(document).ready(function()
{
//Document Loaded, Put code you want to execute here.
}

Changing div content via jquery with another html file's content

To begin, I have spent the last few hours browsing stackoverflow on related topics. Many of them seemed very similar to the issue I'm having, there was even a couple that resembled mine almost perfectly. However, the fixes that worked for them do not seem to be working for me. I think it would be best for me to post my code and have others look them over; I will try to be as detailed as possible.
What I'm trying to do:
I have a page setup with links inside li's, and when it is clicked, it is supposed to pull some html content from another page I made. More specifically, it is supposed to pull out the html content from a specific div id in that page. I am having trouble pulling anything out from it, and having it posted to my main pages div.
My HTML part with the navigation menu:
<ul id="nav_main">
<li class="navLink">link here</li>
</ul>
The div that is supposed to change dynamically (on click) is labeled as this:
<div id="main_content">
<p></p>
</div>
The other .html file that I pull data from has a div that looks like this:
<div id="one">blahbalhblahblahlbhalbhlah</div>
The part I am having difficulty with is the javascript code. I have tried using load and get, and neither seem to be working. Here is my skeleton code:
$(document).ready(function(){
$("#nav_main li").on("click", function() {
// here was my first attempt:
$("#main_content p").load("contentholder.html #one");
// my second attempt, using get():
$.get("contentholder.html", function(data) {
$("#main_content p").html(data)
});
});
My problem with this is that the #main_content doesn't seem to be changing. I think the problem is that the load and get attempts aren't working, they don't seem to be pulling the data out as it's supposed to.
All these files are on my local drive. Any help would be greatly appreciated
$(document).ready(function(){
// your code here
});
You are missing the function(){
In addition to your syntax errors pointed out by Brad M, keep in mind that most browsers prevent AJAX calls if they aren't made from a server, so if you aren't running a localhost, you will most likely get an Access-Control-Allow-Origin error when making the AJAX call.
See more info here: Get HTML code of a local HTML file in Javascript

jquery .html doesn't process certain tags and functions

At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div

JS is not loading correctly, where is the fault?

I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.

Categories