Unable to execute controller function using angular.js - javascript

My controller function is not called at all using Angular.js.I am explaining my code below.
admin.html:
<head ng-app="adminModule">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
</head>
<body style="background-image: url('images/resource/login-bg.jpg')" ng-controller="admincontroller">
<div class="login-sec">
<div class="login-sec">
<div class="login">
<div class="login-form">
<span><img src="images/logo.png" alt="" /></span>
<h5><strong>Identify</strong> Yourself</h5>
<center ng-hide="lStatus">{{loginStatus}}</center>
<form action="#" method="post">
<fieldset><input type="text" placeholder="Username" class="logininputdiv" /><i class="fa fa-user"></i></fieldset>
<fieldset><input type="password" placeholder="Password" class="logininputdiv" /><i class="fa fa-unlock-alt"></i></fieldset>
<label><input type="checkbox" />Remember me</label><button type="button" class="blue" ng-click="adminLogin();">LOG IN</button>
</form>
</div>
<span>Copyright © 2015 Odia Doctor</span>
</div>
</div><!-- Log in Sec -->
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/adminlogincontroller.js" type="text/javascript"></script>
</body>
</html>
adminlogincontroller.js:
var app = angular.module('adminModule',[]);
app.controller('admincontroller',['$scope','$http',function($scope,$http){
console.log('hello controller');
$scope.lStatus=false;
}])
I need here when page will be load this controller function will called.But nothing is happening like this.Please help me to resolve this issue.

It looks like you define your ng-app on <head> instead of <html>.
<head ng-app="adminModule">
So it result that your controller is not in the scope of angular :)
</head>
<body style="background-image: url('images/resource/login-bg.jpg')" ng-controller="admincontroller">
You should so declare it on <html>
<html ng-app="adminModule">
<head>
...
</head>
<body ng-controller="...">
</body>
</html>

Related

My js files are not responding to new edits

