Load issue of html page - javascript

Here's my code:
</html>
<body background="images/top_bannercroppppp.jpg">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<label id="toplabel" style="color:#FFFFFF"></label>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<img src="images/btn_logout.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar" id="menu">
<div id="divRows">
<ul class="nav nav-sidebar" id="ul_list">
<li id="divlist" class="active">
<img src="images/camera_Off.png" width="150" id="liveVideo" style="margin-left:10%" onclick="playon1()" alt="Camera" />
</li>
<br/>
<li>
<img src="images/users_Off.png" id="users" width="150" style="margin-left:10%" alt="Users" onclick="playon2()" />
</li>
<br/>
<li>
<img src="images/settings_Off.png" id="settings" width="150" style="margin-left:10%" alt="Settings" onClick="playon3()" />
</li>
<div id="ulsettings">
<ul id="list">
<li> Video
</li>
<li> Advanced Features
</li>
<li> Camera
</li>
<li> Audio
</li>
<li> Date/Time
</li>
<li> Network and Port
</li>
<li> Alarm
</li>
<li> Storage
</li>
</ul>
</div>
<li>
<img src="images/maintanance_off.png" id="maintenance" width="150" style="margin-left:10%" alt="Maintenance" onClick="playon4()" />
</li>
<br/>
<li>
<img src="images/support_off.png" id="support" width="150" style="margin-left:10%" alt="Support" onClick="playon5()" />
</li>
<br/>
</ul>
<img src="images/logo.jpg" id="logo" />
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="topbanner"></div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap-3.1.0/docs/dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.1.0/docs/assets/js/docs.min.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery/jquery-1.8.3.min.js"></script>
<script src="js/jquery/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery/jquery.base64.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</body>
</html>
Why does the HTML pages take time while loading and the page hangs away without letting other pages to load? When I click on one button there's no problem loading it but as soon as I click the other one page hangs out or it won't load and takes time in loading.


You are loading the same libraries many times and from diferent locations. For example:
js/jquery/jquery-1.10.2.js
http://code.jquery.com/jquery-1.9.1.js
https://code.jquery.com/jquery-1.10.2.min.js

Related

Image loading fails for Firefox but runs fine for Chrome, Edge and IE

