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?
Related
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)
I am trying to put my form on a slider in such a way that slider seems to be running in the background of form. If I am using position absolute, then I have to apply a lot of margin and top pixels because there is a navbar above the slider and position absolute applies with respect to the parent element(navbar).
How can I exactly target the position absolute w.r.t my form, not navbar (parent element)?
Or
If you guys think that there can be a better option to deal with this then do share ideas!
Thanks in advance!
Here is the demo link
HTML code:
<section id="main-slider" class="carousel">
<!--start-->
<div id="ninja-slider">
<div class="slider-inner">
<ul>
<li class="dummySlide">
<a class="ns-img" href="img/002.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/003.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/004.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/005.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/zess.jpg"></a>
</li>
</ul>
<div class="navsWrapper">
<div id="ninja-slider-prev"></div>
<div id="ninja-slider-next"></div>
</div>
</div>
</div>
<!--end-->
</section><!--/#main-slider-->
<form role="form">
<!--First Row-->
<div class="row">
<div class="form-group col-md-6">
<label for="inputTopic" class="control-label">Title</label>
<select class="form-control" name="title">
<option value="0">Select</option>
<option value="one">Mr.</option>
<option value="two">Miss</option>
<option value="three">Mrs.</option>
<option value="four">Dr.</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputTopic" class="control-label">Sur-Name</label>
<input type="text" class="form-control" name="surname" />
</div>
</div>
</form>
I do have a working example which uses TWBS's carousel. I created a wrapper .container which has a slider and a form as children. The slider is fullwidth while the form has a width of 70% so it will always be responsive, the height is static for now, you could change this using media-queries. Here is my example:
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
</div>
<div class="myform">
<h1> My Form </h1>
<form>
...
</form>
</div>
</div>
Bootply: http://www.bootply.com/tNAmbhKWb7
You don't have wrapper with class="formSection" for the form and also you should delete a bottom: 0 from formSection class.
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;">
Where you declare the <div class="row">
put this code
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;"
This will definitely work
I'm using a Semantic UI Search Selection and am using a very simple implementation of .dropdown() to convert static markup into a searchable country input.
The problem is that this input automatically focuses and the menu drops down on page load. If I wait until $(window).load(), I can remove the active and visible classes from the element (and its children), but I'd rather instantiate the menu without these to begin with.
My markup looks something like the following:
$('.ui.modal').modal('show');
$('.ui.dropdown').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
<div class="ui form">
<div class="field">
<label>I am a:</label>
<select class="ui dropdown" name="homeowner_type">
<option value="">--</option>
<option value="Homeowner">Homeowner</option>
</select>
</div>
<!-- The dropdown in question -->
<div class="field">
<label>Country:</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<!-- additional countries -->
</div>
</div>
</div>
</div>
</div>
</div>
There are no other instances of .dropdown() in my code. Thoughts?
EDIT: I've discovered that this is happening because the form is included within a modal. The issue doesn't occur when the form is outside of the modal.
As of April 2015, there is an undocumented Modal setting which is responsible for focusing the first input element contained within the Modal:
autofocus: function() {
if(settings.autofocus) {
var
$inputs = $module.find(':input:visible'),
$autofocus = $inputs.filter('[autofocus]'),
$input = ($autofocus.length > 0)
? $autofocus
: $inputs
;
$input.first().focus();
}
},
This setting is available to us under the $.fn.modal.settings. As a result, the following will prevent this search input from focusing when the Modal opens:
$('.ui.modal').modal({
autofocus: false,
}).modal('show');
And a runnable example:
$('.ui.modal').modal({
autofocus: false,
}).modal('show');
$('.ui.dropdown').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
<div class="ui form">
<div class="field">
<label>I am a:</label>
<select class="ui dropdown" name="homeowner_type">
<option value="">--</option>
<option value="Homeowner">Homeowner</option>
</select>
</div>
<!-- The dropdown in question -->
<div class="field">
<label>Country:</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<!-- additional countries -->
</div>
</div>
</div>
</div>
</div>
</div>
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.
In my jSP page, I have some tabs. A tab has a button. What I want is when I click on the button, it should display the next tab or the tab I am providing with index.
My index.jsp is,
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li id="datacollect" class="active"><a href="#datacollector"
target="main" data-toggle="tab">Data Collector</a></li>
<li id="fromDB" class="selectDataloadType"><a
href="#fromDatabase" target="main" data-toggle="tab">Data Load
Database</a></li>
<li id="fromFile" class="selectDataloadType"><a
href="#fromFiles" target="main" data-toggle="tab">Data Load
File</a></li>
<li id="email" class="selectDataloadType"><a href="#fromEmail"
target="main" data-toggle="tab">Data Load Email</a></li>
<li id="webServices" class="selectDataloadType"><a
href="#fromWebServices" target="main" data-toggle="tab">Data
Load Web</a></li>
<li><a href="#datamap" target="main" data-toggle="tab">Data
Map</a></li>
<li>Schedule</li>
</ul>
<br> <br> <br> <br> <br>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="datacollector">
<div class="container">
<div class="row">
<div class="span8">
<form>
<fieldset>
<label class="control-label" for="dataloadType">Data
load Type:</label> <select id="dataloadType" name="dataloadType">
<option>Choose Data load Type</option>
<option value="fromDB">From Database</option>
<option value="fromFile">From File</option>
<option value="email">E-mail</option>
<option value="webServices">Web Services</option>
</select>
<p>
<button id="dataloadNext" class="btn btn-success"
type="button">Submit</button>
</p>
</fieldset>
</form>
</div>
</div>
</div>
</div>
And the script is
<script>
$(function() {
$("#dataloadNext").click(function() {
$( "#tabs" ).tabs("active", 2 );
});
});
</script>
I am using jquery-1.9.0 What is the error here?
UPDATE 1
Browser showing error like this
Uncaught Error: cannot call methods on tabs prior to initialization; attempted to call `method 'active' jquery-1.9.0.js:490`
This is a jQuery-UI error and the JSP is just fine, what I think the problem is that jquery-ui and almost every other javascript framework (bootstrap as you are using for example), must have their elements initialized as of the type I want before doing any work with them.
e.g you must say that they are tabs before you switch between them.
Sample Code Would be
<script>
$(function() {
$( "#tabs" ).tabs();
});
//then use them
$("#dataloadNext").click(function() {
$( "#tabs" ).tabs("active", 2 );
});
</script>
Hope this helps