How can we remove some styles of Jquery Chosen using Jquery or javascript. I want to remove 'top : 100%' attribute from 'chosen-drop' class. I tried $('.ddlDpndtRsrc').find('.chosen-container .chosen-drop').css('top',''); but it is not working.
<div class="controlsDiv ddlDpndtRsrc">
<select data-placeholder="Select" id="ddlDependentResource" name="dependent_resource" data-col="DependentResource" class="infoInput chsnddl" style="display: none;">
<option value="-1"></option>
<option value="3">Business visa</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 90%;" title="" id="ddlDependentResource_chosen"><a class="chosen-single chosen-default" tabindex="-1"><span>Select</span><div><b></b></div></a>
<div class="chosen-drop" style="top: 0px;">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result" style="" data-option-array-index="1">Business visa</li>
</ul>
</div>
</div>
</div>
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ddlDpndtRsrc">
<div class="chosen-container chosen-drop">
Dummy text
</div>
</div>
</body>
</html>
JAVASCRIPT
var element = $('.ddlDpndtRsrc').find('.chosen-container.chosen-drop');
element.css({
'top' : '0%'
});
http://jsbin.com/niyadi/3/watch
After making your HTML post above readable, what you have provided should work, ensure .chosen-container .chosen-drop doesn't already have !important overriding the top value.
It may be a good idea to get used to replacing <b> with <strong> also :)
Related
opts is an array ["1","2"]. The select options are not selected. The dropdown is a bootstrap multiselection plugin. What am I missing here?
var data = {};
data.action = "get-form-data";
data["account-id"] = localStorage.getItem("account-id");
ajax('post', 'php/enablers.php', data, formDataSuccess);
function formDataSuccess(data) {
data = JSON.parse(data);
$("#min-rating").val(data.MinRating);
debugger;
var opts = data.AcceptedMedia.split(",");
$.each(opts, function(inx,val){
$('#accepted-media option[value=' + val + ']').attr('selected', true);
})
$("#special-instructions").val(data.SpecialInstructions);
}
HTML
<html lang="en">
<head>
<title>Writer's Tryst - Enablers Form</title>
<link type="text/css" href="css/enablers.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css">
<link rel="stylesheet" href="css/jquery.rateyo.min.css">
<style>
select {
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="container center_div">
<img id="img-enablers" src="#" alt="images" />
<form id = "form-enablers" class="form-horizontal well">
<h1>Enablers</h1>
<p>
<label for="form-type" class="fixed50">Form:</label>
<select id="form-type" name="form-type[]" class="btn btn-outline" multiple="multiple" required>
</select>
</p>
<p>
<label for="genres" class="fixed50">Genres:</label>
<select id="genres" name="genres[]" multiple="multiple" required>
</select><br/>
</p>
<p>For an explanation of the genres shown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_genres">List of genres</a><br/></p>
<p>
<label for="accepted-media" class="fixed50">Accepted Media:</label>
<select id="accepted-media" name="accepted-media[]" multiple="multiple" required>
<option value='1'>Mail</option>
<option value='2'>PDF File</option>
</select><br/>
</p>
<label for="min-rating" class="fixed50">Minimum Rating:</label>
<div id="min-rating"></div>
<p> <label for="special-instructions" class="fixed50">Special Instructions:</label>
<textarea id ="special-instructions" name="special-instructions"></textarea>
</p>
<p class="thumbnail">For a limited time, enablers can use this site for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</p>
<p id="recaptcha-elements"></p>
<div class="form-group">
<button type="submit" id="enablers-search" class="btn btn-success btn-lg btn-block glyphicon glyphicon-search"> Search</button>
</div>
<input id="userid" name="userid" type="hidden" />
</form>
</div>
<form id="writers-list">
<p id="manuscript-request">To request a manuscript, click the checkbox beneath the thumbs-up icon.</p>
<div id="table-list"></div>
<div id="main" class="content"></div>
</form>
<script src="js/bootstrap-multiselect.js"></script>
<script src="js/jquery.rateyo.js"></script>
<script src="js/enablers.js"></script>
<script src="js/recaptcha.js"></script>
</body>
</html>
Since val() of <select multiple> is array... it is simpler to just set the <select> value instead of looping the options
$('#accepted-media').val(opts)
DEMO
on page init I have following render of combobox element
<div class="combobox-container">
<input type="hidden" name="MySelection" value="">
<div class="input-group">
<input class="combobox form-control" type="text" autocomplete="off" placeholder="Select">
<ul class="typeahead typeahead-long dropdown-menu">
<li class="" data-value="val1">
<li class="active" data-value="val2">
<li data-value="val3">
<li data-value="val4">
<li data-value="val5">
</ul>
<span class="input-group-addon dropdown-toggle" data-dropdown="dropdown">
<span class="caret"></span>
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
which renders combo like
after I select option from this combo I'm geting rendered like
now after certain users action I'm resetting combo box on it's default state so I use following code
$('#MySelection').val(undefined);
this actually change value as I expected but ui elemenent stays intact, it appears
and I want to appear as
I tried with $('#MySelection').data('combobox').refresh();
but that doesn't helped.
Update:
As someone suggested I tried with moving $('#MySelection').data('combobox').refresh();
at the end of the file since I'm getting error inside firebug
TypeError: $(...).data(...) is undefined').data('combobox').refresh();
but it doesnt help. I try even to put at the of the _Layout.cshtml file after all jquery init files but also without any progress.
UPDATED: try this:
bootstrap-combobox:
$('#MySelection').val('');
$('#MySelection').data('combobox','refresh');
$(document).ready(function(){
$('.combobox').combobox()
$("#reset").on("click",function(){
$('.combobox').val('');
$('.combobox').data('combobox','refresh');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://formvalidation.io/vendor/bootstrap-combobox/js/bootstrap-combobox.js" type="text/javascript"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="http://formvalidation.io/vendor/bootstrap-combobox/css/bootstrap-combobox.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Vertical Form</h1>
<div class="form-group">
<label>Turns this</label>
<select class="combobox input-large form-control">
<option value="">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
</select>
</div>
<button id="reset">Reset</button>
This works for me:
$('#MySelection').val('');
$('#MySelection').data("combobox").clearElement();
$('#MySelection').data('combobox').refresh();
Use Below Code to set selected index 0
$('#MySelection').prop('selectedindex',0);
Your element <input type="hidden" name="MySelection" value="">has the name MySelection.
With your $('#MySelection').val(undefined); you're trying to call it by it's ID (not name).
Try $('input[name=MySelection]') instead.
After much searching, I found #mikeblum's solution to work for me.
$('#element').data('combobox').clearTarget();
$('#element').data('combobox').clearElement();
I'm working with bootstrap and I'm trying to make a simple page that contains a list of input boxes and dropdowns with the form-inline approach.
I would like the form fields obviously to be at equal distances between them, and, if possibile, to make the size relative to the label and field length. This is the ugly result I get, just to explain:
As you can see from the code below, I gave a col size of 3 for each field trying to make each row contain 4 inputs, but the result is ugly: if the label is too long I can't see the content of the dropdown, the spacing between each input depends on the length of the input, so the result is not eye-catching.
The next problem is the vertical spacing between inputs. Obviously everything should be in the same form to make a single submit, and this is the result when an input requires a new line. I obviously would like to have a nice vertical spacing but I don't know how to.
This is the code of the page:
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-it" lang="it-it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="../resources/miotema/favicon.ico" />
<title>Tool fgfgfg</title>
<script src="<c:url value="/resources/miotema/js/jquery-2.1.4.min.js" />" type="text/javascript" ></script>
<script src="<c:url value="/resources/miotema/js/bootstrap.min.js" />" type="text/javascript" ></script>
<script src="<c:url value="/resources/miotema/js/common.js" />" type="text/javascript" ></script>
<link rel="stylesheet" href="<c:url value="/resources/miotema/css/bootstrap.min.css" />" type="text/css" />
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right menu header">
<li class="dropdown">
TEST<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Visualizza </li>
<li>Nuovo</li>
<li class="divider"></li>
<li>Voce Menu separato</li>
</ul>
</li>
<li>Chiamata Ajax</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<form class="form-inline" action="<c:url value="/insert" />"
method="post">
<div class="well bs-component">
<fieldset>
<legend>Inserimento Dati</legend>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>testtttttttttttt</strong></span> <select class="form-control"
name="durata_contrattuale">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>uahuaduhaudhtfftftftftftftfuadu</strong></span> <select class="form-control" name="capacita_banda">
<option>10 Mb/s</option>
<option>20 Mb/s</option>
<option>30 Mb/s</option>
<option>40 Mb/s</option>
<option>50 Mb/s</option>
<option>60 Mb/s</option>
<option>70 Mb/s</option>
<option>80 Mb/s</option>
<option>90 Mb/s</option>
<option>100 Mb/s</option>
<option>200 Mb/s</option>
<option>300 Mb/s</option>
<option>Altro</option>
</select>
</div>
</div>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>fy</strong></span> <select class="form-control"
name="opzione_realizzazione">
<option>Basic</option>
<option>Plus</option>
<option>Ultra</option>
</select>
</div>
</div>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>dtddtdttd</strong></span> <select class="form-control" name="ultra_protezione">
<option>Si</option>
<option>No</option>
</select>
</div>
</div>
<div class="form-group col-lg-3">
<div class="input-group">
<span class="input-group-addon"><strong>blablabalbala</strong></span>
<select class="form-control" name="lbublbu">
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</fieldset>
</div>
</form>
</body>
</html>
Any hint?
first of all you missed "ROW" class element that will serve as parent for all col-3's you made. Second there is 5 col-3's**** which means grid of 15 not 12 as it should be. Try to count which of the inputs should be bigger than others, and count down how many col's you need. After that make it sum equal to 12 and also you might try to put width: 100%; for input.
Try this:
#media (min-width: 992px){
.bs-component .form-control{
margin-bottom: 15px;
}
}
I am a newbie learning web development. I am trying to create a simple form with two dropdowns. Based on first drop down second dropn down should be visible.
But it is not working :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="box">
<form>
<div class="ccms_form_element cfdiv_custom">
<div class="col-md-4">
<label for="inputType">Input Type</label></div>
<div class="col-md-8" style="font-size:16pt;">
<select id="inputType" required name="inputType" style="width:500px" onChange="ChangeDropdowns();">
<option value="">Select Type : Type Of You Want to Process</option>
<option value="text">Text </option>
<option value="genome">Numbers</option>
<option value="chacha">Special Characters</option>
</select>
</div>
</div>
</div>
<div class="style-sub-1" id="dataType" style="display: none;" >
<div class="col-md-4">
<label for="inputType">Data Type</label></div>
<div class="col-md-8" style="font-size:16pt;">
<select id="data" required name="data" style="width:500px">
<option value="">Select Data Source : Where is your Data?</option>
<option value="text">Data is already in Server</option>
<option value="genome">Need to Upload the File</option>
</select>
</div>
</div>
<div class="row">
<script>
function ChangeDropdowns() {
$(".style-sub-1").show();
}
</script>
</body>
</html>
Can someone tell me what I am doing wrong here ?
It looks like you are trying to use jquery (the $ in your javascript code).
However, you haven't specified the jquery script in your html.
Try adding this
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
In between the head blocks
Use the following, using JQuery to detect the change in first select - and include JQuery as Scott said
$( document ).ready(function() {
$("#inputType").on('change', function (){
$(".style-sub-1").show();
});
});
I got some problems with my JavaScript!
<form action="addcategory.php" name="addContact">
<input id="category" name="category" type="hidden" value="" />
</form>
This is my form... nothing special here.
function addCategory(){
if(document.getElementById('category').value = prompt("Indtast ny kategori", "Ny kategori")){
document.forms['addContact'].submit();
}
}
This is the JavaScript.
The JavaScript is placed AFTER the form, so the DOM is loaded.
<div onclick="addCategory()" class="save">Ny kategori</div>
That's the div that triggers the function... The div is placed at the beginning og the page, but should not make any difference.
When I click the div, a prompt comes up, I enter a string and press OK, but then i get the follow error: "Cannot call method 'submit' of undefined"
Please help, this is so annoying!
EDIT:
<?php
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleCRM | Kategorier </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="search_bar">
<a href="../"><div id="logo">
SimpleCRM
</div></a>
<div class="wrapper">
<div class="floats" style="float: left">
<table>
<tr>
<td>
<?php
?></td>
</tr>
<tr>
<td id="menu">
<div onclick="addCategory()" class="save">Ny kategori</div>
<div onclick="editContact()" class="button">Omdøb kategori</div>
<div id="delete" onclick="deleteContact()" class="button">Slet kategori</div>
</table>
</div>
<div class="floats" style="float: right">
<table>
<tr>
<td align="right">
<?php
?>
</td>
</tr>
<tr>
<td align="right">
<div onclick="wnidow.location = 'categories.php'" id="changecategories">Administrer kategorier</div>
<div onclick="window.location = '../logout.php'" id="logout">Log ud</div>
</td>
</table>
</div>
</div>
</div>
<div align="center" class="wrapper">
<div id="categories">
<form>
<select size="20" name="category">
<?php
?>
</select>
</div>
<div style="width:500px;" class="wrapper">
<div onclick="window.location = '../CRM?CRM=' +Math.floor((Math.random()*1000)+1)" id="back">
Tilbage
</div>
</div>
</div>
<form action="addcategory.php" name="addCategory" id="addCategory">
<input id="category" name="category" type="hidden" value="" />
</form>
</body>
</html>
<script>
function deleteContact(){
if(confirm('ADVARSEL:\nDu er ved at slette denne kontakt!'))
{
document.forms['delete'].submit();
}
}
function editContact(){
window.location.href = document.URL + '&edit=true';
}
function addCategory(){
if(document.getElementById('category').value = prompt("Indtast ny kategori", "Ny kategori")){
console.log(document.forms);
document.forms.addCategory.submit();
}
}
</script>
This is my entire document (the PHP code has been removed), so i hope you can now see everything more clearly...
The problems is that you have a form tag inside another form element:
<form>
<select size="20" name="category">
...
<form action="addcategory.php" name="addCategory" id="addCategory">
...
</form>
This is invalid and the inner form tag is ignored, and hence an element with name or ID addCategory does not exist. Remove the first form tag, it doesn't seem to serve any purpose.
That's one if the reasons why proper indentation is important.