Edit : Tested on IE and it works!
Edit 2 : Tested it by putting the HTML dump into a html file and loading it, it works! This is kind fishy, why doesn't it load if I load it through the Django app and Firefox
Edit 3 : I wonder if it has something to do with local host (127.0.0.1:8000) but that shouldn't be it!
Edit 4 : After reinstalling Firefox, it works ... .... .... damn it!
I wrote a django app that gets the info of a Twitter account and display it's profile image on a web page. While doing this I noticed that whenever I load the page where the image is present, Firefox does not load the image (the image loads perfectly on Chrome and Edge), it doesn't even seem to try (as there is no log in the network tab of page inspector).
I tested it to check if it's Twitter who is blocking people from loading their stuff in other sites by putting a simple <img src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg"> tag in a new html file and run it across all browser on my system. The result is good, all browsers display the image correctly.
I tested it again by running the app and load the page but it doesn't load the image on Firefox (loads perfectly on Chrome and Edge) but when I replace the src url with a url of another image on imgur and it displays it properly on Firefox (loads perfectly on Chrome and Edge). I also tried it using an image from another profile and that failed as well on Firefox.
It seems that the image can't be loaded only if it is from Twitter and loaded through the DJango app on Firefox (The 2 other browsers , Edge and Chrome, loads the image perfectly).
I tried using incognito (in case one of the extensions I use is interfering) and the result is the same, it failed to load.
I then checked if the url is malformed in anyway and it is not.
Do anybody know why the image loads perfectly on other browsers but Firefox?
For trouble shooting here is my views.py
def load_dashboard(request):
template_name = 'twitter/dashboard.html'
context = dict()
if request.user.is_authenticated:
bot_list = TwitterBot.objects.filter(creator=request.user.id)
if bot_list:
bot_data = list()
for bot in bot_list:
user_info = get_user_info(bot)
# Change profile_image_url to get original resolution image.
user_info['profile_image_url'] = user_info['profile_image_url'].replace("_normal", "")
user_info['profile_image_url_https'] = user_info['profile_image_url_https'].replace("_normal", "")
bot_data.append(user_info)
context['bot_data'] = grouped(bot_data, 4)
else:
context['error'] = 'No bot found. Please add a bot.'
else:
context['error'] = 'You are not authenticated. Please login or register!'
return render(request, template_name, context)
Here is my template :
{% extends 'base/base.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-12">
{% if error %}
<div class="alert alert-danger">
<strong>Error! </strong> {{ error }}
</div>
{% endif %}
<ul class="nav nav-tabs" id="dashboard_tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="your_bot_tab" data-toggle="tab" href="#your_bots" role="tab" aria-controls="your_bots" aria-selected="true">Your Bots</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="your_bots" role="tabpanel" aria-labelledby="your_bot_tab">
{% if not error %}
{% for group in bot_data %}
<div class="row">
{% for bot in group %}
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="{{ bot.profile_image_url_https }}">
<div class="card-body">
<h5 class="card-title">#{{ bot.screen_name }}</h5>
Bot Dashboard
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Here is the Firefox browser inspect tool dump :
<html><head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/stylesheets/screen.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dashboard_drop" data-toggle="dropdown">
Dashboards
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/twitter/dashboard">Twitter</a>
<a class="dropdown-item" href="#">Instagram</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" id="dashboard_tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="your_bot_tab" data-toggle="tab" href="#your_bots" role="tab" aria-controls="your_bots" aria-selected="true">Your Bots</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="your_bots" role="tabpanel" aria-labelledby="your_bot_tab">
<div class="row">
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
<div class="card-body">
<h5 class="card-title">#twitter_handle</h5>
Bot Dashboard
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
<div class="card-body">
<h5 class="card-title">#twitter_handle</h5>
Bot Dashboard
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
<div class="card-body">
<h5 class="card-title">#twitter_handle</h5>
Bot Dashboard
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
<div class="card-body">
<h5 class="card-title">#twitter_handle</h5>
Bot Dashboard
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body></html>
Here is the Chrome inspect tool dump :
<html><head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/stylesheets/screen.css">
<style></style></head>
<body>
<header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dashboard_drop" data-toggle="dropdown">
Dashboards
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/twitter/dashboard">Twitter</a>
<a class="dropdown-item" href="#"></a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" id="dashboard_tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="your_bot_tab" data-toggle="tab" href="#your_bots" role="tab" aria-controls="your_bots" aria-selected="true">Your Bots</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="your_bots" role="tabpanel" aria-labelledby="your_bot_tab">
<div class="row">
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
<div class="card-body">
<h5 class="card-title">#twitter_handle</h5>
Bot Dashboard
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
<div class="card-body">
<h5 class="card-title">#twitter_handle</h5>
Bot Dashboard
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
<div class="card-body">
<h5 class="card-title">#twitter_handle</h5>
Bot Dashboard
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
<div class="card-body">
<h5 class="card-title">#twitter_handle</h5>
Bot Dashboard
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body></html>
I ran the HTML dumps through a difference checker and the only difference on Firefox only </header> is present while on chrome its this <style></style></head>

First you should clear cookies and cache, or reset Mozilla settings to default. If it is still not working, reinstall Mozilla Firefox.

By reinstalling Firefox, the image now loads. Please don't be dumb like me.

Bootstrap always open responsive navbar

I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Script won't execute in html file

I have a header created in index.html and a separate page in test.html. I'm able to use scripts on the index.html page but not on the test.html page I can't seem to find out why.
In the following file the console log logs the test statement and i'm able to see it in the browser.
Index.html:
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-animate.js"></script>
<!-- Angular Config/Routes -->
<script src="app/app.js"></script>
<script src="app/routes.js"></script>
<!-- Angular Controllers -->
<script src="app/controllers/userCtrl.js"></script>
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/emailCtrl.js"></script>
<script src="app/controllers/managementCtrl.js"></script>
<script> console.log('test'); </script>
<!-- Angular Services -->
<script src="app/services/userServices.js"></script>
<script src="app/services/authServices.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- Cascade Style Sheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<title>MEAN Stack App</title>
</head>
<body ng-app="userApp" ng-controller="mainCtrl as main" ng-show="main.loadme" ng-cloak>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="/">MEAN Stack</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/dashboard/{{ main.userid }}">Dashboard</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/mytests/{{ main.userid }}">My tests</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/comments">Comments</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/subscriptions">Subscriptions</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/recruitafriend">Invite friend and earn MONEY</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hello {{ main.username }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="#" ng-click="main.logout();">Logout</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/management">Management</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/orders">Orders</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/profile">Hello {{ main.username }}</a>
</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">About</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">Help</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/login">Login</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/register">Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header ng-show="main.home">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">David Acosta</div>
<div class="intro-heading">MongoDB, ExpressJS, AngularJS, NodeJS</div>
<a ng-show="!main.isLoggedIn" href="/login" class="page-scroll btn btn-xl">Sign In</a>
<a ng-show="!main.isLoggedIn" href="/register" class="page-scroll btn twitterbtn">Register</a>
<a ng-show="main.isLoggedIn" href="#" ng-click="main.logout();" class="page-scroll btn btn-xl">Logout</a>
<a ng-show="main.isLoggedIn && main.authorized" href="/management" class="page-scroll btn facebookbtn">View</a>
</div>
</div>
</header>
<section id="services">
<div class="container">
<div class="row">
<!-- Angular View -->
<div ng-view></div>
<!-- Angular View -->
</div>
</div>
</section>
<!-- Portfolio Grid Section -->
<section ng-show="main.home" id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About This Page</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="glyphicon glyphicon-film"></span>
<h4 class="service-heading">YouTube</h4>
<p class="text-muted">Ensure you check out the YouTube video series associated with this web page. Visit:
https://www.youtube.com/playlist?list=PL3vQyqzqjZ637sWpKvniMCxdqZhnMJC1d
</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-usd"></span>
<h4 class="service-heading">Facebook</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-save"></span>
<h4 class="service-heading">Github</h4>
<p class="text-muted">Ensure you check out the GitHub page associated with this web page. Visit:
https://github.com/gugui3z24
</p>
</div>
</div>
</div>
</section>
<footer ng-show="main.home">
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © David Acosta</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-linkedin"></i>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li>Privacy Policy
</li>
<li>Terms of Use
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- BootstrapJS Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button ng-hide="main.hideButton" type="button" ng-click="main.endSession();" class="close" data-dismiss="modal">×</button>
<!-- Modal Header -->
<h4 class="modal-title">{{ main.modalHeader }}</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>{{ main.modalBody }}</p>
<div ng-show="main.hideButton" class="dizzy-gillespie"></div>
</div>
<div class="modal-footer">
<!-- Modal 'Yes' & 'No' Buttons -->
<button type="button" ng-hide="main.hideButton" ng-click="main.renewSession();" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" ng-hide="main.hideButton" ng-click="main.endSession();" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- BootstrapJS Modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
The test.html won't execute the code within the script tags. But the h1 will show.
Test.html:
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>

If you do not use jquery, Angular uses jqlite. once view is loaded, than inspect it in chrome. You will not find script tag in view.Because Angular don't what to do with script tag hence removes it. When angular detects jquery, it will use jquery instead jqlite for dom manipulation and jquery treat the script tag as special.
< <script src="path/jquery.js"></script>
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>

ng-include not working for angularJS

I was trying to repeat what was done in angular template at https://www.coursera.org/learn/angular-js/supplement/aVtFp/exercise-instructions-angular-templates. However, something has gone wrong and I couldn't figured out what it is.
It just looks like
menu.html
<div class="container">
<div class="row row-content" ng-controller="MenuController ">
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<ul class="media-list">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
and index.html
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<ng-include src="'menu.html'"></ng-include>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion#food.net">
confusion#food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
They are in the same folder. And I am using "''".
Thanks for the help!

Try running it on a server. It should work. Use Brackets like the instructor is doing.
The reason why you're not getting anything loaded is because you are facing an XMLHttpRequest problem, your browser cannot load cross-origin requests.

JQuery selecting li for pagination

I am working on a pagination script and all is well apart from one small problem. I need to fire an action when the page number (li) is clicked.
The pagination is returned via ajax to a div called "result". However this div is burried amound several other divs deep - i think this may be the problem. How can fix?
Thanks
$('#result .pagination li').live('click', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});
The full output is below with the full pagination
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
<div class="navbar-header">
<button class="navbar-toggle" type="button"><span class="sr-only">Toggle navigation</span>
</button> <a class="navbar-brand" href="index.php">Title</a>
</div>
</nav>
<nav class="navbar-default navbar-static-side">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input class="form-control" placeholder="Search..." type="text">
</div>
<!-- /input-group -->
</li>
<li class="active">Dashboard
</li>
<li>Claims
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Claims</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
<div id="loading" style="float: right; display: none;">
<img src="images/loading.gif">
</div>
</div>
<div class="panel-body">
<div id="result">
<!-- DATABASE RESULTS GO HERE -->
<ul class="pagination" id="pg">
<li class="disabled">First
</li>
<li class="disabled">«
</li>
<li class="disabled"><a>1</a>
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>»
</li>
<li>Last
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using jQuery v1.10.2

You are using jQuery >= 1.9, so there is no .live() method
$(document).on('click', '#result .pagination li', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});

Categories

Resources