I'm updating a web application that I built. Changes that I make to my HTML and CSS display on the DOM. However, when I try to make changes in my JS files, they don't show on the DOM. I tested this using a console.log and it still didn't show in the chrome dev console. I'm using import/export rather than script tags to connect my js files. If needed, I'm happy to upload my code. Thank you in advance.
Here's the HTML. I used Webpack to bundle the code. It's connected via the 'bundle.js' script.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#300&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Libre+Franklin:wght#300&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<title>remoteUp</title>
<link rel="icon" type="image/ico" href="/dist/img/favicon/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header">
<img src="/remotetechjobs/dist/img/logo.png">
<div class="header_text">
<h1 class="header_name">remoteUp</h1>
<h2 class="header_subname">work in tech from anywhere</h2>
</div>
<form class="search">
<input class="search__field" placeholder="Search thousands of jobs ..." />
</form>
<div class="likes">
<h2 class="likes_heading"><i>Liked Jobs</i></h2>
<div class="likes__field">
<svg class="likes__icon"><use href="img/icons.svg#icon-heart"></use></svg>
</div>
<div class="likes__panel"><ul class="likes__list"></ul></div>
</div>
</header>
<div class="results">
<br />
<ul class="results__list"></ul>
<div class="results__pages"></div>
</div>
<div class="job"></div>
</div>
<footer>
<div class="copyright">Copyright 2020 © Dylan Yudis <br> Powered by Github Jobs</div>
<div class="icon-bar">
<i class="fa fa-github"></i> <i class="fa fa-linkedin"></i>
<i class="fa fa-google"></i>
</div>
</footer>
<script nomodule="" src="https://unpkg.com/ionicons#5.1.2/dist/ionicons/ionicons.js"></script>
<script src="js/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.10"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- Auto typing in search bar -->
<script>
const options = {
strings:
[
'^750software engineer',
'^1000junior dev',
'^1000QA',
'^1000C#',
'^1000data engineer',
'^1000react native',
'^1000frontend dev'
],
typeSpeed: 60,
backSpeed: 60,
loop: true,
};
const typed = new Typed('.search__field', options);
/* document.querySelector(".search__field").addEventListener("click", function() {
typed[0].stop(true);
});*/
</script>
</body>
</html>`

Convert the html template into Django

I am currently learning django, and at the moment I want to convert this page https://colorlib.com/etc/lf/Login_v6/index.html into django. I have tried heaps of times, still can't make everything right. The Button textures, label animations and fonts are completely not working. Let me show you my work structure below.
My problem is about using css and js under static/vendor fold. Seems the way I used got a bit problem, I have also attached my code for invoking the css and js under vendor.
Thanks for any help.
MyFirstDjangoWeb
--project
--setting.py
--urls.py
--wsgi.py
--_init_.py
--project_app
--template
--myHtml.html
--migration
--0001_initial.py
--_init_.py
--__init_.py
--admin.py
--apps.py
--models.py
--test.py
--urls.py
--views.py
--static
--css
--images
--js
--vendor
manage.py
<!DOCTYPE html>
<html lang="en">
<head>
<title>QC-Tool</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="static/images/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/css/util.css">
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<!--===============================================================================================-->
</head>
<body>
<center>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-85 p-b-20">
<form class="login100-form validate-form">
<span class="login100-form-avatar">
<img src="static/images/my_Logo.png" alt="AVATAR">
</span>
<span class="login100-form-title p-b-0">
QC Tool
</span>
<form action="/msggate/" method="post">
<div class="wrap-input100 validate-input m-t-85 m-b-35" data-validate = "Enter username">
<input class="input100" type="text" name="username">
<span class="focus-input100" data-placeholder="Username"></span>
</div>
<div class="wrap-input100 validate-input m-b-50" data-validate="Enter password">
<input class="input100" type="password" name="pass">
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div class="container-login100-form-btn">
<form action='actionUrl' method='GET'>
<button class="login100-form-btn">
Login
</button>
</form>
</div>
</form>
<ul class="login-more p-t-190">
<li class="m-b-8">
<span class="txt1">
Forgot
</span>
<a href="#" class="txt2">
Username / Password?
</a>
</li>
<li>
<span class="txt1">
More options?
</span>
<a href="#" class="txt2">
Click here
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
</center>
{% load static %}
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="static/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/bootstrap/js/popper.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/daterangepicker/moment.min.js"></script>
<script src="static/vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="static/js/main.js"></script>
</body>
</html>
Have you defined static STATIC_URL in your setting.py? If not then do this in
setting.py
STATIC_URL = '/static/'
And store your static file in folder name static inside your app directory i.e. project/project_app/static
In your template myHtml.html , use the static template tag to build the URL like this:
<link rel="stylesheet" type="text/css" href="{% static '/vendor/bootstrap/css/bootstrap.min.css' %}">
<script src="{% static '/js/main.js' %}"></script>
Do this in every link and script.

Basic Full Page setup is not working?

I am using fullPage.js for my website. I went to test it and it isn't functioning like it is supposed to and creating a full height page. I tried changing the scripts and links around, as well as using different jQuery Libraries. All the sources are 100% correct. Any leads or suggestions? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap / CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
</head>
<body>
<div id="fullpage"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
library :: https://cdnjs.com/libraries/fullPage.js
so you have to change the src attribute of script file .
since you are using src of full page is jquery.fullPage.js but that is not valid .
use https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js in src attribute .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css" />
</head>
<body>
<div id="wrapper"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
Change id="wrapper" to id="fullpage"
Default structure looks like below:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

Json and wordpress and jquerymobile app

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ya Rab</title>
<!--styles and scripts-->
<link rel="stylesheet" href="themes/Zahran-Flat-Theme.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" href="mystyles.css" />
<!--styles and scripts-->
</head>
<body>
<!--page-->
<div id="blogpost" data-role="page" data-theme="a">
<!--Header--><div data-role="header" data-theme="a" data-position="fixed">
<h1>ZahranPress</h1>
</div><!--Header-->
<div data-role="content" id="mypost">
</div><!--Content-->
<script src="http://testzahran.marocwebs.com/?json=recentstories&callback=ListPosts"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ya Rab</title>
<!--styles and scripts-->
<link rel="stylesheet" href="themes/Zahran-Flat-Theme.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" href="mystyles.css" />
<!--styles and scripts-->
</head>
<body>
<!--page-->
<div id="blogpost" data-role="page" data-theme="a">
<!--Header--><div data-role="header" data-theme="a" data-position="fixed">
<h1>ZahranPress</h1>
</div><!--Header-->
<div data-role="content" id="mypost">
</div><!--Content-->
<script src="http://testzahran.marocwebs.com/?json=recentstories&callback=ListPosts"></script>
</body>
</html>
Hi
I was trying to develop wordpress app using jquery and json for this site ZahranPress and it didn't work and I checked it many times. I coded it according to this cool tutorial Jquery mobile app Here's the html code and javascript. hope anybody help.

Submit form with javascript external file

i have this login page:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/loader.js"></script>
</head>
<body>
<div id ="header_login"></div>
<div id ="fdm_intro"></div>
<div id="footer"></div>
</body>
</html>
and the fallowing header:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script type="text/javascript" src="login.js"></script>
<script src="login.js"></script>
</head>
<body>
<div id ="header">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"> Flight Data Monitor</a>
<form name="login" action="" method="GET" class="navbar-form pull-right">
<input type="text" class="span2" placeholder="Username" name="username">
<input type="text" class="span2" placeholder="Password" name="password">
<button type="submit" class="btn" onclick="login(this.form);" >Entrar</button>
</form>
</div>
</div>
</div>
</body>
</html>
PROBLEM: i cannot make an alert in login.js. it seems like my form does not call the javascript.... any help??
You forget to add the Jquery reference in your html page. Try this code.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="login.js"></script>
</head>
<body>
<div id ="header">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"> Flight Data Monitor</a>
<form name="login" action="" method="GET" class="navbar-form pull-right">
<input type="text" class="span2" placeholder="Username" name="username">
<input type="text" class="span2" placeholder="Password" name="password">
<button type="submit" class="btn" onclick="login(this.form);" >Entrar</button>
</form>
</div>
</div>
</div>
</body>
</html>
Login.js:
$(document).ready(function() {
alert();
});

Categories