really need your help, I have the following code for a list being used on filter plugin on my website. I'm trying to have a tooltip show up with brief text when a services name is hovered, Adult Day Program Services, Clinical Services, Community & Socialization, etc.
They all share the same class "sf-level-0" which makes it confusing to me? how else can I target each item on this list to show a text tooltip when each service name is hovered please?
<ul data-operator="or" class="">
<li class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox"
value="Adult Day Program Services" name="_sfm_service_type[]"
id="sf-input-e6bc565b2d96339dcf959e2a1e3561d8"><label class="sf-label-checkbox"
for="sf-input-e6bc565b2d96339dcf959e2a1e3561d8">Adult Day Program Services</label></li>
<li class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox"
value="Clinical Services" name="_sfm_service_type[]" id="sf-input-ffb6f68d490778d1cd1fc48061179fd8"><label
class="sf-label-checkbox" for="sf-input-ffb6f68d490778d1cd1fc48061179fd8">Clinical Services</label></li>
<li class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox"
value="Community & Socialization" name="_sfm_service_type[]"
id="sf-input-a9f73ee6bc24adcb64e50714f67efb34"><label class="sf-label-checkbox"
for="sf-input-a9f73ee6bc24adcb64e50714f67efb34">Community & Socialization</label></li>
<li class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox"
value="Education" name="_sfm_service_type[]" id="sf-input-a038069c980c3056538c3df18c13e8d8"><label
class="sf-label-checkbox" for="sf-input-a038069c980c3056538c3df18c13e8d8">Education</label></li>
<li class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox"
value="Employment Support" name="_sfm_service_type[]" id="sf-input-79a2489689ae03b5d8077f27e91cbec3"><label
class="sf-label-checkbox" for="sf-input-79a2489689ae03b5d8077f27e91cbec3">Employment Support</label></li>
<li class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox"
value="Family Support" name="_sfm_service_type[]" id="sf-input-afc695061514a6bad64a2606576981c8"><label
class="sf-label-checkbox" for="sf-input-afc695061514a6bad64a2606576981c8">Family Support</label></li>
<li class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox"
value="Living Opportunities" name="_sfm_service_type[]"
id="sf-input-e3709d92816676e3513fd243acc6181d"><label class="sf-label-checkbox"
for="sf-input-e3709d92816676e3513fd243acc6181d">Living Opportunities</label></li>
<li class="sf-level-0 " data-sf-count="-1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox"
value="Technology" name="_sfm_service_type[]" id="sf-input-bd2d76ad601550486e4d52b3d0fb09f4"><label
class="sf-label-checkbox" for="sf-input-bd2d76ad601550486e4d52b3d0fb09f4">Technology</label></li>
</ul>
One option is to use TippyJS
You can use the data attributes to set the tooltip text and use the specific constructor to initialize all of them at once.
Related
I have a buch of checkbox in different containers like below:
$("input:checkbox").click(function() {
var url = "http://example.com/results?&"
var flag = false;
var $box = $(this);
var $facet = $box.val();
var $name = $box.attr("name");
var group = "input:checkbox['" + $facet + $name + "']:checked";
console.log(group);
$("#pruebita").not(this).attr("checked", false);
$(group).each(function() {
if (!flag) {
url = url + $(this).val() + $(this).attr('name');
flag = true; // To trace if first query string added
} else {
url = url + "&" + $(this).val() + $(this).attr('name');
}
});
console.log(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle " id="gender">
gender
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="women" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="men" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">
ocassion
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="beach" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="street" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
I want that the checkboxes don't uncheck the previous option when checking another section of checkboxes.
The complete code is also at jsfiddle
In your code you have
$("#pruebita").not(this).attr("checked",false);
Which essentially is unchecking all the checkboxes except the clicked one. Removing this line of code will make it work fine.
See updated fiddle
You don't need any javascript at all for this problem; you just need to use appropriate form elements and set their attributes correctly.
Radio buttons are for when only one of a group of options should be selectable; checkboxes are for when more than one should be selectable. They aren't interchangeable. Do not use javascript to disguise radio button functionality as checkbox elements; that's bad usability, as it gives the user incorrect expectations about how the form will work.
Part of the problem is that you've confused the purpose of the "name" and "value" attributes. The "name" attribute is for defining which group the radio buttons belong to; all radio buttons with the same name will be in the same group. The "value" attribute contains the value that will be submitted as part of the form if that option is selected. You had them backwards:
<input type="checkbox" name="women" value="gender=" ...>
<input type="checkbox" name="men" value="gender=" ...>
With the above code, all the boxes have a unique 'name', so none of them would be grouped; meanwhile the user's selection wouldn't have any effect, since they both have the same value. Instead, that should be this:
<input type="radio" name="gender" value="women" ...>
<input type="radio" name="gender" value="men" ...>
That HTML will cause the form field "gender" to contain the value "women" or "men", depending on the user's selection. Here's the full corrected example:
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle" id="gender">gender</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="women" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="men" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">ocassion</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="beach" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="street" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
Most of the answer here what to go from an object to a list. I need to go the other way. Here is the HTML. This is only a subset of a much larger list - but it is always the same structure and will only ever be three levels deep.
<li class="group">
<input class="group" id="Agriculture" type="checkbox" name="Agriculture">
<label for="Agriculture">Agriculture</label>
<ul class="categories">
<li class="category">
<input class="input_category" id="Apiculture" type="checkbox" name="Apiculture">
<label for="Apiculture"">Apiculture</label>
</li>
<li class="category">
<input class="input_category" id="Barns & buildings" type="checkbox" name="Barns & buildings">
<label for="Barns & buildings"="">Barns & buildings</label>
<ul class="subCategories">
<li class="subcategory">
<input class="subCategory" id="Operations" type="checkbox" name="Operations">
<label for="Operations"">Operations</label>
</li>
<li class="subcategory">
<input class="subCategory" id="Storage" type="checkbox" name="Storage">
<label for="Storage"">Storage</label>
</li>
</ul>
</li>
<li class="category">
<input class="input_category" id="Crop handling" type="checkbox" name="Crop handling">
<label for="Crop" handling"="">Crop handling</label>
<ul class="subCategories">
<li class="subcategory">
<input class="subCategory" id="Harvest equipment" type="checkbox" name="Harvest equipment">
<label for="Harvest" equipment"="">Harvest equipment</label>
</li>
</ul>
</li>
<li class="category">
<input class="input_category" id="Dairying" type="checkbox" name="Dairying">
<label for="Dairying"">Dairying</label>
<ul class="subCategories">
<li class="subcategory">
<input class="subCategory" id="Test equipment" type="checkbox" name="Test equipment">
<label for="Test" equipment"="">Test equipment</label>
</li>
</ul>
</li>
<li class="category">
<input class="input_category" id="Land improvement" type="checkbox" name="Land improvement">
<label for="Land" improvement"="">Land improvement</label>
<ul class="subCategories">
<li class="subcategory">
<input class="subCategory" id="Miscellaneous" type="checkbox" name="Miscellaneous">
<label for="Miscellaneous"">Miscellaneous</label>
</li>
</ul>
</li>
<li class="category">
<input class="input_category" id="Poultry equipment" type="checkbox" name="Poultry equipment">
<label for="Poultry" equipment"="">Poultry equipment</label>
</li>
</ul>
</li>
I have tried many ideas - recursive functions, foreach loops, etc...
This answer got close (How to save HTML ul-li structure into javascript object) - but they resulting array is (in my opinion only) messy, and it doesn't quite do what I need.
From this new object I need to send it to a php file to create filter queries in SOLR. As all these items in the html above are associated with each other (it's a lexicon) I need to get it into an clean(ish) object so I can pass it to php which will create the queries depending on what is checked.
What I need from the object is the associations for each "branch" - this will allow me to create SOLR filter queries using booleans.
At the end of the whole process I want something like the following....
Agriculture => Apiculture
Agriculture => Barns & buildings
Agriculture => Barns & buildings => Operations
Agriculture => Barns & buildings => Storage
Agriculture => Crop Handling
Agriculture => Crop Handling => Harvest Equipment
Agriculture => Dairying
Agriculture => Dairying => Test Equipment
Agriculture => Land Management
Agriculture => Land Management => Miscellaneous
Agriculture => Poultry equipment
This way in the PHP I can create the queries with relative ease. Each these pseudo lines can be made into individual filter queries.
Any ideas welcome - even new ways to do what is needed.
Thanks.
I'm having trouble getting two filter categories to work together. The desired result is for only divs to display when the month from the drop down list is selected and when the region check boxes are checked.
a giant plus would be for a counter to display showing the number of displayed divs vs total divs.
here is the code i have now.
<select name="month-select" id="month-select">
<option id="select">Select a Month</option>
<option value="jan" id="jan" name="jan">January</option>
<option value="feb" id="feb" name="feb">February</option>
<option value="mar" id="mar" name="mar">March</option>
<option value="apr" id="apr" name="apr">April</option>
<option value="may" id="may" name="may">May</option>
<option value="jun" id="jun" name="jun">June</option>
<option value="jul" id="jul" name="jul">July</option>
<option value="aug" id="aug" name="aug">August</option>
<option value="sep" id="sep" name="sep">September</option>
<option value="oct" id="oct" name="oct">October</option>
<option value="nov" id="nov" name="nov">November</option>
<option value="dec" id="dec" name="dec">December</option>
</select>
<input type="checkbox" value="red" id="red" onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">red</label>
<input type="checkbox" value="green" id="green" onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">green</label>
<input type="checkbox" value="blue" id="blue"onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">blue</label>
<input type="checkbox" value="selectall" id="selectall"onclick="Color.filterByColorSelectAll();" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">select all colors</label>
<div id="fulllist">
<div class="rResult red jan mar apr may">
<h3>Spring and January</h3>
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
CTA
</div>
<div class="rResult blue apr may dec">
<h3>April May December</h3>
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
CTA
</div>
<div class="rResult green jul">
<h3>July Only</h3>
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
CTA
</div>
<div id="filtersContainerUpdatingMessage">
<p>Updating...</p>
</div>
<div class="divsShowing">
Showing
<span class="textForALL">ALL ( </span>
<span class="divsShowing"> </span> of <span class="divsTotal"> </span>
<span class="textForALL">) </span>
Divs
</div>
<div class="divsShowingAreZero">
<p>Please select a color and/or different month.</p>
</div>
</div>
<script>
$('#month-select').change(function(){
$('.rResult').each(function(){
if ($(this).hasClass($('#month-select').val())) {
$(this).show();
} else {
$(this).hide();
}
});
});
</script>
Try the below approach. This is unified way of handling filters.
Please note the below points.
A new class for check boxes are added for except for selectall
All change functions will call the same common function , selectall will check and uncheck color check boxes and then calls the common function.
$('#month-select').change(function() {
window.filter();
});
window.Color = {
filterByColor: function() {
window.filter();
},
filterByColorSelectAll: function() {
if ($("#selectall").is(":checked"))
$(".checkColor").prop("checked", "checked");
else
$(".checkColor").removeProp("checked");
window.filter();
},
}
window.filter = function() {
var month = $('#month-select').val();
if (month == null || month == "")
$('.rResult').show(); //show all
else {
$('.rResult').hide(); // hide all
$('.rResult.' + month).show(); //filter by month
}
var strColorFilter = [];
var checkedItems = $(".checkColor:not(:checked)").map(function(i, o) {
return "." + o.id;
}).get();
//filter by color
if (checkedItems.length == 0) return;
strColorFilter.push(".rResult:visible"); //take on visible after month filter
strColorFilter.push(checkedItems);
$(strColorFilter.join("")).hide();
}
.rResult {}
<select name="month-select" id="month-select">
<option value="" id="select">Select a Month</option>
<option value="jan" id="jan" name="jan">January</option>
<option value="feb" id="feb" name="feb">February</option>
<option value="mar" id="mar" name="mar">March</option>
<option value="apr" id="apr" name="apr">April</option>
<option value="may" id="may" name="may">May</option>
<option value="jun" id="jun" name="jun">June</option>
<option value="jul" id="jul" name="jul">July</option>
<option value="aug" id="aug" name="aug">August</option>
<option value="sep" id="sep" name="sep">September</option>
<option value="oct" id="oct" name="oct">October</option>
<option value="nov" id="nov" name="nov">November</option>
<option value="dec" id="dec" name="dec">December</option>
</select>
<input type="checkbox" value="red" id="red" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor">
<label for="ck-loc-us">red</label>
<input type="checkbox" value="green" id="green" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor">
<label for="ck-loc-us">green</label>
<input type="checkbox" value="blue" id="blue" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor">
<label for="ck-loc-us">blue</label>
<input type="checkbox" value="selectall" id="selectall" onclick="Color.filterByColorSelectAll();" checked="checked" class="checkbox checkboxColor">
<label for="ck-loc-us">select all colors</label>
<div id="fulllist">
<div class="rResult red jan mar apr may">
<h3>Spring and January</h3>
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
CTA
</div>
<div class="rResult blue apr may dec">
<h3>April May December</h3>
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
CTA
</div>
<div class="rResult green jul">
<h3>July Only</h3>
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
CTA
</div>
<div id="filtersContainerUpdatingMessage">
<p>Updating...</p>
</div>
<div class="divsShowing">
Showing
<span class="textForALL">ALL ( </span>
<span class="divsShowing"> </span> of <span class="divsTotal"> </span>
<span class="textForALL">) </span> Divs
</div>
<div class="divsShowingAreZero">
<p>Please select a color and/or different month.</p>
</div>
</div>
Demo : http://jsfiddle.net/kishoresahas/2kGzZ/165
I have given
<ul class="test1" style="height: 175px;">
<li class=" ">
<label class="ui-corner-all" title="" for="ui-multiselect-apps_data_usage_operator_country-option-0">
<input type="checkbox" aria-selected="true" title="" value="All" name="multiselect_apps_data_usage_operator_country" id="ui-multiselect-apps_data_usage_operator_country-option-0"><span>All</span>
</label>
</li>
<li class=" ">
<label class="ui-corner-all" title="" for="ui-multiselect-apps_data_usage_operator_country-option-1">
<input type="checkbox" title="" value="1" name="multiselect_apps_data_usage_operator_country" id="ui-multiselect-apps_data_usage_operator_country-option-1" aria-selected="true"><span>XYZ</span>
</label>
</li>
</ul>
Now I want to take out that value of span from li where input aria-selected="true" through jquery. Please help me out.
Please try this
$(function(){
$("input[type='checkbox']").each(function(){
if ( $(this).attr('aria-selected') == 'true' ){
alert($(this).next().text())
}
});
});
Demo
You can use this:
$('li input[aria-selected="true"] + span').text();
Snippet
$(function () {
alert($('li input[aria-selected="true"] + span').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="test1" style="height: 175px;">
<li class=" ">
<label class="ui-corner-all" title="" for="ui-multiselect-apps_data_usage_operator_country-option-0">
<input type="checkbox" aria-selected="true" title="" value="All" name="multiselect_apps_data_usage_operator_country" id="ui-multiselect-apps_data_usage_operator_country-option-0"><span>All</span>
</label>
</li>
<li class=" ">
<label class="ui-corner-all" title="" for="ui-multiselect-apps_data_usage_operator_country-option-1">
<input type="checkbox" title="" value="1" name="multiselect_apps_data_usage_operator_country" id="ui-multiselect-apps_data_usage_operator_country-option-1" aria-selected="true"><span>XYZ</span>
</label>
</li>
</ul>
Simple one liner might do it.
alert($(":checkbox[aria-selected='true'] + span").text());
DEMO
First time radio selection works but if i am selecting radio second time then its not showing as selected. attribute checked=checked showing in html but its not reflection in UI.
What is the solution for this that it can reflect.
Here is script code to apply attribute."
$('#' + myradioid+ ' input:radio').attr("checked", "checked")
Here is my html
<ul id="Ulist" class="Ulist1">
<h2 class="QuestionTxt">First question </h2>
<li id="117184normal" class="statusDefaultAns">
<a id="117184" href="#" onclick="Select(117184);">
<h2>
<input quiz-option="multiple-radio" id="Radio1" type="radio" name="quiz-radio" res="117184">
<label style="cursor: pointer" for="117184">true</label>
</h2>
</a>
</li>
<li id="117185normal" class="statusDefaultAns"><a id="117185" href="#" onclick="Select(117185);">
<h2>
<input quiz-option="multiple-radio" id="Radio2" type="radio" name="quiz-radio" res="117185">
<label style="cursor: pointer" for="117185">false</label>
</h2>
</a>
</li>
<li id="117352normal" class="statusDefaultAns">
<a id="117352" href="#" onclick="Select(117352);">
<h2>
<input quiz-option="multiple-radio" id="Radio3" type="radio" name="quiz-radio" res="117352">
<label style="cursor: pointer" for="117352">ws</label>
</h2>
</a>
</li>
</ul>
Plz provide a solution for this so that radio selection can refresh in ui.
Thanks
Dalvir
Try .prop instead of attr:
$('#' + myradioid+ ' input:radio').prop("checked", true)
Better yet, try it with the onclick method on the label instead of the line. Selecting something that selects itself could be causing an infinite loop, which would explain your problem. Try this code:
window.Select = function(id) {
$('#' + id + 'normal input[type="radio"]').click();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Ulist" class="Ulist1">
<h2 class="QuestionTxt">First question </h2>
<li id="117184normal" class="statusDefaultAns"><a id="117184" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio1" type="radio" name="quiz-radio" res="117184" />
<label style="cursor:pointer" for="117184" onclick="Select(117184);">true</label></h2></a></li>
<li id="117185normal" class="statusDefaultAns"><a id="117185" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio2" type="radio" name="quiz-radio" res="117185" />
<label style="cursor:pointer" for="117185" onclick="Select(117185);">false</label></h2></a></li>
<li id="117352normal" class="statusDefaultAns"><a id="117352" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio3" type="radio" name="quiz-radio" res="117352" />
<label style="cursor:pointer" for="117352" onclick="Select(117352);">ws</label></h2></a></li>
</ul>