Jquery not loading local html file - javascript

I have looked around but still can't get my code to load my html file. From my index.html file I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Anderson, Georgia Tech Professor</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#header').load('header.html');
alert("Does this load!!!??")
</script>
</head>
<body>
<div id="header"></div>
<section class="section_2 index_section">
...
</section>
...
</body>
</html>
And such.
I included the alert for debugging purposes and it works fine, but it never loads my header.html file. I have included both files in the same directory and level.
My header.html includes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!------------
- Header -
------------->
<header class="section_1" id="header">
<img src="Images/David's_typical_Profile_Picture.jpg" alt="David Anderson" id="prof_pic">
<h1 id="name_plate">
<a class="name_plate" href="about.html">David Anderson</a>
</h1>
<h2 id="institution_name">
Georgia Institute of Technology
</h2>
<nav id="main_nav">
<ul class="semantic_list">
<li>Home</li>
<li>Courses
<ul>
<li>ECE 6254</li>
<li>ECE 6271</li>
</ul>
</li>
<li>Lab</li>
<li>Consulting</li>
<li>About</li>
</ul>
</nav>
</header>
</html>
I have looked around everywhere, including Adding jQuery to sublime text 2, Why does jQuery or a DOM method such as getElementById not find the element?, https://learn.jquery.com/using-jquery-core/document-ready/ as well as websites about writing/including javascript: https://www.sitepoint.com/community/t/multiple-pages-without-repeating-the-site-structure/8251/3, https://www.sitepoint.com/community/t/calling-multiple-htmls-into-single-html-file/216583/2, but I still run into the same problem, where it simply doesn't load header.html. Ever.
I am loading it on safari using a local path, not a website.
If anyone has a solution/or answer I'd be very grateful.
Thanks!

Related

Toggle navbar with the navbar-brand images

I have the following html that toggles the navbar.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.css">
<link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
<link rel="stylesheet" href="assets/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<!-- Left Panel -->
<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default">
<div class="navbar-header">
<a id="menuToggle" class="navbar-brand"><img src="images/pfcnowhite.png" alt="PFC"></a>
<a id="menuToggle" class="navbar-brand hidden"><img src="images/pfcp.jpg" alt="PFC"></a>
</div>
</nav>
</aside>
<!-- /#left-panel -->
<div id="right-panel" class="right-panel">
</div>
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
Now, I know my css and js won't work if someone tries to implement it because those are locally stored on my dev environment hopefully that won't be an issue with my question.
As it is right now, if I load the page it shows me the navbar-brand image just fine and when I click it the left panel does toggle as expected and then it shows me the navbar-brand hidden image as it should but when I click the hidden image it doesn't toggle back.
I'm trying to make it work without the 'normal' fa-bars on the side, any help or advise is greatly appreciated

cannot link css file to file

for some reason I my index.html does not read the style.css. It is linked though. what is the issue ? I added the type, I did add the right path I think.
thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Main Start-->
<div class='main'>
<!--Home Section Start-->
<section class='home-section'>
<div class='container'>
< div class ='row'>
<div class='home-text'>
<p> </p>
<h1> </h1>
<h2></h2>
</div>
<div class='home-img'></div>
</div>
</div>
</section>
<!-- Home Section End-->
</div>
<!--Main End-->
<script src="js/script.js"></script>
</body>
</html>
Issue solved, it was that I forgot one root variable.
Just Try :
<html>
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<!-- Here Head Content-->
</head>
<body>
<!-- Here Body Content-->
</body>
<html>
But also after you added screenshot for your CSS File you said in previous
answer that it the problem was from the CSS File not the linking (That mean if
there is something wrong with your CSS File the whole file not work)
One possible cause of such problems are browser cache.
If you are on windows, try running ctrl+f5 to reload the page.
Every thing is correct whith you, the only thing that may be wrong is that the css file is not in the same folder with the index, for no reason, also try removing type="text/css",it may work.

Angular 5 include javascript files

