Using jQuery to Load External Files - javascript

I am trying to load an external file within my HTML, but nothing happens.
My HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Double Navigation Bar</title>
<link rel="stylesheet" href="Mainpage.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src= "mainp.js"></script>
</head>
<body>
<div class="nav1" id="nav1">
<ul>
<li>School History</li>
<li>School Times</li>
<li>School Fees</li>
<li>Why?</li>
</ul>
</div>
<div id="article" class="article"></div>
<div class="aside">Aside</div>
<div class="footer">
<p>Contact Number: • Email Address: </p>
</div>
</div>
</body>
</html>
My js File
$(document).ready(function(){
$("reason").click(function(){
$("#article").load("Reason.html");
});
});
This is the external file I'm trying to run. Reason.html
<H1>Reasons Page</H1>

Related

How to use JQuery mobile

I'm studying jQuery mobile but I could not figure out why this code does not work at my script "tap". I have already seen a lot of time and I'm referring the code from jQuery. https://api.jquerymobile.com/tap/
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
<script>
$("#dsa").bind("tap",qq);
function qq(event){
$(event.target).css("background-color","#F0F");
}
</script>
<div data-role="page" data-title="Tableau測試" data-theme="b">
<div data-role="header">
<p>從下方選單選擇一個想看的東西</P>
</div>
<div data-role="content">
<ol data-role="listview">
<li>20180615-0001</li>
<li>test</li>
<div><p id="dsa" style="background-color:#0F6">fnhdjiahgdifsaghui</p></div>
</ol>
</div>
<div data-role="footer" id="foo">
<p></P>
</div>
</div>
</body>
In the link you say you are referring, note the $(function(){...}); notation you have omitted. It makes your functions when the document is ready. So, add it in script as follows:
$(function(){
$("#dsa").bind("tap",qq);
function qq(event){
$(event.target).css("background-color","#F0F");
}
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body onload='init()'>
<div data-role="page" data-title="Tableau測試" data-theme="b">
<div data-role="header">
<p>從下方選單選擇一個想看的東西</P>
</div>
<div data-role="content">
<ol data-role="listview">
<li>20180615-0001</li>
<li>test</li>
<div><p id="dsa" style="background-color:#0F6">fnhdjiahgdifsaghui</p></div>
</ol>
</div>
<div data-role="footer" id="foo">
<p></P>
</div>
</div>
</body>

Redirect with angularJs - but only inside div/main element

I have an html page with a header, main and footer (I use materialize and angularJS). I always want the header and footer to remain the same, but when I press links in the sidenav I want the main element to be another html page. Let's say I press the info link in the sidenav, I want the header and footer to remain, but I move from the main part of the html to another page. This is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>MyPage</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body ng-app="myPage" ng-controller="mainCtrl">
<header>
<ul id="sidenav" class="side-nav fixed light-blue lighten-1">
<li><a id="page" class="white-text text-accent-1" href="#">Home</a> </li>
<br/><br/>
<li><a id="page1" class="white-text text-accent-1" href="#"><b>Info</b></a></li>
<li><a id="page2" class="white-text text-accent-1" href="#"><b>Another page</b></a></li>
<li><a id="page3" class="white-text text-accent-1" href="#"><b>Even one more page</b></a></li>
</ul>
</header>
<main>
<div id="main">
<p> Some text for main page here </p>
</div>
</main>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About</h5>
<p class="grey-text text-lighten-4">
About my company.
</p>
</div>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="controllers/mainCtrl.js"></script>
</body>
</html>
This might be really easy, but I haven't found out how to be able to switch back and forth, and also keep the header and footer. I tried to just link the new html page into , but then I have to copy over the header and footer, which is not ideal. I don't want to have possibly 10-15 html pages I have to edit if I want to change the sidenav for example.
You have to set up a router and put a ng-view directive on some of your html elements:
...
</header>
<div ng-view>
<main>
...
</main>
</div>
<footer class="page-footer orange">
...
simple routing example:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'homeCtrl',
);
}]);
If you than use your sidebar link
<a id="page" class="white-text text-accent-1" href="#/home">Home</a>
The routeProvider will load your home.html and homeCtrl between the defined element with the ng-view directive

