i am new one with angularJs so i saw many post how to make controller etc but in every controller we pass scope to get particular values which is defined in specific view which handles controller.i am sending my code that why i don't getting my views value using $scope when i am debuging so and want to get values $scope.LoginName
Error:- Undefined can'nt read property.
it's accessing $scope.loggedIn but not accessing login view values .
index.html
<body ng-controller="LoginController">
<div ng-switch="loggedIn">
<div ng-switch-when="false">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<b>Consumely</b>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right" data-ng-controller ="inventoryNavController">
<li data-ng-class="{'active':getClass('/Login')}">Login</li>
<li data-ng-class="{'active':getClass('/SignUp')}">SignUp</li>
</ul>
</div>
</div>
</div>
<div ng-view class="viewStyle"></div>
</div>
<div ng-switch-when="true">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<b>Consumely</b>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class=""><a ng-click='logout()' >Log Out</a></li>
<li>Send Invite</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-ng-class="{'active':getClass('/Stores')}">Stores</li>
</ul>
</div>
</div>
</div>
<div ng-view class="viewStyle"></div>
</div>
</div>
<!-- Controllers -->
<!-- login Controller -->
<script src="app/controllers/loginController.js"></script>
<!-- services -->
<!-- login service -->
<script src="app/services/loginService.js"></script>
</body>
LoginView.html
<div class="form-group">
<label for="login-Name" class="col-lg-3 form-label">User Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="login-Name" ng-model="LoginName" name="login-Name" placeholder="User Name"/>
</div>
</div>
<div class="form-group">
<label for="login-Password" class="col-lg-3 form-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="login-Password" ng-model="LoginPass" name="login-Password" placeholder="Password"/>
</div>
</div>
loginController.js
app.controller('LoginController', function ($rootScope, $scope, loginService, $location) {
$rootScope.loggedIn = false;
$scope.login = function() {
var user = {
"username" : $scope.LoginName,
"password" : $scope.LoginPass
}
};
});
Please kindly if any one know help me out.
Related
Im trying to get data from an API using ajax request. I did it but im not sure how to show the information to the client. I want to search by artist and show their songs. Here is my code and link to the api. Please help me!
https://rapidapi.com/brianiswu/api/genius?endpoint=apiendpoint_d2f41ea4-7d5c-4b2d-826a-807bffa7e78f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MusicApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MusicApp</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Lyrics</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row" style="margin-top:30px;">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Search</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<img class="thumbnail img-responsive" src="images/notes.jpg">
</div>
<div class="col-sm-8">
<input type="checkbox" class="form-check-input" id="sort">
<label class="form-check-label" for="sort">Sort</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="artist">Artist:</label>
<textarea class="form-control" rows="1" id="artist"></textarea>
</div>
</div>
</div>
</div>
<div class="panel-footer" style="height:55px;">
<button type="button" id="postComment" class="btn btn-primary pull-right publish"><span
class="glyphicon glyphicon-globe"></span> Search
</button>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Results</h3>
</div>
<ul class="list-group" style="min-height:241px;" id="contentList">
<li class="list-group-item" style="display:none" id="cloneMe">
<div class="row">
<div class="col-sm-2 col-xs-3">
<img src="images/notes.jpg" class="thumbnail img-responsive">
</div>
<div class="col-sm-7 col-xs-6">
<h4>Shakira</h4>
<p id="songName">some result </p>
<p id="lyricsLink">some result</p>
</div>
<div class="col-sm-3 col-xs-3">
<button type="button" class="btn btn-danger pull-right remove-post"><span
class="glyphicon glyphicon-remove"></span><span class="hidden-xs"> Delete</span>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";
$('#postComment').click(function(){
artistName=$('#artist').val();
console.log(artistName);
var settings = {
"async": true,
"crossDomain": true,
"url": "https://genius.p.rapidapi.com/search?q=" + artistName,
"method": "GET",
"headers": {
"x-rapidapi-host": "genius.p.rapidapi.com",
"x-rapidapi-key": "1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"
}
}
$.ajax(settings)
.done(function (response) {
console.log(response.response.hits);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
console.log(r.result.header_image_url);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('#songName').html(r.result.full_title);
miniMe.find('#lyricsLink').html(r.result.url);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.find('checkbox').click(function(){
})
miniMe.show();
$('#contentList').append(miniMe);
});
});
return false;
});
});
</script>
</html>
You can iterate through the response with using this as your ajax block;
$.ajax(settings)
.done(function (response) {
// sort the response alphabetically
response.response.hits.sort((a,b) => (a.result.full_title > b.result.full_title) ? 1 : (b.result.full_title > a.result.full_title) ? -1 : 0);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('p').html(r.result.full_title);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.show();
$('#contentList').append(miniMe);
});
});
You can see the working demo in codepen and you can look into this link if you want to learn about sort() function and how it works in JavaScript.
I have created a form modal using jQuery:
<ul class="loginbar pull-right">
<li class="hoverSelector">
<i class="fa fa-globe"></i>
Help
</li>
<li class="topbar-devider">
</li>
<li id="id1 ">
Register
</li>
<li class="topbar-devider">
</li>
<li>
<a>Login</a>
</li>
</ul>
Form code
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: #f4a742">Register a new account</h4>
</div>
<div class="modal-body">
<div class="container content">
<div class="row">
<div class="col-md-6 ">
<form class="reg-page" id="RegID">
<div class="form-group">
<div class="form-group internal">
<label>First Name</label> <input type="text" name="fname"
class="form-control margin-bottom-20">
</div>
</div>
<div class="form-group">
<div class="form-group internal">
<label>Last Name</label> <input type="text" name="lname"
class="form-control margin-bottom-20">
</div>
</div>
<div class="form-group">
<div class="form-group internal">
<label>Email Address <span class="color-red">*</span></label>
<input type="text" name="email"
class="form-control margin-bottom-20">
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 checkbox">
<label> <input type="checkbox"> I read <a
href="page_terms.html" class="color-green">Terms and
Conditions</a>
</label>
</div>
<div class="col-lg-6 text-right">
<button class="btn-u" type="submit">Register</button>
</div>
</div>
</form>
</div>
</div>
</div> <!-- end content -->
</div> <!-- end modal-body -->
</div> <!-- end modal-content -->
</div> <!-- end modal-dialog -->
</div> <!-- end modal -->
</div> <!-- end container -->
<script>
$( "#id1" ).click(function() {
$( "#myModal" ).click();
});
</script>
It seems everything is okay for me, initial it was work but suddenly it is giving trouble, so what would be the mistake.
When ever I have click on register it is not pop-up the form, could you please let me know what mistake I have done.
$( "#id1" ).click(function(ev) {
ev.stopImmediatePropagation(); // sometimes click event fires twice in jQuery you can prevent it by this method.
$( "#myModal" ).modal(); // you should use native function of Bootstrap.
});
You dont need to add any jquery or js for that at first place.
So you need to add data-target attribute to target your myModal,
<li id="id1 "> Register</li>
So you markup should look like,
<ul class="loginbar pull-right">
<li class="hoverSelector"><i class="fa fa-globe"></i>
Help</li>
<li class="topbar-devider"></li>
<li id="id1 "> Register</li>
<li class="topbar-devider"></li>
<li><a>Login</a></li>
</ul>
Alternate to your js requirement you could do it on click of a tag,
$('ul.loginbar').on('click', 'li#id1 > a', function(){
$('div#myModal').modal('show');
});
I have some html like this (I won't even bother to post the JS since it's an overcomplicated mess):
<html>
<body>
<div class="container">
<h3 class="text-center">Administration</h3>
</div>
<div class="form-inline text-center">
<div class="form-group">
<label>Managing Business</label>
<select ng-options="business.name for business in businesses" ng-model="managingBusiness" class="form-control restaurant-select"></select>
<label>Program</label>
<select ng-options="program.description for program in selectablePrograms" ng-model="managingProgram" class="form-control restaurant-select"></select>
</div>
</div>
<hr/>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{ active: isActive('/admin/overview')}">Overview</li>
<li ng-class="{ active: isActive('/admin/generators')}">Generators</li>
</ul>
</div>
<div class="col-md-10">
<div ng-include="'views/partials/admin/overview.html'" ng-show="isActive('/admin/overview')"></div>
<div ng-include="'views/partials/admin/generators.html'" ng-show="isActive('/admin/generators')"></div>
</div>
</body>
</html>
And the only js that matters is this:
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
And the issue is that when the user selects a tab to change (overview/generators) than the entire page is reloaded. This is bad because I am trying to keep the state of the selected business at the top.
What am I doing wrong? Why is the page reloading without me running a reload command?
I have this Vue instance:
var vm = new Vue({
el: '#app',
data: {
user: {
email: '',
password: '',
passwordconfirm: '',
bars: {},
authentication_token: '',
id: 0
}
},
components: {
dashboard: dashboard
},
events: {
'onLoginSuccesfull': function(user) {
// do stuff with user obj
this.$broadcast('onUserLoggedIn');
}
}
}
It has a 'dashboard' component:
var dashboard = Vue.extend({
template: '#dashboard',
data: function() {
return {
currentPage: 'main'
}
},
components: {
'dashboard-mainpage': dashboardmainpage
}
events: {
'onUserLoggedIn': function() {
alert('I should be firing bu I am not!');
}
}
});
Vue.component('dashboard', dashboard);
The 'dashboard' has a 'dashboard-mainpage' component:
var dashboardmainpage = Vue.extend({
template: '#dashboard-mainpage',
methods: {
loadData: function() {
this.$http.get('/dashboard/main.json', {
authenticity_token: window._token
}).then(function(response) {
var data = JSON.parse(response.body);
console.log(data);
}, function(response) {
console.log(response);
this.$dispatch("onRequestUnauthorized");
});
}
},
events: {
'onUserLoggedIn': function() {
alert('I should be firing as well but I am not!');
this.loadData();
}
}
});
The problem is that when the 'onLoginSuccesfull' event is triggered on the main Vue instance, the subsequently broadcasted 'onUserLoggedIn' on the 1st and 2nd level descendant are not triggered, when calling 'this.$broadcast('onUserLoggedIn');'.
I know that event callbacks must return true to keep propagating down the chain but the first event callback (on 'dashboard') is not even triggered.
What am I missing?
Thanks!
===== EDIT =====
Main app:
<div id="app">
<dashboard v-if="currentStep == 'dashboard'" v-bind:appname="appName" v-bind:dashboard-vm="dashboard" v-bind:user="user" v-bind:bar.sync="bar"></dashboard>
</div>
Dashboard template:
<template id="dashboard">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<span>The Bar</span>
</div>
<div class="clearfix"></div>
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
{{ user.email }}
<div class="menu_section">
<ul class="nav side-menu">
<li><a v-on:click="createNewBar"><i class="fa fa-plus"></i> Create new bar</a>
</li>
<li><a v-on:click="showDashboard"><i class="fa fa-bar-chart"></i> Dashboard</a>
</li>
<li><a v-on:click="showBars"><i class="fa fa-bars"></i> Bars</a>
</li>
<li><a><i class="fa fa-tachometer"></i> Settings <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a v-on:click="showProfile">Profile</a></li>
<li><a v-on:click="showPaymentsPlans">Plan & payments</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a v-on:click="$parent.logoutUser" style="cursor: pointer">Log out</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<dashboard-mainpage v-if='currentPage == "main"' v-bind:vm="dashboardVm"></dashboard-mainpage>
</div>
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
© <%= Time.now.year %> The Bar
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
</template>
Dashboard-mainpage:
<template id="dashboard-mainpage">
<div class="col-md-12 x_title">
<div>
<div class="btn-group pull-right">
<button type="button" class="btn btn-info"><span class="fa fa-calendar" aria-hidden="true"></span> Today</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
Today
</li>
<li>
Yesterday
</li>
<li>
Last 7 days
</li>
<li>
Last 30 days
</li>
<li>
Last year
</li>
<li>
All
</li>
</ul>
</div>
<span class="pull-right">Filter:</span>
</div>
</div>
<!-- top tiles -->
<div class="row top_tiles">
<div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="tile-stats">
<div class="icon"><i class="fa fa-bars"></i></div>
<div class="count">{{ vm.totalBars }}</div>
<h3>Total bars</h3>
<p>All you active bars</p>
</div>
</div>
<div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="tile-stats">
<div class="icon"><i class="fa fa-eye"></i></div>
<div class="count">{{ vm.totalViews }}</div>
<h3>Total views</h3>
<p>Total number of bar views</p>
</div>
</div>
<div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="tile-stats">
<div class="icon"><i class="fa fa-mouse-pointer"></i></div>
<div class="count">{{ vm.totalClicks }}</div>
<h3>Total clicks</h3>
<p>Total number of clicks</p>
</div>
</div>
</div>
<!-- /top tiles -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="dashboard_graph">
<div class="row x_title">
<div class="col-md-6">
<h3>Statistics</h3>
</div>
<div class="col-md-6">
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_title">
<h2>Sub title</h2>
<div class="clearfix"></div>
</div>
<p>stats here</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<br />
</template>
Ok. For anyone who is going to wander onto this "issue". Here's the fix.
I used 'v-if' attributes on the children that were listening to the 'onUserLoggedIn' event. The docs for 'v-if' say:
Conditionally render the element based on the truthy-ness of the
expression value. The element and its contained data bindings /
components are destroyed and re-constructed during toggles. If the
element is a element, its content will be extracted as the
conditional block.
So, when 'v-if = "something false"' on some child component it practically does not exist and thus is not able to do or respond to anything, including events.
When using 'v-show' instead of 'v-if' to conditionally toggle certain components, the component stays "alive" and will be able to respond.
Some stuff going on:
If you define a component in another component (as you are doing in the app component, there is no need to define this component globally (https://vuejs.org/guide/components.html#Registration-Sugar).
If a component is not "called" inside another component's template, you never establish a relation parent-children between them. I can't see the template of the App component, so I assume there is none.
There is some bits of code missing, but I assume that onLoginSuccesfull never gets actually called on the App component to begin with!
As you say, if you want an event to propagate after it's been triggered for the first time, this triggering function must return true.
Here's a working jsfiddle with the basics covered: https://jsfiddle.net/e85ekxk1/2/
Good luck!
I want to be able view my pane when I click on the link "Forgot your password?".
Right now what I have done is that I've created a tab for the specific pane. When I click on the tab or the link, I am able to view the pane. I created a JS function that will "click" the tab and display the pane when I click the "Forgot your password?" link.
I do not want the tab to be displayed. So I want to view the pane only when clicking the "Forgot your password?" link. I think I can achieve this by hiding the tab but the logic still exists. I believe I can also achieve this without using the tab, however I am not sure how to do this.
JSFIDDLE:
http://jsfiddle.net/essnm8bd/1/
JS:
$(document).ready(function() {
var join_btn = document.getElementById("join-btn"),
signin_btn = document.getElementById("signin-btn"),
reset_password_link = document.getElementsByClassName("reset-password-link")[0];
join_btn.addEventListener("click", joinSelected);
signin_btn.addEventListener("click", signInSelected);
reset_password_link.addEventListener("click", resetPasswordSelected);
function joinSelected() {
$('[href="#signup-pane"]').trigger('click');
}
function signInSelected() {
$('[href="#signin-pane"]').trigger('click');
}
function resetPasswordSelected() {
$('[href="#reset-password-pane"]').trigger('click');
}
});
HTML:
<nav class="navbar nav-default navbar-fixed-top">
<div class="container">
<ul class="navbar-left">
<li><a>LOGO</a></li>
</ul>
<ul class="logged-out-nav nav navbar-nav navbar-right">
<li><a id="join-btn" data-toggle="modal" data-target="#modal" class="btn">Join Spark</a></li>
<li><a id="signin-btn" data-toggle="modal" data-target="#modal" class="btn">Sign in</a></li>
</ul>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="signin-tab">Sign in</li>
<li role="presentation" id="new-account-tab">New Account</li>
<li role="presentation" id="reset-password-tab">test</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in" id="signup-pane">
<form class="signup-form" method="post">
{% csrf_token %}
<input id="signup-firstname" type="text" placeholder="First Name">
<input id="signup-lastname" type="text" placeholder="Last Name">
<input id="signup-email" type="email" placeholder="Email">
<input id="signup-password" placeholder="Password">
<input id="signup-confirm-password" placeholder="Confirm Password">
</form>
</div>
<div role="tabpanel" class="tab-pane fade in" id="signin-pane">
<form class="signin-form" method="post">
{% csrf_token %}
<input id="signin-email" type="email" placeholder="Email">
<input id="signin-password" type="password" placeholder="Password">
</form>
<p>
<a href="#reset-password-pane" class="reset-password-link">
Forgot your password?
</a>
</p>
</div>
<div role="tabpanel" class="tab-pane fade in" id="reset-password-pane">
<input id="forgot-email" type="email" placeholder="Email">
</div>
</div>
</div>
</div>
</div>
</div>
You can show/hide the tab using bootstrap X.bs.tab events:
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
$("#reset-password-pane, #reset-password-tab").show();
}).not('#reset-password-tab a[data-toggle="tab"]').on('show.bs.tab', function (e) {
$("#reset-password-pane, #reset-password-tab").hide();
});
JSFiddle
Or you can wrap your form into a div, make another form inside another div and toggle these divs on click:
<div role="tabpanel" class="tab-pane fade in" id="signin-pane">
<div class="login-tab-container">
<form>
... login fields ...
</form>
</div>
<div class="login-tab-container" style="display:none;">
<form>
... reset password field ...
</form>
</div>
<p>
Forgot your password?
</p>
</div>
Script:
$(".reset-password-link").click( function() {
$('.login-tab-container').slideToggle(200);
$.trim($(this).text()) === 'Close' ? $(this).text('Forgot your password?') : $(this).text('Close')
});
JSFiddle