So I have two radio buttons here, and I'm trying to link them up. Due to the fact that they are in two different forms, they don't seem to work as I expected. The forms are required in Bootstrap in order to display the correct style I desire. Here's a snippet of my code:
<ul class="list-group">
<li class="list-group-item list-heading">Notification Display Options</li>
<li class="list-group-item">
<form class="form-inline" role="form">
<div class="radio">
<label>
<input type="radio" id="noti_display_time" name="noti_display"> <span trans="shownotificationfor">Shows for</span>
<div class="form-group">
<input id="show_noti_time" type="number" class="form-control" max="60" min="1" data-requires="noti_display_time">
</div> <span trans="seconds">seconds</span>
</label>
</div>
</form>
</li>
<li class="list-group-item">
<form class="form-inline" role="form">
<div class="radio">
<label>
<input type="radio" name="noti_display">Close manually
</label>
</div>
</form>
</li>
</ul>
http://jsfiddle.net/DerekL/4YfB9/show (Do not view it inside the jsFiddle preview window since the style changes as the window size changes)
Is there a solution to this without messing up the style? Thanks.
JavaScript will be my last resort, if there is no workaround.
Just wrap one form around the <ul>. Using 2 forms just to manage style doesn't make much sense.
<form>
<ul/>
</form>
DEMO
Related
I want to pass from a tab to another tab through a input (type submit), that input has some JS code behind, but the console shows this
Uncaught TypeError: Cannot read property 'addEventListener' of null
HTML Code:
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Registrarse</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs" id="myTabs">
<li role="presentation" class="active" id="pone">
<a data-toggle="tab" href="#datospersonales">Datos personales</a>
</li>
<li role="presentation" id="ptwo" class="disabled">
<a data-toggle="tab" href="#registrousuario">Registro de usuario</a>
</li>
<li role="presentation">
</li>
</ul>
<div class="tab-content mt-25">
<div role="tabpanel" id="datospersonales" class="tab-pane active fade in">
<form class="form-horizontal" id="form1" name="form1">
<label class="col-md-1 control-label">Nombres</label>
<div class="col-md-4">
<input type="text" class="form-control s" placeholder="Nombres" id="name">
</div>
<label class="col-md-offset-1 col-md-1 control-label">Correo</label>
<div class="col-md-4">
<input type="text" class="form-control s" placeholder="Correo" id="email">
</div>
</form>
<div class="col-md-offset-11 col-md-1 mt-25">
<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
</div>
</div>
JavaScript Code:
var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);
function handleClick(){
$('#myTabs a[href="#ptwo"]').tab('show');
}
I don't know if it's that i'm not using JQuery properly in this case, im new at this.
I found few things on your code, please consider this just observations.
In the future please specify that you are using boostrap and jQuery (not all pages uses these frameworks), it will help to understand the issue that you are having , also please specify the version of the libraries that you are using!.
in the Submit button you are repeating the attribute "class", so the second one will be ignored when you are trying to get by className; Other important point it since you are adding event handler through JS is not necessary to use "onclick".
<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
change by
<input type="submit" class="btn btn-success guardar" value="Siguiente">
The HTML submit button will handle a submit , it means that always will send the information in the page to other (could be the same), but that perform of sumit means another requests is done, so, it is necessary to be a submit button ?. Assuming the submit is needed you will need to prevent the event of sending the information (until you want that perform of information necessary), for preventing events you can use "event.preventDefault()", you also will need to add a logic to stop preventing when you consider the information is ready to be sent.
the selector for the tab is not necessary to be to much specific, since is supossed that the id af an HTML element should not be the same in the entire page.
var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);
function handleClick(e){
e.preventDefault();
$('#ptwo').tab('show');
}
this is the sample workiing:
Your sample working
<nav>
<div class="nav-wrapper green lighten-2">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
Hello, I have the above materialize html from the website that initializes the visual component of a searchbar, but as of now it is not very functional. How do I make is so that when I type and search, it redirects me to a specific HTML page?
Use the Angular or React or PHP to make it dynamic,
Using only a HTML you canot make it dynamic.
I have an app that uses Bootstrap. I need to use the Bootstrap Collapse component. I have created a Bootply to demonstrate my problem here. My code looks like this:
<div id="items-group" class="form-group">
<div data-toggle="collapse" data-parent="#items-group" data-target="#items-list" aria-expanded="true" aria-controls="items-list" class="collapsable-group-header">
<ul class="list-inline no-padding-below" style="margin-bottom:0;">
<li><span class="glyphicon glyphicon-chevron-down"></span></li>
<li class="no-padding-x">
<h5 style="margin:0;">Items <span>(<button type="button" class="btn btn-link btn-link-padding" onclick="selectAll('items-list')">choose all</button>)</span></h5>
</li>
</ul>
</div>
<div id="items-list" style="padding-left:32px;">
<label style="font-weight:normal;">
<input type="checkbox">
<span>Item A</span>
</label><br>
<label style="font-weight:normal;">
<input type="checkbox">
<span>Item B</span>
</label><br>
<label style="font-weight:normal;">
<input type="checkbox">
<span>Item C</span>
</label><br>
</div>
</div>
If you run the Bootply, you will notice that the collapse does not work correctly on the initial load. When the page initially loads, the collapse items are visible (as expected). Then click the header. It is supposed to collapse the items. Instead, it quickly hides them and then expands the list. After the initial run, it works fine. Its just that when the page loads, I need to get it so the list collapses when you click it. I thought setting aria-expanded="true" would take care of this, however it didn't.
You are missing the classname of the group that identifies the collapse, so when you click the first time the action just toggle that classnames. Add this:
<div class="collapse in" id="items-list" style="padding-left:32px;">
UpdatedBootply
I am working my way through some AngularJS tutorials. Alongside, I have made my small toy to further experiment. I have found a situation where a expression works when outside a ng-repeat but wont work inside and I would like to understand why?
The template:
<div ng-controller="TodoController">
<ul ng-init="detail = 0">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span>{{todo.text}}</span>
<!-- This does not make the detaildiv appear -->
<input class="btn" type="submit" value="dive1" ng-click="detail = 1">
</li>
</ul>
<!-- This however will make the detaildiv appear -->
<input type="submit" value="divein" ng-click="detail = 1">
<p>Detail: {{detail}}</p>
<div id="detaildiv" ng-show="detail === 1">
<span>Some content</span>
<input type="submit" value="diveout" ng-click="detail = 0">
</div>
</div>
What is it about ng-repeat that stops this working, or am I on the wrong track?
putting my comment as an answer.
basically ng-repeat creates a child scope hence the detail inside and outside of ng-repeat is not same.
to fix this you have to use $parent.
<ul ng-init="detail = 0">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span>{{todo.text}}</span>
<!-- This does not make the detaildiv appear -->
<input class="btn" type="submit" value="dive1" ng-click="detail = 1">
</li>
</ul>
but the best way to fix this would be never use ng-model without dot.
or even better start using controller as syntax.
both above options would avoid such issues.
I'm using JQuery UI to generate and load a tab when the user clicks a button using advice from this question that I asked earlier. It loads the data fine, but it is not applying the CSS styles that were present when the page was static.
function createTab2() {
// this will add a tab
$("#tabs").tabs("add","#tabs-2","1: Population Density");
$("#tabs-2").load('tabs/tab2.php');
$('#tabs').tabs('select', "#tabs-2");
}
My original static file contained the following:
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
</ul>
<div id="tabs-1" style="height:300px;"> <!-- Start Tab 1 -->
<form >
<div id="radio-b1">
<input type="radio" id="b1" name="type" value="1" /><label for="b1">Radio Button 1</label>
</div>
</form>
</div> <!-- End Tab 1 -->
<div id="tabs-2" style="height:250px;"> <!-- Start Tab 2 -->
<form >
<div id="radio-p1">
<input type="radio" id="radio4" name="pop_den_1" value="1" /><label for="radio4">Radio Button 2</label>
</div>
</form>
</div> <!-- End Tab 2 -->
I replaced Tab 2 with a button that called the javascript function createTab2() and saved the following code in tab2.php:
<div >
<form >
<div id="radio-p1">
<input type="radio" id="radio4" name="pop_den_1" value="1" /><label for="radio4">Radio Button 2</label>
</div>
</form>
</div> <!-- End Tab 2 -->
I don't fully understand if I need to be adding properties to #tab-2 when I create it (such as setting an id value, or other properties.
The javascript function that you wrote wont automatically add styling to your elements. It will only use the styling that are there in the included jqueryui.css. I see you only have one style line in the tabs-2 in your static markup if this is the only style you want to apply to it you should just write a single js line to add this style.
This is the line that you have in your tab-2 style
style="height:250px;"
to apply this style you can do it the following way
$("#tabs-2").css("height", "250px");
do this before loading the tab or before calling the select on tabs-2