JS file is loaded in HTML (generated via Markdown) but not executing

The HTML file is generated using Markdown.
I have included a JavaScript file in HTML. It is visible that it is loaded in the browser (tried on Mozilla firefox).
See the proof below.
I tested if JS is enabled or not from https://www.whatismybrowser.com/detect/is-javascript-enabled
But somehow, it is not being executed.
Below is my generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-16"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="generator" content="Bootply-JBake-Custom"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-16"/>
<title>Title</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/asciidoctor.css" rel="stylesheet">
<link href="/css/base.css" rel="stylesheet">
<link href="/css/prettify.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div id="wrap">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
LOGO
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>Projects</li>
<li>About</li>
<li>Categories</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<h1>Projects</h1>
</div>
</div>
</div>
<!-- This script is loading but not executing -->
<script type="text /javascript" src="projects.js"></script>
<p>Here is the list of projects</p>
</div>
</div>
<div id="push"></div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
</html>
projects.js
$(document).ready(function(){
console.log("ready")
alert("hi");
});
console.log("loaded")
<script type="text /javascript" src="projects.js"></script>
Remove the space in type="text /javascript with the result:
<script type="text/javascript" src="projects.js"></script>
This should allow the browser to parse the HTML correctly and load the script.
EDIT: Or remove the type attribute from the <script> tag entirely, as suggested by the comment below.

AngularJs Ui route not working?

Hi I was advised to use ui-router due to having problems with nested views.
I'm trying to create a form like this to go in the middle of my page.
the form
However it doesn't work and it's made my website not being able to load properly. I cannot view anything from the header down. The logo and the header works...but No body and no footer. Form pages are in partials/form.html etc. The body and footer loaded fine before I edited the code to include the forms.
Here's my plunker my app
here's index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
</div>
<body ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Form</a>
</li>
<li ng-class="{active: isState('contact') }">
<a ui-sref="contact">Contact</a>
</li>
</ul>
<h3 class="text-muted">Demo Page</h3>
<br>
<div ui-view=""></div>
</div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"> </script>-->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"> </script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"> </script>
<script src="js/script.js"></script>
<!--<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>-->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Thanks

Conflict between jquery and bootstrap

I have a code where I am including jquery files and bootstrap files in the header.php. I am running into issues where if I include the jquery file before bootstrap.js file, it messes up the other tabs on my webpage and basically even if i click on the other tabs it does not navigate me.
I think there is a conflict between jquery and bootstrap. I am pasting my header.php file below for more reference.
header.php
<?php require_once "essentials.php";
//error_reporting(~0);
//ini_set('display_errors', 1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="script_dbafactory.js?<?php echo rand(0,511);?>"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<img alt="logo" src="./images/source.png">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<div class="dropdown">
<?php include "userlogin.php"; ?>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
<!--<script type="text/javascript">
//Script to implement tabs
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>-->
<script>
$.noConflict();
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
</script>
Can someone please let me know how do i solve this issue? and how should i load all the js and css files to avoid any issues with the webpage.
Thanks
data-toggle="tab" for bootstrap means there has to have a [tab panel] for it, however, you only use it as nav, and it caused the problem.
Please read: http://getbootstrap.com/javascript/#tabs
Also, use js closure can more easier to avoid js conflict issue:
(function($){
....
})(jQuery);
Please check the code below, you can use WinMerge to compare the code with your own:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title ?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<li class="dropdown">
<a id="userlogin" role="button" data-toggle="dropdown" href="#">rdesai<span class="caret"</span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="userlogin">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script>
(function($){
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
})(jQuery);
</script>
</body>
</html>
Usually when i run into jquery and bootstrap conflicts, i just add this as the first line of my php file:
<script>jQuery.noConflict();</script>
This is to avoid conflicts with other libraries.
You can read more here: https://api.jquery.com/jQuery.noConflict/
Edit:
Or use
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
instead of 1.10.3

Categories

Resources