I'm using Angular 5 and I want to include my script files .js
I'm using the script tag in the index.html
When I refresh the page everything works fine, but when i'm using SPA routing my js files does not included
Here's an exemple :
If I refreshed the page
When i'm using SPA navigation
Here's index.html where i include all my script whith script tag
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<title>Listeo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/colors/main.css" id="colors">
</head>
<body>
<app-base></app-base>
<script type="text/javascript" src="../assets/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="../assets/scripts/mmenu.min.js"></script>
<script type="text/javascript" src="../assets/scripts/chosen.min.js"></script>
<script type="text/javascript" src="../assets/scripts/slick.min.js"></script>
<script type="text/javascript" src="../assets/scripts/rangeslider.min.js"></script>
<script type="text/javascript" src="../assets/scripts/magnific-popup.min.js"></script>
<script type="text/javascript" src="../assets/scripts/waypoints.min.js"></script>
<script type="text/javascript" src="../assets/scripts/counterup.min.js"></script>
<script type="text/javascript" src="../assets/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="../assets/scripts/tooltips.min.js"></script>
<script type="text/javascript" src="../assets/scripts/custom.js"></script>
<script type="text/javascript" src="../assets/scripts/switcher.js"></script>
</body>
</html>
and here's the navigation bar :
<nav id="navigation" class="style-1">
<ul id="responsive">
<li>
<a [routerLink]="['home']" [routerLinkActive]="['current']">Home</a>
</li>
<li>
<a [routerLink]="['restaurants']" [routerLinkActive]="['current']">Restaurants</a>
</li>
</ul>
</nav>
When I'm using the href everything wirks fine, but with [routerLink] I'm facing the problem.
Are you using the Angular CLI?
Then you can put your custom js files into .angular-cli.json
"scripts": [
"<path_to_script",
"<path_to_second_script"
]
Then you don't have to reference them in the index.html.
You need to manually trigger the script
From looking at the documentation ( http://rangeslider.js.org/), the way to trigger the script is
$('input[type="range"]').rangeslider();
So what you probably need to do is trigger this in your component's ngAfterViewInit method (the one using rangeslider). This need to be in ngAfterViewInit to make sure that the dom elements have been created.
//component.ts
ngAfterViewInit()
{
$('input[type="range"]').rangeslider();
}

Load a html or div's content into a div

I have a set of "li". On clicking each of those "li", I'd like to load a "div" with contents from a html page. I've read some answers on stackoverflow & tried them but they aren't helping me get this working.
Here's the code am trying now
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page1").click(function(){
$('#result').load('dst.html');
//alert("Thanks for visiting!");
});
$("#page2").click(function(){
$('#result').load('incf.html');
//alert("Thanks for visiting!");
});
});
</script>
</head>
<body>
<header class="site-header-wrap">
<div class="site-header">
<h1>MY TOOL</h1>
</div>
</header>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>HOME</span></a></li>
<li><a id="page1" href="#"><span>OPTION 1</span></a></li>
<li><a id="page2" href="#"><span>OPTION 2</span></a></li>
<li><a id="page3" href="#"><span>OPTION 3</span></a></li>
</ul>
</div>
<div id="result"></div>
</body>
<html>
The code in dst.html is
<html lang=''>
<body>
<p> In page 1(dst page) </p>
</body>
<html>
Could I request help please spot what I'm doing wrong here?
Your code seems to be working for the most part for me the only thing i changed in your code is $('#dblock').load('dst.html'); to $('#result').load('dst.html'); since there is no div with the id #dblock
also make sure your file structure is setup properly and the html files are there with what you have setup now you should have three html files in the same folder

page transition for app using jquery mobile and phonegap

I'm building an app in html/css/javascript and using phonegap to build.
So, I first wanted to have to simple page to page navigation. I tryed this:
index:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Result: when I click on the button the test.html page loads very slow and the data-transition="slide" seems to be ignored.
I found an article about dynamic page loading: https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en
Which I really don't get. Aren't the HTML files stored locally? So why do a XMLHtppRequest?
My question is: How do I get a good page transition (fast and with effects)?
You should remove rel="external" from your <a> link.
The attribute rel="external" disables the Ajax navigation, skipping the transition effect, and refreshes your page test.html.
Try your code after removing it.
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
<a data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Let me know about your results.
Try this solution by Piotr Walczyszyn. Highly recommended for anyone using Jquery mobile and Phonegap together.

Categories