We Keep Coding

Woocommerce 2 Variable Product Dropdown List, force first one to always show all options

I have 2 drop down select fields in my variable WooCommerce product.
1st one is Type of Product (in my case framed or unframed artwork)
2nd one is Size of Artwork.
Thanks to this code:
add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'dropdown_variation_attribute_options', 10, 1 );
function dropdown_variation_attribute_options( $args ){
// For attribute "Type"
if( 'Type' == $args['attribute'] )
$args['show_option_none'] = __( 'Select Framed or Unframed Artwork', 'woocommerce' );
// For attribute "Sizes"
if( 'Size' == $args['attribute'] )
$args['show_option_none'] = __( 'Select Size of Artwork', 'woocommerce' );
return $args;
}
I can display the default text when nothing has been selected for each drop down select field individually.
The problem I have now is that I need to force the 1st drop down list to always show all options and when a selection is made, to reset the 2nd one.
Example:
I offer Variation A,B,C,D in the first drop down list.
The 2nd Drop down list would have variations 1,2,3,4.
Lets say i choose A, the second drop down select field will now limit the options to 1 and 3 as A is not available with 2 and 4.
Lets say i choose 3 now in the 2nd drop down select field, which will limit the first drop down select field's choices to A and B as C and D are not available in 3.
But i need to see C and D as well in the first one so people can always start from the beginning when they choose a product.
Any help will be appreciated.

Please check below code. Hope this would help you.
jQuery(document).ready(function($){
if (jQuery('form.variations_form').length) {
let $form = jQuery('form.variations_form');
let $first_attr_select = $form.find( '.variations select' ).eq(0);
let first_attr_val = $first_attr_select.val() || '';
$first_attr_select.on('change', function(e){
if (!e.isTrigger) {
// store the real value only
first_attr_val = this.value;
}
});
$form.on('woocommerce_update_variation_values', function(){
let first_attr_name = $first_attr_select.data( 'attribute_name' ) || $first_attr_select.attr( 'name' ),
show_option_none = $first_attr_select.data( 'show_option_none' ),
option_gt_filter = ':gt(0)',
attached_options_count = 0,
new_attr_select = $( '<select/>' ),
first_attr_val_valid = true;
let variations = $form.data('product_variations');
new_attr_select.html( $first_attr_select.data( 'attribute_html' ) );
// Loop through variations.
for ( let variation of variations ) {
if ( typeof( variation ) !== 'undefined' && first_attr_name in variation.attributes ) {
let attr_val = variation.attributes[ first_attr_name ],
variation_active = variation.variation_is_active ? 'enabled' : '';
if ( attr_val ) {
// Decode entities.
attr_val = $( '<div/>' ).html( attr_val ).text();
// Attach to matching options by value. This is done to compare
// TEXT values rather than any HTML entities.
var $option_elements = new_attr_select.find( 'option' );
for (var i = 0, len = $option_elements.length; i < len; i++) {
var $option_element = $( $option_elements[i] ),
option_value = $option_element.val();
if ( attr_val === option_value ) {
$option_element.addClass( 'attached ' + variation_active );
break;
}
}
} else {
// Attach all apart from placeholder.
new_attr_select.find( 'option:gt(0)' ).addClass( 'attached ' + variation_active );
}
}
}
// Count available options.
attached_options_count = new_attr_select.find( 'option.attached' ).length;
// Check if current selection is in attached options.
if ( first_attr_val ) {
first_attr_val_valid = false;
if ( 0 !== attached_options_count ) {
new_attr_select.find( 'option.attached.enabled' ).each( function() {
var option_value = $( this ).val();
if ( first_attr_val === option_value ) {
first_attr_val_valid = true;
return false; // break.
}
});
}
}
// Detach the placeholder if:
// - Valid options exist.
// - The current selection is non-empty.
// - The current selection is valid.
// - Placeholders are not set to be permanently visible.
if ( attached_options_count > 0 && first_attr_val && first_attr_val_valid && ( 'no' === show_option_none ) ) {
new_attr_select.find( 'option:first' ).remove();
option_gt_filter = '';
}
// Detach unattached.
new_attr_select.find( 'option' + option_gt_filter + ':not(.attached)' ).remove();
// Finally, copy to DOM and set value.
$first_attr_select.html( new_attr_select.html() );
$first_attr_select.find( 'option' + option_gt_filter + ':not(.enabled)' ).prop( 'disabled', true );
// Choose selected value.
if ( first_attr_val ) {
// If the previously selected value is no longer available, fall back to the placeholder (it's going to be there).
if ( first_attr_val_valid ) {
$first_attr_select.val( first_attr_val );
} else {
$first_attr_select.val( '' ).change();
}
} else {
$first_attr_select.val( '' ); // No change event to prevent infinite loop.
}
});
}
});

