I'm using code from this fiddle http://jsfiddle.net/kcpma/18/
what i'm trying to achieve is to make appear or unhide a bootstrap label depending the value selected from the button, the text from the label should change, but only works with html input form like text, this doesn't look bad but i want to use bootstrap label to make look like filter tags.
my script
<script>
$('#demolist li').on('click', function(){
var val=$(this).text();
$('#datebox').val($(this).text());
if(val=="A"){ // if certain filter is selected the label should appear
$('#filter').show();
$('#filter').val("AaA");
}else{ // else the tag shouldn't be visible
$('#filter').hide();
}
});
</script>
the actual html working with text input
<br /> <br />
<div class="container">
<div class="col-sm-8">
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control" ></input>
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
</div>
</div>
<br>
<h4 ><span class="label label-primary" >×</span></h4>
<p><input type="text" class="form-control" ID="filter" style="width:100px" disabled></p>
</div>
the html i tried but it doesn't work
1)
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
2)
<h4 ID="filter"><span class="label label-primary">some filter</span></h4>
any hints/ideas?
$.val only works on input elements (including select). If you want to set the text, you could just do:
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
and
$('#filter').html("AaA");
or
$('#filter').text("AaA");
http://jsfiddle.net/kcpma/261/
Related
I am trying to add a class to a great-great-great-great-grandparent of an input element using jquery and/or plain javascript. The idea is; after clicking the button (class="ws-btn-previous") on the current step, a class is added to the fieldset containing selected capacity radio button in the previous step and fade into that fieldset then remove the added class.
The HTML for active fieldset is as follows;
<fieldset class="working_status ">
<h4 class="text-center">What is your Phone's condition?</h4>
<div class="container">
<div>
<ul class="h-ws row">
<li class="wsbf">
<input type="radio" class="sell-rdb" id="ws1" name="working_status" value="Excellent" />
<label class="ws-btn-labels" for="ws1">
<p id="wslbl">Excellent</p>
<p>Good as new. Has no dents or scratches.</p>
</label>
</li>
</ul>
</div>
</div>
<div class="container wizard-buttons">
<button type="button" class="btn btn-previous ws-btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
The HTML section of preceding fieldset in previous step is as follows;
<fieldset class="capacity-gj7p">
<h4 class="text-center">Please select your Galaxy J7 Prime memory capacity</h4>
<div class="container">
<div>
<ul class="h-m row">
<li class="cbf">
<input type="radio" class="sell-rdb" id="sc49" name="capacity" value="32" />
<label class="capacity-btn-labels" for="sc49">32</label>
</li>
</ul>
</div>
</div>
<div class="container wizard-buttons">
<button type="button" class="btn btn-previous sc-btn-previous">Previous</button>
<button type="button" class="btn btn-next capacity-btn-next">Next</button>
</div>
</fieldset>
My attempt to tackle the problem using jQuery and plain javascript is as follows;
jQuery(document).ready(function() {
$('form .ws-btn-previous').on('click', function() {
var fset = document.getElementById("sell-wiz").elements["capacity"];
$(this).parents('fieldset').fadeOut(200, function() {
fset.addClass('capacity-parent');
$('.capacity-parent').fadeIn();
fset.removeClass('capacity-parent');
});
});
});
What am I missing? Is there a better way to do it? Thanks in advance.
I have implemented a dropdown for the login but when I submit it with some empty field the dropdown is closed and therefore the validation notifications of the browser don't appear.
This is my dropdown with the form:
<div class="btn-group dropleft" >
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<spring:message code="master.page.login"/>
</button>
<div class="dropdown-menu p-4" style="width: 250px;" aria-labelledby="dropdownMenu">
<form:form action="j_spring_security_check" modelAttribute="credentials">
<div class="form-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
<form:input id="username" path="username" cssClass="form-control" aria-describedby="basic-addon1" required="required" />
<form:errors class="error" path="username" />
</div>
</div>
<div class="form-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">
<img src="images/password.png" style="height:15px;width:auto" />
</span>
<form:password id="password" path="password" cssClass="form-control" aria-describedby="basic-addon2" required="required"/>
<form:errors class="error" path="password" />
</div>
</div>
<button type="submit" class="btn btn-dark">Login</button>
<br />
<br />
<jstl:if test="${showError == true}">
<div class="alert alert-danger small" role="alert">
ERROR!
</div>
</jstl:if>
</form:form>
</div>
</div>
I have also tried adding an 'onclick' event for the submit to try to open the dropdown with jQuery but it doesn't seem that the button works as it should. I have used this code that, by contrast, has helped me to open the dropdown when there is an error of incorrect credentials when calling the database:
$(".dropleft").addClass("show");
$("#dropdownMenu").attr("aria-expanded", "true");
$(".p-4").addClass("show");
Any idea how to get to visualize the validation?
The problem is any click inside the dropdown closes it and it can be solved, in this particular case, with:
$("[modelAttribute='credentials']").click(e => { e.stopPropagation() })
For the record, placing a <form> inside a dropdown is a no:no.
Improving the answer of Andrei, for my case worked I've needed to add this code:
$(".dropdown-menu").click(function(e){
e.stopPropagation();
});
I am trying to show a div element only whenever user inputs some text in a different field.
Text Field:
<input type="text" id="feedUrl" placeholder="API"
Div:
div class="col-xs-12 text-left" id="continue" style="display: none;">
<a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
Continue
</a>
</div>
JaveScript:
if($('feedUrl').val()){
$('#continue').show();
}
The issue I am having is that the Continue div does not show up whenever I write in the feedUrl input.
Am I missing something?
You have to set a listener on the input to detect changes. Also modify the ID selector as #bukharim mentiond in comments to $("#feedUrl"):
$(document).ready(function(){
$("#feedUrl").on("input",function(){
if($(this).val()){
$('#continue').show();
}
else{
$('#continue').hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="feedUrl" placeholder="API">
<div class="col-xs-12 text-left" id="continue" style="display: none;">
<a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
Continue
</a>
</div>
Bind the event input to capture changes from that input field and check for the entered value.
Use this selector instead:
$('#feedUrl')
var $feedUrl = $('#feedUrl')
$feedUrl.on('input', function() {
var $continue = $('#continue');
if ($(this).val()) $continue.show();
else $continue.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="feedUrl" placeholder="API">
<div class="col-xs-12 text-left" id="continue" style="display: none;">
<a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
Continue
</a>
</div>
Hey guys I am currently developing a site that lists vehicle data using PDO and a MySQL database.
Here is an example of what I currently have: http://www.drivencarsales.co.uk/
So basically each row in the MySQL table contains all of the data for each vehicle and I am printing them into a list using the following code:
<?php include('db-affinity/filter.php'); ?>
<div class="col-md-8 col-sm-8 col-lg-8">
<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
{
echo '
<div class="listing-container ' . $row["Make"] . '">
<h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3>
<h3 class="price-listing">£'.number_format($row['Price']).'</h3>
</div>
<div class="listing-container-spec">
<img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
<div class="ul-listing-container">
<ul class="overwrite-btstrp-ul">
<li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
<li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
<li class="gear-svg list-svg">'.$row["Transmission"].'</li>
<li class="color-svg list-svg">'.$row["Colour"].'</li>
</ul>
</div>
<ul class="overwrite-btstrp-ul other-specs-ul h4-style">
<li>Mileage: '.number_format($row["Mileage"]).'</li>
<li>Engine size: '.$row["EngineSize"].'cc</li>
</ul>
<button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked
</button>
<button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details
</button>
<button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive
</button>
<h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
</div>
';
} ?>
</div>
</div>
</div>
<script>$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});</script>
As you can see I am using a while loop to display every row I have also added the 'Make' of the vehicle to the listing container class, there is also a bit of jQuery however I will explain what that is used for shortly.
I then have this form:
<div class="container con-col-listing">
<div class="row">
<div class="col-md-4 col-sm-4">
<form class="car-finder-container dflt-container">
<h2 class="h2-finder">Car finder</h2>
<ul class="toggle-view">
<li class="li-toggle">
<h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<select class="form-control select-box" name="">
<option value="make-any">Make (Any)</option>
<?php while($make = $filterres->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="">'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>
<label for="four-by-four-checkbox" class="label-checkbox">4x4</label>
<input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>
<label for="convertible-checkbox" class="label-checkbox">Convertible</label>
<input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>
<label for="coupe-checkbox" class="label-checkbox">Coupe</label>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
<label for="automatic-checkbox" class="label-checkbox">Automatic</label>
<input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
<label for="manual-checkbox" class="label-checkbox">Manual</label>
<input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
<label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
</div>
</li>
</ul>
<button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars
</button>
<h4 class="h4-finder">Try our Smart Search <span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
</form>
</div>
You only need to take notice to the start of the form, as you can see the 'Make's' of the vehicles are displayed in the select element options using a while loop.
Now back to the jQuery:
<script>$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});</script>
I have tried adding this jQuery to show the classes that display the same 'Make' selected in the options of the select element and hide the classes that do not contain that class in the listing-container div.
For some reason when the option is selected the jQuery isn't displaying the classes that have the same 'Make' as the option selected.
Any idea where I am going wrong?
BTW I know I should be using AJAX for this however I wouldn't know where to start.
You need to insert a value into the option tags of your Make .select-box. Each of the option tags is given with <option value="">'.$make["Make"].'</option>.
Thus $(this).val() will return an empty string. Try something like: '<option value="'. $make["Make"].'">'.$make["Make"].'</option> instead.
Make the changes indicated below:
option
<option>'.$make["Make"].'</option>
jQuery
//Wait for DOM to load
$(document).ready(function() {
$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});
});
UPDATE
After reviewing your page, the only code you need at the current location, EXACTLY AS SHOWN, is:
$(".select-box").first().change( function() {
var make = $(this).val();
if( make != 'make-any' ) {
$('.' + make).show().next('.listing-container-spec').show();
$(".listing-container").not("." + make).hide()
.next('.listing-container-spec').hide();
}
}).change();
I have a dropdown form, whose width is currently constrained by the width of the link activating the dropdown:
I want the form to extend as far as needed to put all form elements on one line. How can I do that?
Current HTML code:
<h1>Time Period:
<div id="date-filter-dropdown" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="primary">May 2013</span></a>
<ul class="dropdown-menu" role="menu">
<li>
<form class="form-inline">
<input type="text" class="input-mini filter-time-form" id="id_filter_form_year" maxlength="4" size="4" placeholder="YYYY" />
<span class="filter-form-date-dividers">‐</span>
<input type="text" class="input-mini filter-time-form" id="id_filter_form_month" maxlength="2" size="2" placeholder="MM" />
<span class="filter-form-date-dividers">‐</span>
<input type="text" class="input-mini filter-time-form" id="id_filter_form_day" maxlength="2" size="2" placeholder="DD" />
<button type="button" class="btn btn-primary javascript-submit" id="filter-date-submit" onclick="filter_time();">Filter</button>
</form>
</li>
</ul>
</div>
</h1>
JSFiddle
Also, for whatever reason, clicking on the form makes it disappear right now. This doesn't happen on the actual webpage I was working with, only on the JSFiddle page. I've bypassed this issue by pressing tab for now.
h1 div#date-filter-dropdown ul.dropdown-menu {
white-space:nowrap;
min-width: 10px;
}
Try these:
<ul class="dropdown-menu" id="ddown" role="menu"> //added a id for the dropdown
and add these js:
var m = document.getElementById("date-filter-dropdown").offsetWidth; //get the date div width.
// alert(m);
var n = document.getElementById("ddown");
n.style.width = m+'px'; // set dropdown width.
http://jsfiddle.net/Gz3JD/1/