I am working on a Laravel project and there is a login modal inside the project which logs the user in but if the user enters invalid data then I want the modal to pop up automatically with the error message.
I am using this script code but it is not working.No J code is working on the header.blade.php file
<script type="text/javascript">
#if (count($errors) > 0)
$('#login-modal').modal('show');
#endif
</script>
My header.blade.php File is:
<header id="header" class="header-scroll top-header headrom">
<!-- .navbar -->
<nav class="navbar navbar-dark">
<div class="container tog">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">☰</button>
<a class="navbar-brand" href="{{url('/')}}"> <img class="img-rounded" src="images/logo.png" alt=""> </a>
<ul class="nav navbar-nav" id="location-top">
<li class="nav-item dropdown" id="nav-float">
<a style="color: white;" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cutlery" aria-hidden="true"></i> FEEL LIKE EATING
</a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="food_results.html"><img src="images/bbq.png"> BB.Q</a>
<a class="dropdown-item" href="map_results.html"><img src="images/beef.png"> Beef Roast</a>
<a class="dropdown-item" href="food_results.html"><img src="images/carrot.png"> Carrot Juice</a>
<a class="dropdown-item" href="map_results.html"><img src="images/cheese-burger.png"> Cheese Burger</a>
<a class="dropdown-item" href="food_results.html"><img src="images/turkey.png"> Chicken Roast</a>
<a class="dropdown-item" href="map_results.html"><img src="images/noodles.png"> Chinese Soup</a>
<a class="dropdown-item" href="food_results.html"><img src="images/frappe.png"> Cold Coffee</a>
</div>
</li>
<li class="nav-item dropdown" id="nav-float-2"> <a style="color: white;" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-map-marker" aria-hidden="true"></i> CHOOSE LOCATION </a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="food_results.html">Location 1</a><a class="dropdown-item" href="map_results.html">Location 2</a>
<a class="dropdown-item" href="food_results.html">Location 3</a>
<a class="dropdown-item" href="map_results.html">Location 4</a>
<a class="dropdown-item" href="food_results.html">Location 5</a>
<a class="dropdown-item" href="map_results.html">Location 6</a>
<a class="dropdown-item" href="food_results.html">Location 7</a>
<a class="dropdown-item" href="map_results.html">Location 8</a>
</div>
</li>
<li class="nav-item dropdown" id="nav-float-2"> <a style="color: white;" class="nav-link dropdown-toggle btn btn-danger warning-btn" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars" aria-hidden="true"></i> Menu </a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="{{url('/chefs')}}"><img src="images/chef.png"> Chefs</a>
<a class="dropdown-item" href="#"><img src="images/about-us.png"> About Us</a>
<a class="dropdown-item" href="#"><img src="images/letter.png"> Contact Us</a>
<a class="dropdown-item" href="#"><img src="images/question.png"> FAQ's</a>
</div>
</li>
</ul>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav float-lg-right">
#guest
<li class="nav-item"> <a class="nav-link active" data-toggle="modal" data-target="#login-modal" href="#"><i class="fa fa-user-o" aria-hidden="true"></i>LOGIN / REGISTER</a> </li>
<li class="nav-item"> <a style="color: white;" class="nav-link btn btn-danger" href="#">REGISTER AS A CHEF</a> </li>
#else
<li class="dropdown">
<a style="border-radius: 20px;" href="#" class="dropdown-toggle btn btn-danger" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="drop-outside"><a href="/customer/home">
<i class="fa fa-user" aria-hidden="true"></i>
View Profile
</a>
</li>
<li class="drop-outside">
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="fa fa-sign-out" aria-hidden="true"></i>
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<!-- /.navbar -->
</header>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<img class="img-circle center-block" id="img_logo" src="images/circle-logo.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="fa fa-times fa-2x" aria-hidden="true"></span>
</button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Login Form -->
<form id="login-form" method="POST" action="{{ route('login') }}">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="fa fa-chevron-right"></div>
<span id="text-login-msg">Login to Continue..</span>
</div>
<br>
{{ csrf_field() }}
<input id="login_username" name="email" class="form-control" type="email" placeholder="Email" required>
<input id="login_password" name="password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<br>
#if ($errors->has('email'))
<script>
$(window).on('load',function(){
$('#login-modal').modal('show');
});
</script>
<span class="help-block">
<strong class="text-danger">{{ $errors->first('email') }}</strong>
</span>
#endif
#if ($errors->has('password')){
<script>
$(window).on('load',function(){
$('#login-modal').modal('show');
});
</script>
<span class="help-block">
<strong class="text-danger">{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block login-btn">Login</button>
</div>
<div><p style="text-align: center; font-weight: bold; padding-top: 15px;">OR</p></div>
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link pull-right">Register</button>
</div>
</div>
</form>
<!-- End # Login Form -->
<!-- Begin | Lost Password Form -->
<form id="lost-form" style="display:none;">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="fa fa-chevron-right"></div>
<span id="text-lost-msg">Enter your email</span>
</div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link pull-right">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form -->
<!-- Begin | Register Form -->
<form id="register-form" style="display:none;" method="POST" action="{{ route('register') }}">
{{ csrf_field() }}
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="fa fa-chevron-right"></div>
<span id="text-register-msg">Register an account.</span>
</div>
<input id="name" name="name" class="form-control" type="text" placeholder="Username" required>
<input id="email" class="form-control" name="email" type="email" placeholder="E-Mail" required>
<input id="password" class="form-control" name="password"type="password" placeholder="Password" required>
<input id="password-confirm" class="form-control" name="password_confirmation" type="password" placeholder="Confirm Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link pull-right">Log In</button>
</div>
</div>
</form>
<!-- End | Register Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
<!-- END # MODAL LOGIN -->
<script type="text/javascript">
#if (count($errors) > 0)
$('#login-modal').modal('show');
alert("Hello");
#endif
</script>
I am new to travel and I don't know what's wrong.Any help will be appreciated.
Assuming your JavaScript and jQuery is Correct and that you have Bootstrap JS installed.
You can do the follow which will run the script if any errors are detected
<script>
#if ($errors->any())
$('#exampleModal').modal('show');
#endif
</script>
Related
I have used two dropdown from mdbootstrap https://mdbootstrap.com/docs/jquery/components/dropdowns/
But both the dropdown has same dropdown items why so? In console -> source I am able to see different options but while displaying it is not shown why so? In below screenshots you can see dropdown items for both are same why is this happening? I am not able to debug this because in console -> source also it show shopping, travel etc but it is not displaying in dropdown why so?
code:
import React from "react";
import "./transaction.css";
const Transaction = () => {
return (
<div className="transactionContainer">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Transaction Information</strong>
</h5>
<div class="card">
<div class="card-body px-lg-5 pt-0">
<form class="text-center" style={{ color: "#757575" }} action="#!">
<div class="md-form">
<input type="text" id="amount" class="form-control" />
<label for="amount">Amount</label>
</div>
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Payment Method
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Cash
</a>
<a class="dropdown-item" href="#">
Debit/Credit Card
</a>
<a class="dropdown-item" href="#">
Net Banking
</a>
</div>
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Category
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Shopping
</a>
<a class="dropdown-item" href="#">
Travel
</a>
<a class="dropdown-item" href="#">
Entertainment
</a>
</div>
<button
class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
type="submit"
>
Add transaction
</button>
</form>
</div>
</div>
</div>
);
};
export default Transaction;
Screenshots:
Each dropdown needs to be wrapped inside a div with class of dropdown like this:
<div className="dropdown">
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Payment Method
</button>
<div id="menu1" class="dropdown-menu">
<a class="dropdown-item" href="#">
Cash
</a>
<a class="dropdown-item" href="#">
Debit/Credit Card
</a>
<a class="dropdown-item" href="#">
Net Banking
</a>
</div>
</div>
i have 2 dropdown on 1 page, 1 for logout and 1 for chart. the problem is whatever button i pressed dropdown logout always pop up. How do i separate this 2 dropdown button?
my chart
<button class="btn btn-secondary dropdown-toggle" type="button" id="chartDropdown" onclick="dropdownChart()">
Chart
</button>
<div class="dropdown-menu dropdown-menu-right" style="width:400px;" id="dropdownShow" aria-labelledby="chartDropdown">
<form class="px-2 py-2" action="{{ url('purchase') }}" method="post">
{{csrf_field()}}
<div id="items"></div>
<div class="row mx-1 px-2">
<input type="text" name="fromE" value="#" id="fromE">
<input type="text" name="mode" value="add">
<input type="text" name="total" value="" id="total">
<button type='submit' class="btn btn-primary">Purchase</button>
</div>
</form>
</div>
my logout button
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdown()">
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" id="dropdownShow" aria-labelledby="navbarDropdownMenuLink">
<a class="nav-link " href="{{ route('logout') }}">Logout</a>
</div>
</li>
</ul>
Your two dropdown buttons have the same id.
Give a different ID to one of your button like id="dropdownShowChart" for the Chart button and id="dropdownShowLogout" the other one.
Am working on Single Page Application and am trying to include an HTML page in another HTML page, the page to be included has a controller which has an API to display data from another platform.
When I access my page (index.html) in the browser I get "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9002' is therefore not allowed access. The response had HTTP status code 401". The CORS is already handled in the accessed platform because I can display data from the same platform by using ng-view but I get that error when using ng-include.
My index.html has two parts, one part display the page by ng-view which is dynamic and the other I want to ng-include for the page that won't be changing.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="./images/favicon.ico"/>
<title>{{ 'label.heading.amala' | translate }}</title>
<style>[data-ng-cloak] {
display: none !important;
}</style>
<link href="styles/styles.css" rel="stylesheet"/>
</head>
<body class="preview whitebg" id="top" data-spy="scroll" data-target=".subnav" data-offset="80"
data-ng-controller="MainController">
<!--Loader -->
<div id="loaderWrapper" data-ng-hide="domReady" style="position: absolute; height: 100%; width: 100%; top: 0;">
<div id="loader" style="margin: 175px auto">
<img src="./images/logo.png" alt="Amala" style="min-width: 50px; width: 15%; margin: 0 auto"
class="img-responsive">
<img src="images/small-loader.gif" style="margin: 10px auto" class="img-responsive">
</div>
</div>
<div data-ng-hide="!domReady" data-ng-cloak>
<!-- Login Form -->
<div class="container" style="margin-top:10vh;" data-ng-hide="currentSession.user != null" data-ng-controller="LoginFormController">
<div class = "row">
<div class = "col-xs-12">
<div id = "head">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-right ">
{{ 'label.input.changelanguage' | translate }}
<div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-default btn-xs" uib-dropdown-toggle ng-disabled="disabled">
{{optlang.name}} <span class="caret"></span>
</button>
<ul class="lang-dropdown" uib-dropdown-menu>
<li ng-repeat="lang in langs">
<a href ng-click="changeLang(lang, $event)">{{lang.name}}</a>
</li>
</ul>
</div>
</div>
<div ng-show="resetPassword">
<form class="form-inline pull-right" role="form">
<label><strong>{{ 'label.message.password.expired' | translate }}</strong></label>
<div class="form-group">
<input type="password" data-ng-model="passwordDetails.password"
placeholder="{{ 'label.input.password' | translate }}" class="input-sm form-control"
required
id="password">
</div>
<div class="form-group">
<input type="password" data-ng-model="passwordDetails.repeatPassword"
placeholder="{{ 'label.input.repeatpassword' | translate }}"
class="input-sm form-control"
required id="repeatPassword">
</div>
<button class="btn btn-success" type="submit" data-ng-click="updatePassword()"
id="updatepassword-button">{{ 'label.button.resetPassword' | translate }}
</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4 text-center" id = "image">
<img src="images/logo.png" alt="Amala" style="width:80%; margin:auto;"
class=" text-center img-responsive"/>
</div>
</div>
<div class="row">
<div data-ng-form="loginForm">
<div class="row" ng-hide="resetPassword">
<div id="myform">
<div id="login">
<form>
<p id = "separator">
<input type="text" name="username"
ng-model="loginCredentials.username"
placeholder="{{ 'label.input.username' | translate |lowercase }}"
required/>
</p>
<p id = "separator">
<input type="password" name="password"
ng-model="loginCredentials.password" autocomplete="new-password"
placeholder="{{ 'label.input.password' | translate | lowercase }}"
required/>
</p>
<button class="btn btn-block btn-primary" type="submit" data-ng-show="!load" data-ng-click="login()"
id="login-button">
{{'label.button.signin' | translate }}
</button>
<button class="btn btn-block btn-primary" type="submit" data-ng-show="load">
<img data-ng-src="images/ring.svg" alt=""> <b>loading...</b>
</button>
</form>
<div class="alert alert-danger" ng-show="authenticationFailed" id = "errorMessage">
{{ authenticationErrorMessage | translate }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5" style="margin-top: 1%" ng-init="myVar = 'https://amala.co.tz'">
<p style="font-family: Georgia; font-size: 50px;">Lets grow together!</p>
<p style="font-family: Berlin Sans FB; font-size: 25px;">
Rapid growth in technology is widening development opportunities in the World. <a ng-href="{{myVar}}" target="_blank">Amala</a> is designed to increase production in financial services organisations in terms of time, money and quality management.
</p>
</div>
</div>
<div id = "footer">
<font color="#4390df">Powered by Mifos</font>
</div>
</div>
<!-- Navbar -->
<div ng-class="{fullscreen:true ,blockui:blockUI==true}" id="main" data-ng-hide="currentSession.user == null">
<div class="loading-widget-div" data-ng-show="blockUI">
<!-- TODO : insert loader here-->
<span class="centerloader">
<img src="images/833.svg" class="img-responsive">
</span>
<!--<div style="margin: 175px auto">
</div>-->
</div>
<div id="mifos-reskin-ui-container">
<div id="mifos-reskin-header-nav" ng-include="'views/_topnavbar.html'"></div>
<div id="mifos-reskin-body-container" style="background-color: #ebeff1">
<nav id="mifos-reskin-side-nav" ng-scrollbar>
<div class="left-nav">
<ul>
<li>
<a class="black" href="#/help">
<i class="fa fa-keyboard-o"></i>
<span>{{'label.anchor.keyboardshortcut' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/nav/offices">
<i class="fa fa-compass "></i>
<span>{{'label.anchor.navigation' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/tasks">
<i class="fa fa-check "></i>
<span>{{ 'label.anchor.tasks'| translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/entercollectionsheet">
<i class="fa fa-tasks "></i>
<span>{{'label.anchor.collectionsheet' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/individualcollectionsheet">
<i class="fa fa-tasks "></i>
<span>{{'label.anchor.individualcollectionsheet' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/freqposting">
<i class="fa fa-repeat "></i>
<span>{{'label.anchor.frequentpostings' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/journalentry">
<i class="fa fa-plus "></i>
<span>{{'label.anchor.addjournalentries' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/accounts_closure">
<i class="fa fa-folder "></i>
<span>{{'label.anchor.closingentries' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/accounting_coa">
<i class="fa fa-sitemap "></i>
<span>{{'label.heading.chartofaccounts' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/notifications">
<i class="fa fa-bell" ></i>
<span>{{'label.heading.notification' | translate }}</span>
</a>
</li>
<li>
<a class="black" href="#/createclient">
<i class="fa fa-user "></i>+ <span>{{ 'label.anchor.client' |translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/creategroup">
<i class="fa fa-group "></i>+ <span>{{ 'label.anchor.group' |translate}}</span>
</a>
</li>
<li>
<a class="black" href="#/createcenter">
<i class="fa fa-map-marker "></i>+ <span>{{'label.anchor.center' | translate}}</span>
</a>
</li>
<li>
<a class="black" href="mailto:xxxxxxxxx?Subject=Need%20assistance">
<i class="fa fa-question-circle"></i>
<span>{{'label.anchor.help' | translate }}</span> <i class="fa fa-external-link"></i>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="mifos-reskin-body-view">
<div class="" ng-view></div>
<!-- Footer -->
<br><br>
<footer align="right">
<p>Support ©<script> document.write(new Date().getFullYear()); </script> Amala</p>
</footer>
<hr>
</div>
</div>
</div>
</div>
Codes of included _topnavbar.html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" ng-click="isNavCollapsed = !isNavCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href id="leftnav-toggle">
<span class="fa fa-bars"></span>
</a>
<a class="navbar-brand" href="#/home">
<img src="./images/logo.png" alt="Amala">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" uib-collapse="!isNavCollapsed">
<ul class="nav navbar-nav" id="main-menu-left">
<li class="" uib-dropdown is-open="li.client.status.isopen"
ng-mouseenter="li.client.status.isopen = true" ng-mouseleave="li.client.status.isopen = false">
<a class="" uib-dropdown-toggle data-toggle="uib-dropdown"
ng-class="{ activate: isActive('clients') }" href >
<i class="fa fa-users"></i> {{
'label.anchor.clients' | translate }}<b class="caret"></b></a>
<ul class="" uib-dropdown-menu id="swatch-menu">
<li><a href="#/clients" has-permission='READ_CLIENT'>{{ 'label.anchor.clients' | translate
}}</a></li>
<li><a href="#/groups" has-permission='READ_GROUP'>{{ 'label.anchor.groups' | translate
}}</a></li>
<li><a href="#/centers" has-permission='READ_CENTER'>{{ 'label.anchor.centers' | translate
}}</a></li>
</ul>
</li>
<li uib-dropdown is-open="li.accounting.status.isopen"
ng-mouseenter="li.accounting.status.isopen = true" ng-mouseleave="li.accounting.status.isopen = false">
<a ng-class="{ activate: isActive('acc') }" href="#/accounting">
<i class="fa fa-money"></i> {{ 'label.anchor.accounting' | translate }}
</a>
</li>
<li class="" uib-dropdown id="reports-menu" is-open="li.reports.status.isopen"
ng-mouseenter="li.reports.status.isopen = true" ng-mouseleave="li.reports.status.isopen = false">
<a class="" uib-dropdown-toggle data-toggle="uib-dropdown"
ng-class="{ activate: isActive('rep') }" href>
<i class="fa fa-bar-chart-o"></i> {{
'label.anchor.reports' | translate }}<b class="caret"></b></a>
<ul class="" uib-dropdown-menu>
<li><a href="#/reports/all" has-permission='READ_REPORT'>{{ 'label.anchor.all' | translate
}}</a></li>
<li><a href="#/reports/clients" has-permission='READ_REPORT'>{{ 'label.anchor.clients' |
translate }}</a></li>
<li><a href="#/reports/loans" has-permission='READ_REPORT'>{{ 'label.anchor.loans' |
translate }}</a></li>
<li><a href="#/reports/savings" has-permission='READ_REPORT'>{{ 'label.anchor.savings' |
translate }}</a></li>
<li><a href="#/reports/funds" has-permission='READ_REPORT'>{{ 'label.anchor.funds' |
translate }}</a></li>
<li><a href="#/reports/accounting" has-permission='READ_REPORT'>{{ 'label.anchor.accounting'
| translate }}</a></li>
<li><a href="#/xbrl" has-permission='READ_REPORT'>{{ 'label.anchor.xbrl' | translate }}</a>
</li>
</ul>
</li>
<li class="" uib-dropdown id="preview-menu" is-open="li.admin.status.isopen"
ng-mouseenter="li.admin.status.isopen = true" ng-mouseleave="li.admin.status.isopen = false">
<a class="" uib-dropdown-toggle data-toggle="uib-dropdown"
ng-class="{ activate: isActive('admin') }" href>
<i class="fa fa-wrench"></i> {{
'label.anchor.admin' | translate }}<b class="caret"></b></a>
<ul class="" uib-dropdown-menu>
<li><a href="#/users" has-permission='READ_USER'>{{ 'label.anchor.users' | translate }}</a>
</li>
<li>{{ 'label.anchor.organization' | translate }}</li>
<li>{{ 'label.anchor.system' | translate }}</li>
<li>{{ 'label.anchor.products' | translate }}</li>
<li><a href="#/templates" has-permission='READ_TEMPLATE'>{{ 'label.anchor.templates' |
translate }}</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" id="main-menu-right">
<li class="" ng-controller="DisplayLogoController"><img ng-hide="office.imagePresent" ng-src="./images/office-image-placeholder.png" alt="Logo">
<img ng-show="office.imagePresent" ng-src="{{image}}" alt="Logo">
</li>
<li class="" uib-dropdown id="notification-icon" ng-controller="NotificationsController" is-open="li.notif.status.isopen"
ng-mouseenter="li.notif.status.isopen = true" ng-mouseleave="li.notif.status.isopen = false">
<a href class="" uib-dropdown-toggle data-toggle="uib-dropdown"
ng-click="fetchItemsInNotificationTray()">
<span class="fa fa-bell"></span>
</a>
<div class="numberCircle" ng-hide="numberOfUnreadNotifications == 0">{{ numberOfUnreadNotifications }}</div>
<ul class="notification-container" uib-dropdown-menu>
<ul class="notification-list" ng-repeat="notification in notifications">
<li ng-click="navigateToAction(notification)">
<h4>{{ notification.content }}</h4>
<span>{{ notification.createdAt }}</span>
</li>
</ul>
<li class="notification-list-link">
Show all notifications
</li>
</ul>
</li>
<li class="" uib-dropdown id="user-menu" is-open="li.user.status.isopen"
ng-mouseenter="li.user.status.isopen = true" ng-mouseleave="li.user.status.isopen = false">
<a id="user-dropdown" class="" uib-dropdown-toggle data-toggle="uib-dropdown" href>
{{currentSession.user.name}}<b class="caret"></b></a>
<ul class="" uib-dropdown-menu>
<li><a id="help" href="xxxxxxxxxxxx?Subject=Need%20assistance"><i class="fa fa-question-circle"></i> {{
'label.anchor.help' | translate }}</a></li>
<li><a href="#/profile"><i class="fa fa-user"></i> {{ 'label.anchor.profile' | translate
}}</a></li>
<li><a href="#/usersetting"><i class="fa fa-cog"></i> {{ 'label.anchor.settings' | translate
}}</a></li>
<li><a id="logout" data-ng-click="logout()"><i class="fa fa-power-off"></i> {{
'label.anchor.logout' | translate }}</a></li>
</ul>
</li>
</ul>
<form ng-submit="search()" class="navbar-form navbar-right">
<div class="input-group pull-left" >
<input id="search" type="text" class="form-control input-sm unstyled" style="width:250px;" data-ng-model="search.query"
placeholder="{{'label.searchorpress'|translate}}">
<div class="input-group-btn search-panel" uib-dropdown="">
<button type="button" class="btn btn-default btn-sm " uib-dropdown-toggle data-toggle="uib-dropdown">
{{currentScope.name | translate}} <span class="caret"></span>
</button>
<ul class="" uib-dropdown-menu>
<li uib-dropdown ng-repeat=" searchScope in searchScopes" ng-click="changeScope(searchScope)">
{{ searchScope.name |translate}}
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</nav>
Codes of the controller that access data from another platform
DisplayLogoController.js
(function (module) {
mifosX.controllers = _.extend(module, {
DisplayLogoController: function (scope, routeParams, resourceFactory, http, API_VERSION, $rootScope) {
scope.office = [];
scope.formData = {};
resourceFactory.officeResource.getAllOffices(function (data) {
scope.parentId = data[0].id;
});
resourceFactory.officeResource.get({officeId: routeParams.id}, function (data) {
scope.office = data;
if (data.imagePresent) {
http({
method: 'GET',
url: $rootScope.hostUrl + API_VERSION + '/offices/' + routeParams.id + '/images?maxHeight=150'
}).then(function (imageData) {
scope.image = imageData.data;
});
}
});
var ViewLargerPicCtrl = function ($scope, $uibModalInstance) {
var loadImage = function () {
if (scope.office.imagePresent) {
http({
method: 'GET',
url: $rootScope.hostUrl + API_VERSION + '/offices/' + routeParams.id + '/images?maxWidth=860'
}).then(function (imageData) {
$scope.largeImage = imageData.data;
});
}
};
};
}
});
mifosX.ng.application.controller('DisplayLogoController', ['$scope', '$routeParams', 'ResourceFactory', '$http', 'API_VERSION', '$rootScope', mifosX.controllers.DisplayLogoController]).run(function ($log) {
$log.info("DisplayLogoController initialized");
});
}(mifosX.controllers || {}));
I am coding with bootstrap in angular4 but I have an error in display:
The error is the part with the color white in bottom div login :
Login Code: displayed when /login
<div class="row" style="background-image: url(../assets/img/test.jpg)">
<div style="background-color: rgba(255, 0, 0, 0.6);">
<nav class="container navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" href="#" style="color: #FFFFFF">test</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-dashboard"></i>
<p >Dashboard</p>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-sign-in"></i>
<p >Login</p>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user-plus"></i>
<p >Register</p>
</a>
</li>
<li>
<a (click)='logout()'>
<p>Log out</p>
</a>
</li>
<li class="separator hidden-lg hidden-md"></li>
</ul>
</div>
</div>
</nav>
<div class="container card col-md-4 col-sm-6 col-xs-8 col-xs-offset-2 col-md-offset-4 col-sm-offset-3">
<div class="header text-center"><h3>Login</h3></div>
<form novalidate class="form-horizontal" #fo='ngForm' (submit)="mySubmit(fo)" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email :</label><br>
<div class="col-sm-12">
<input type="email" class="form-control" name="email" placeholder="Enter email" [(ngModel)]="data.email" #dataemail="ngModel" required minlength="12" pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$">
</div>
<div *ngIf="dataemail.errors?.required && dataemail.touched" class="alert alert-danger">Email is required</div>
<div *ngIf="dataemail.errors?.minlength && dataemail.touched" class="alert alert-danger">
nead at least 12 chars </div>
<div *ngIf="dataemail.errors?.pattern" class="alert alert-danger">
Email is invalid
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">Password :</label><br>
<div class="col-sm-12">
<input type="password" class="form-control" name="password" placeholder="Enter Password" [(ngModel)]="data.password" #datapassword="ngModel" required minlength="8">
</div>
<div *ngIf="datapassword.errors?.required && datapassword.touched" class="alert alert-danger">Password is required</div>
<div *ngIf="datapassword.errors?.minlength && datapassword.touched" class="alert alert-danger">
nead at least 8 chars </div>
</div>
<div class="form-group">
<div class="footer text-center">
<button class="btn btn-fill btn-danger btn-wd" type="submit">Login</button>
</div>
</div>
</form>
</div>
<footer class="container footer" >
<nav class="pull-right">
<ul>
<li>
<a href="#" >
Home
</a>
</li>
<li>
<a href="#" >
Company
</a>
</li>
<li>
<a href="#" >
Portfolio
</a>
</li>
<li>
<a href="#" >
Blog
</a>
</li>
</ul>
</nav>
</footer>
</div>
</div>
code app.component.html: code content all pages project is dispaly
<div class="wrapper" *ngIf="isLoggedIn else login">
<div class="sidebar" data-color="red" data-image="">
<app-sidebar></app-sidebar>
<div class="sidebar-background" style="background-image: url(/assets/img/sidebar-5.jpg)"></div>
</div>
<div class="main-panel">
<navbar-cmp ></navbar-cmp>
<router-outlet></router-outlet>
<div *ngIf="isMap('maps')">
<footer-cmp></footer-cmp>
</div>
</div>
</div>
<ng-template #login>
<router-outlet></router-outlet>
</ng-template>
The error is in only in the login page but in the other page I don't see any errors.
In the following code I use the first bootstrap dropdown to list a selection of items to show. Selecting one creates a bootstrap nav bar with two input fields, a check in field, another dropdown button and two additional buttons. I've put it together like you see in the below example.
The problem is the selection I make in the first dropdown appears in the second dropdown as the title, and that dropdown does not work to give the additional options.
I can't seem to find a way to keep the two dropdown button items from clashing, how can I make them independent of each other?
<div id="container">
<div id="select1" class="dropdown">
<button id="dpbutton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select an Existing Net
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
Show All Stations in DB</li>
<li class="divider"></li>
<li role='presentation' class=' bg-success ' data-value="13"'>
<a href='#' role='menuitem' onclick = 'showActivities(13)'>
Item1
</a>
</li>
<li role='presentation' class=' bg-success ' data-value="12"'>
<a href='#' role='menuitem' onclick = 'showActivities(12)'>
Item2
</a>
</li>
</ul>
</div>
</div>
<nav id="admin" class=" hidden navbar navbar-inverse admin flashit roundit" role="navigation">
<div class=" container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<form class="navbar-form navbar-left">
<div class="form-group">
<input id="cs1" type="text" class="form-control" placeholder="Call Sign" tabindex=1 onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus />
<input id="Fname" type="text" class="form-control" placeholder="First Name" tabindex=2 onkeyup="nameHint(this.value);" onblur="checkIn();" />
</div>
</form>
<button id="ckin2" type="submit" class="btn btn-success" tabindex=3 >Check In</button>
<div class="btn-group">
<button id="showops" type="button" class="btn btn-secondary btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show/Hide
<span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="menu1">
<a role="menuitem" class="dropdown-item" href="#">Show Grid</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show eMail</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Lat/Lon</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Last Name</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show TOD</a>
</div>
</div>
<button id="time" class=" btn btn-info navbar-btn " type="button" onClick="TimeLine();" >Time Line</button>
<button id="closelog" class=" btn btn-danger navbar-btn closenet " type="button" value="Close Net" oncontextmenu="rightclickundotimeout();return false;">Close Net</button>
</div> <!-- end container fluid -->
</nav>
<ul id="txtHint"></ul>
<div id="netids"></div>
<br><br><br>
<div id="actLog" class="hidden">net goes here</div>