Fixing Validation on Input Field

I have a dialog box that pops up after hitting an Add button. There are 2 fields, MR ID and Supplier ID. MR ID is a dropdown and shouldn't need any sort of validation. The supplier id is a text input and needs validation. It needs to be numbers only and there also can be no 2 supplier ids that are the same. They must all be unique. The code I have so far does not work in validating the supplier id.
HTML/PHP for dialog box:
<div id="dialog-form" title="Add Supplier ID">
<p class="validateTips">All form fields are required.</p>
<!-- Dialog box displayed after add row button is clicked -->
<form>
<fieldset>
<label for="mr_id">MR_ID</label>
<select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300">
<?php foreach($user->fetchAll() as $user1) { ?>
<option>
<?php echo $user1['MR_ID'];?>
</option>
<?php } ?>
</select><br><br>
<label for="supplier_id">Supplier ID</label>
<input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
JavaScript:
// ----- Dialog Box for adding supplier id -----
$(document).ready( function() {
$("#insertButton").on('click', function(e){
e.preventDefault();
});
var dialog, form,
mr_id_dialog = $( "#mr_id_dialog" ),
supplier_id = $( "#supplier_id" ),
allFields = $( [] ).add( mr_id_dialog ).add( supplier_id ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
function addVendor() {
var valid = true;
allFields.removeClass( "ui-state-error" );
// ----- Validation for each input in add row dialog box -----
//valid = valid && checkRegexp( mr_id_dialog, /^(0|[1-9][0-9]*)$/, "Please enter a valid MR ID" );
valid = valid && checkRegexp( supplier_id, /^(0|[1-9][0-9]*)$/g, "Please enter a valid Supplier ID" );
if ( valid ) {
var $tr = $( "#index_table tbody tr" ).eq(0).clone();
var dict = {};
var errors = "";
$.each(allFields, function(){
$tr.find('.' + $(this).attr('id')).html( $(this).val()+"-"+supplier_id );
var type = $(this).attr('id');
var value = $(this).val();
// ----- Switch statement that provides validation for each table cell -----
switch (type) {
case "mr_id_dialog":
dict["MR_ID"] = value;
break;
case "supplier_id":
dict["Supp_ID"] = value;
break;
}
});
$( "#index_table tbody" ).append($tr);
dialog.dialog( "close" );
}
}
var dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Add Supplier ID": addVendor,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
addVendor();
});
$( "#insertButton" ).button().on( "click", function() {
dialog.dialog({
position: ['center', 'top'],
show: 'blind',
hide: 'blind'
});
dialog.dialog("open");
});
});
Samples that should pass:
349348
2
1234
Samples that should not pass:
01234
123 45 67
No hyphens, dashes, etc. Numbers only.

Grails - jQuery Autocomplete with Multiple Values

