Make select box unique when using jcf modifyer - javascript

I got this site designed already by front end designers. All select boxes are restyled when the page run in a browser. The problem is I want to show the previously selected value but I dont know how to do that if I cant assign a unique id to the modified select. Here is the modified drop down html:
<div unselectable="on" style="-webkit-user-select: none; -webkit-tap-highlight-color:
rgba(255, 255, 255, 0); width: 66px; " class=" select-area select-modify_select
select-focus ">
<span class="left"></span>
<span class="center">B.N.S.</span>
<a class="select-opener"></a>
</div>
<select name="ach_bank" id="ach_bank" class="modify_select jcf-hidden"
style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); ">
<option value="">Select...</option>
<option value="B.N.S.">B.N.S.</option>
<option value="F.G.B.">F.G.B.</option>
<option value="N.C.B.">N.C.B.</option>
<option value="R.B.C.">R.B.C.</option>
</select>
As you can see the regular select box is hidden and a modified drop down is created. The code that modified the select box is here:
// custom select module
jcf.addModule({
name:'select',
selector:'select',
defaultOptions: {
handleDropPosition: true,
wrapperClass:'select-area',
focusClass:'select-focus',
dropActiveClass:'select-active',
selectedClass:'item-selected',
disabledClass:'select-disabled',
valueSelector:'span.center',
optGroupClass:'optgroup',
openerSelector:'a.select-opener',
selectStructure:'<span class="left"></span><span class="center"></span>
<a class="select-opener"></a>',
selectPrefixClass:'select-',
dropMaxHeight: 200,
dropFlippedClass: 'select-options-flipped',
dropHiddenClass:'options-hidden',
dropScrollableClass:'options-overflow',
dropClass:'select-options',
dropClassPrefix:'drop-',
dropStructure:'<div class="drop-holder"><div class="drop-list">
</div></div>',
dropSelector:'div.drop-list'
},
I however do not know how to modify the script to create a unique id for each created select.
I kow that the modification would fall in this line:
selectStructure:'<span class="left"></span><span class="center" **id="someid"**></span>
<a class="select-opener"></a>',
If i place an id in the code, then all the modified select have the same id. Is there a way to fix this?

I ran into this same issue when I received the front-end markup from an outside source. Turns out, it's a simple solution!
In the jQuery, this is currently written:
selector:'select',
It selects ALL of the 'select' elements and applies the styles to each of them. In order to fix this, add a class name or id in this line, like this:
selector:'select.classname',
OR
selector:'select#idname',
Then simply apply the class name or id to the select fields that you want the custom styles applied to.

Related

Mouse Listeners and select option in JavaScript. mouseover eventListener does not work with <option> of <select> selector in pure JS

I'm trying to make a personalized :hover for <option> elements in <select> selector by mouseover eventListener. But for some reasons mouseover does not fired when the mouse has been on the option element.
var selectOne = document.querySelector('.select__first');
var selectTwo = document.querySelector('.select__second');
for (var key in selectOne) {
if (key % 2 == 0)
selectOne[key].classList.add('select__option-blue');
}
for (var key in selectTwo) {
if (key % 2 == 0)
selectTwo[key].classList.add('select__option-blue');
}
function onMouseOver(e) {
var target = event.target;
var options = event.target.closest('option');
if (!options) return;
console.log(options);
}
document.addEventListener( 'mouseover', onMouseOver);
.select__element > p, span {
display: inline-block;
}
.select {
-webkit-appearance: listbox;
cursor: pointer;
}
.select__option-blue {
background-color: lightblue;
}
option {
cursor: pointer;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="select-row">
<div class="select__element">
<p>The last element: </p><span class="select__element-last"></span>
</div>
<select class="select select__first">
<option value="birds" hidden>Select an element...</option>
<option value="birds">One</option>
<option value="fishes">Two</option>
<option value="animals">Three</option>
<option value="dino">Four</option>
<option value="simplest">Five</option>
</select>
<select class="select select__second">
<option value="birds" hidden>Select an element...</option>
<option value="ploto">One</option>
<option value="trava">Two</option>
<option value="vseyad">Three</option>
</select>
</div>
<script>
</script>
</body>
</html>
Apparently, Chrome doesn't support mouse events on option elements, unless you specify the size attribute to the select element.
Mouse over option in select tag
jQuery-Select list option hover
onMouseMove doesn't fire over <option> element in Chrome
So, yes, the situation around option is a very sad. :(... As say #Veehmot - we cannot bind mouseevents on option elements of selector select normaly in pure JS.
But! In view of the fact that I did not find any clear information on stackoverflow about what exactly can be done to stylize options and select selector on pure JavaScript, I want to share my success in this direction and give the community 2 ways of solving this problem based on pure JavaScript.
I found a really two working ways for coders, who also like me will face the necessity of styling option and select on pure JavaScript without the use of frameworks (jQuery, etc.)
The first way (not direct and harder) is to make the select element with options in the form of <div> selector with <buttons> or <li> list inside. The introdusing of how it work you can see on my CodePen project-page below:
https://codepen.io/Sviatoslav_FrontEnd/pen/PQbBYQ
The second way is to connect one interesting JS library, created for options and select styling. This is really what we want, and it base on pure JavaScript with CSS. BUT! I want to admit, that this script is not mine. I found it on the open-source blog resource. So I'm not responsible for its support or help in setting up. All at your own peril and risk.
I place here a link to this JS library and support files solely to help the same as I - lovers a pure javascript.
Link: https://di-grand.com/blog?download=1&kccpid=3338&kcccount=https://di-grand.com/blog/wp-content/uploads/2016/10/select.rar

How to add a duplicate dropdown with different results

I have a page with a set of drop-downs. Changing those drop-downs generates a small snippet of code corresponding to the selection.
The sample below is a how all bindings have been written at the moment.
jQuery('#one').on('change', function(event){
var selectedElement = $(this).find('option:selected');
jQuery('#code-section').text("You have selected " + selectedElement.text());
});
.code-section {
width: 100px;
height: 50px;
margin-top: 20px;
border: 1px solid red;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block" class="block-one">
<select name="one" id="one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="code-section" id="code-section">
//This is the code snippet area
</div>
</div>
I now have to add another set to the same page. It will behave exactly like the first set but will generate a different kind of snippet.
All the javascript bindings for the 1st set are coupled with element ids. How do I add another dropdown with its own bindings with minimal duplication of code?
Some of the ways I have been trying are:
Move all bindings from ids to classes - The issues with this method is that almost all operations have been done using absolute ids and corresponding attributes of those element. This will require a massive rewrite of all the JS.
Rewrite the Javascript to make it operate on parameters instead of direct bindings - This theoretically would be the right approach but will require a lot of time which is something I cannot afford at the moment.
Duplicate both markup and JS for the dropdown and change all ids in the copy - Not ideal but will the get the job done.
Is there is any other way to look at this?

Click event on dynamic element fires after second click only - jquery

I am trying to execute a function when clicking on a dynamic element(does not exist on page load), here is my code:
jQuery(document).ready(function(){
jQuery('body').off('click','.itemAttribute').on('click','.itemAttribute',function(){
var title = jQuery(this).find('img').attr('title');
jQuery(this).parent().parent().find('select').val(title).change();
});
})
However the code is only executed on second click..
HTML's of Dynamic element:
<ul class="attribute-list">
<li class="itemAttribute tbn-images" rel="837"><img src="pathxxx.jpg" title="UNIVERSITY BLUE/DARK"></li>
<li class="itemAttribute tbn-images" rel="838"><img src="pathxdfhdxx.jpg" title="UNIVERSITY RED/DARK"></li>
</ul>
static HTML:
<select name="super_attribute[92]" id="attribute92" class="required-entry super-attribute-select" onchange="MagicToolboxChangeOptionConfigurable(this, 'farve');" style="visibility: hidden; ">
<option value="">Please choose...</option>
<option value="837" price="0">UNIVERSITY BLUE/DARK</option>
<option value="838" price="0">UNIVERSITY RED/DARK</option>
</select>
Please help..
NOte: When adding an alert in the code, the alert is executed in first click, seems the problem is:
jQuery(this).parent().parent().find('select').val(title).change();
:(
To select an item based on the value, you should be querying the rel attribute of the <li> element.
var value = this.getAttribute('rel');
jQuery(this).parent().parent().find('select').val(value);
Note that the selector you're using is fragile, but in my given example below it works as expected.
Demo
jQuery(this).parent().parent().find('select').val(title).change();
change to
jQuery('#attribute92').val(title);

$().trigger working from console but not in code

I've a html template that modifies the look and feel of a html select box.
<select id='floorinput' class='select multiple-as-single easy-multiple-selection check-list allow-empty' multiple style="width:100px"></select>
The template uses classes to beautify the select box.
The options of select box are being populated by the result of an ajax call, and is working correctly.
The select box finally renders on browser like this:
<span class="select multiple-as-single easy-multiple-selection check-list allow-empty replacement" style="width: 97px; " tabindex="0">
<span class="select-value alt">All</span>
<span class="select-arrow"></span>
<span class="drop-down custom-scroll" style="">
<span class="selected"><span class="check"></span>Floor-1</span>
<span class="selected"><span class="check"></span>Floor-2</span>
.....
<div class="custom-vscrollbar" style="display: none; ">
<div></div>
</div></span>
<select id="floorinput" class="" multiple="" style="width: 100px; display: none; " tabindex="-1">
<option value="Floor-1" selected="selected">Floor-1</option>
<option value="Floor-2" selected="selected">Floor-2</option>
</select>
</span>
The template works by hiding the actual select box and rendering a fancy selectbox instead.
I want to simulate mouse clicks on this select box. The purpose is to deselect the options that are already selected.
The template code cannot handle the programmatic clicks on options of #floorInput (the actual html input).
So I decided to click the spans like:
var j = 0;
//DEselect selected floors programtically
$("#floorinput option").each(function () {
if ($(this).attr("selected") == "selected") {
console.log('should deselect this:' + $(this).text());
$('.select-value.alt').click();//simulate click to open dropdown
$('.drop-down.custom-scroll span.check')[j].click();//perform click. ERROR here
}
else {
console.log('already selected :' + $(this).text());
}
j++;
});
I am using chrome Version 22.0.1229.94 m on Windows 7.
The code throws an error like :
Uncaught TypeError: Cannot call method 'click' of undefined
But it works as expected when I call the same methods through Chrome's console:
$('.select-value.alt').click();
$('.drop-down.custom-scroll span.check')[0].click();//select or deselect first option
Possible cause of the problem may be the markup of select box is not available immediately after the call of $('.select-value.alt').click();
But I've tried delaying the second method call by several methods and it doesnt work.
Any scenario where jquery methods are working through console but not during actual execution?
Please help.
PS:The spam prevention is not letting me upload the screenshot :(.

Dynamically change smarty include file using Javascript

I have two tabs in my smarty file. In tab1 I have a dropdown menu it contains list of cities. I have list of templates based on city it contains details about the city. in Second tab i should show the relevant city template based on the dropdown selection.
For example:
Dropdown:
<select name='city' id='city' class="medium" style="float:left" onchange="setCityTpl(this);">
<option value=''></option>
{html_options options=$city_filter selected=$city.name}
</select>
If I select City 1 in dropdown menu
I should set the tpl name in the smarty include file as city1.tpl
<div id="tab2" class="tab-content" style="display: none; visibility: hidden; padding-top:0px">
{include file=city1.tpl}
</div>
if I select City 2 in dropdown menu
I should set the tpl name in the smarty include file as city2.tpl
<div id="tab2" class="tab-content" style="display: none; visibility: hidden; padding-top:0px">
{include file=city2.tpl}
</div>
You can load url from javascript. So I think if user selects City1 from Dropdown1, your JS will load city1.tpl and City2 will load city2.tpl
Or you can do the follow: the js script call an url (selected-city.php) with a POST/GET value with "city1" or "city2". The selected-city.php retrieves the selected-city.tpl with a parameter named selected (which taken from POST/GET) and your tpl:
<div id....>
{include file=${selected}.tpl}
</div ...>
smarty is a php-based template engine, which means that it runs on the server side, while javascript runs on the client side (the user's browser). So, before the user actually sees your page, the smarty templates have finished processing and any inclusions are already done.
To achieve what you want, one way would be to include all files and hide the respective html elements (with display:none for example). Then, based on the user's selection, you would show the elements you wish (the second drop down in your case

Categories