The single value autocomplete is working fine (thanks to people who helped me with it.) but when I tried the jQuery UI's multiple value example, it is not getting the source I need.
This is my controller.
def courseList = {
def cList = Course.withCriteria {
ilike 'course', params.term +'%'
}
render (cList.'course' as JSON)
}
This is my _form view.
<div class="fieldcontain ${hasErrors(bean: studentInstance, field: 'courses', 'error')} required" >
<label for="course">
<g:message code="student.courses.label" default="Courses" />
<span class="required-indicator">*</span>
</label>
<g:textField name="course" id="coursetags" required="" value="${course?.course}"/>
This is my jQuery script (exactly from jQuery UI demo).
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
var courses = ["English", "Music", "Science"];
$( "#coursetags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 2,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter( courses, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
When I have var courses tag inside the script, the multiple-values-autocomplete works. How would I connect autocomplete's source to my controller?
For the single value, this is what I had in my script.
$("#coursetags").autocomplete({
source: "/myApp/student/courseList",
minLength: 2
});
Thank you in advance.

I found this demo. https://github.com/jquery/jquery-ui/blob/master/demos/autocomplete/multiple-remote.html
source: function( request, response ) {
$.getJSON( "/myApp/student/courseList",
{term: extractLast( request.term )},
response );},
I replaced source part and it works now.

jQuery UI Autocomplete stops working after exactly 2041 records

My jQuery UI Autocomplete suddenly stopped working. Apparently my table size is too big, because when I limit the available records to 2040 or any number beneath that, it works perfectly, but breaks then I limit it to 2041 or any number above that.
Here's the full code that doesn't work:
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
<%= raw(Page.pluck(:name).map { |name| "\"#{name}\"" }.join(",\n")) %>
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#pages" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
</head>
<div class="ui-widget">
<textarea id="pages" name="pages" size="50"></textarea>
</div><br>
And here's an example of code that does work:
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
<%= raw(Page.limit(2040).pluck(:name).map { |name| "\"#{name}\"" }.join(",\n")) %>
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#pages" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
</head>
<div class="ui-widget">
<textarea id="pages" name="pages" size="50"></textarea>
</div><br>
Why does the table size matter? Can I change the limit somehow?

IMO, the limit here is not from the jquery, but from the string that you have interpolate:
Page.limit(2040).pluck(:name).map { |name| "\"#{name}\"" }.join(",\n")
IIRC, the max length of a string in ruby is 65535 characters, so let say the average length of name is about 30 characters, 2040 is the limit it could reach.
Solution: You could try a loop and interpolate each name instead to see if it works.

Having Jquery ui issue

I placed all code below. My page works like that
Page's first scene
When i choose something from #menu it fires $("#menu").change(function () function and i'm getting scene like that
Radio buttons .parentcheck are located in div #options. They're like turn off (first one)/on (second one) select-box #parent.
When i turn #parentselectbox on, it fires genopts- ajax request and on success it transforms select-box into jquery-ui autocomplete combobox and places default value.
Now, the problem is following
I'm using input.val( $("#parent option:selected").text()); (in combobox configuration) to place default value. The problem is i want to remove this text onclick (something like html5 placeholder but i want crossbrowser support). How to modify the combobox configuration part to fix that problem?
HTML Markup
<table>
<tr>
<td><label for="menu" id="menu_label">Səhifə harada yerləşəcək?</label>
<select name="menu" id="menu">
<option value="" selected="selected">Birini seçin...</option>
<option value="1">Header menyuya əlavə et</option>
<option value="2">Footer menyuya əlavə et</option>
<option value="0">Bu səhhifənin menyuda adı olmayacaq</option>
</select></td>
<td><div id="options">
<input type="radio" class="parentcheck" name="parentcheck" value="0"/>
Ayrıca yoxsa
<input type="radio" class="parentcheck" name="parentcheck" value="1"/>
hansısa başlıq altında? </div>
<select name="parent" id="parent">
</select></td>
</tr>
</table>
The combobox configuration
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( "<input>" )
.insertAfter( select )
.val( value )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autocomplete" ).term = "";
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
input.val( $("#parent option:selected").text());
input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-button-icon" )
.click(function() {
// close if already visible
if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
input.autocomplete( "close" );
return;
}
// work around a bug (likely same cause as #5265)
$( this ).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
input.focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );

1st problem answer:
http://forum.jquery.com/topic/disable-autocomplete
2nd problem answer:
You can put this text to the title attribute of the your input and then on focus check your value if it's the same as in title. Change your input.val( $("#parent option:selected").text()); to:
var emptyText = $("#parent option:selected").text();
input.attr('title', emptyText).val(emptyText);
input.focus(function() {
var $this = $(this);
if ($this.val() == $this.attr('title')) {
$this.val('');
}
});
input.blur(function() {
var $this = $(this);
if ($this.val() == '')
$this.val($this.attr('title'));
});