Develop Reference

Getting values from a basic Slider jquery

I'm having trouble getting the values from a 2 way (range) jquery slider. I have tried various things but none worked.
My text field which contains the info has [int - int] structure.
What I am trying to do is to get the 2 range values from the slider into the url get at the end of the script.
JavaScript:
var val1 = 0;
var val2 = 0;
$(function() {
$( "#slider-3" ).slider({
range:true,
min: 1,
max: {{ $data['labels'] }},
values: [ 1, {{ $data['labels'] }} ],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
val1 = ui.values[0];
val2 = ui.values[1];
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) +
" - " + $( "#slider-3" ).slider( "values", 1 ) );
});
$('#fetchLabels').on('click', function(){
location.href="{{ url('labels/objects') }}/" + val1 + "/" + val2;
});
EDIT: With some trouble shooting I am finding that the values are not getting set. They remain only at 0 and 0...

I fixed this. Apparently the values are only changed when the bar moves. So I had to set the val 1 and val 2 to the appropriate starting point.
Javascript:
var val1 = 1;
var val2 = {{ $data['labels'] }};
$(function() {
$( "#slider-3" ).slider({
range:true,
min: 1,
max: {{ $data['labels'] }},
values: [ 1, {{ $data['labels'] }} ],
slide: function( event, ui ) {
val1 = ui.values[ 0 ];
val2 = ui.values[ 1 ];
$( "#price" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) +
" - " + $( "#slider-3" ).slider( "values", 1 ) );
});
$('#fetchLabels').on('click', function(){
var urlee = "{{ url('label/objects') }}/" + val1 + "/" + val2;
location.href=urlee;
});

Struts 2 autocomplete onchange event

I am using struts2 autocompleter dojo tag and need to fire a javascript event onchange.
I have 2 questions.
1) How to fire onchange
2) dojo tags are not supported anymore. So what is the alternative?

Using Struts2-jQuery plugin's you can achieve it as below :
Please check out select part where i am calling javascript function(subinfo()) as per your need.
(function( $ ) {
var calltheData=false;
$.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;
//jQueryOnchangeAutocompleter();
subinfo();
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.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;
}
// 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 );
$( "#yourid" ).combobox();
You can write onchange as below:
<s:select list="yourdatlist" name="yourid"
id="yourid" listKey="wid" listValue="desc"
headerKey="-1" headerValue="" theme="simple" onchange="subinfo();">
</s:select>

How to set minLength for jQuery combobox for individual elements

How do I set a minLength for a single element without the others been affected
EDIT:
Heres the plugin code
(function ( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var input,
self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $( "<span>" )
.addClass( "ui-combobox" )
.insertAfter( select );
input = $( "<input>" )
.appendTo( wrapper )
.val( value )
.addClass( "ui-state-default ui-combobox-input" )
.autocomplete({
delay: 300,
minLength: 2,
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.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-combobox-toggle" )
.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.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );
I'm selecting which select tags must be made into comboboxes like this.
$("#tracklisting").combobox({
selected: function(event, ui) {
var tracklisting = $("#tracklisting").val();
var id = $("#id").val();
$.post('writeToDB.php', {
id: id,
tracklisting: tracklisting
});
}
})
Where do I put $("#tracklisting").autocomplete( "option", "minLength", 0 ); to set the length. I've tried multiple things but to no avail.
EDIT:
Here is a jsfiddle link to the project. combox can stay on the default but combobox2 must have a minlegth of 0. http://jsfiddle.net/5cMjk/4/

The .combobox() widget from jQuery UI is a modification of .autocomplete() and doesn't seem to have as many options.
But from its code you can notice that it creates an input tag on the fly, you could try reapplying the .autocomplete() method on it again.
The input is placed in a span after the old select tag, I used .next() to select the span :
var myMinLength = 10;
$("#tracklisting").next().children("input").autocomplete({
delay: 0,
minLength: myMinLength ,
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;
}
}
}
})
If your combobox breaks after this, you could also try to add these lines that came after :
$("#tracklisting").next().children("input").addClass( "ui-widget ui-widget-content ui-corner-left" );
$("#tracklisting").next().children("input").data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};

Did you try this:
$("#tracklisting").autocomplete({ minLength: 2 });
See also: http://jqueryui.com/demos/autocomplete/#option-minLength
Demo: http://jsfiddle.net/5cMjk/1/

How to reset a jQuery UI slider?

<!-- dirty -->
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<div class="demo">
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range"></div>
</div>
<button type="button"
onclick='$("#slider-range").slider("value", $("#slider-range").slider("option", "min") );'>
Test
</button>
Clicking on the button does not reset the slider. Any clues?

Not storing your original options / multiple slider reset
If you don't want to store your original value or you have multiple sliders try this:
// Reset the sliders to their original min/max values
$('.slider').each(function(){
var options = $(this).slider( 'option' );
$(this).slider( 'values', [ options.min, options.max ] );
});
In relation to your code see this demo.

For Range Sliders you need to use the method .slider("values", index, value) instead.
<script>
function resetSlider() {
var $slider = $("#slider-range");
$slider.slider("values", 0, initialMinimumValue);
$slider.slider("values", 1, initialMaximumValue);
}
</script>
<button type="button" onclick='resetSlider();'>Test</button>

Check out my answer here jsfiddle
$(function() {
var options =
{
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
};
$( "#slider-range" ).slider(
options
);
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
$("#button").click(function()
{
$("#slider-range").slider("values", 0, options.values[0]);
$("#slider-range").slider("values", 1, options.values[1] );
$( "#amount" ).val( "$" + options.values[0] + " - $" + options.values[1] );
});
});

You may try as
function PrimarySlider() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
}
call the function PrimarySlider(); whenever you need slider and reset by calling
function ResetPrimarySlider() {
$( "#slider-range" ).slider("destroy");
PrimarySlider();
}

You also can reset in one line of code (if you use the range option in slider)
$("#slider-range").slider("option", "values", [some_min_val, some_max_val]);

jquery Ui Combobox Error on Chrome / IE 7

For some reason the combobox button aint showing on IE or Chrome, so i end up with just a textbox. anyone figured out how to solve?
Using latest jquery/jqueryui/combobox version.
Heres my edited version of ui.combobox (specially coz original version doesnt give an id to the new element), also theres a fix for combobox size:
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var self = this,
id = this.element.attr("id"),
select = this.element,
theWidth = select.width(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
select.hide();
//fix, doesnt let the element beign too short.
if(theWidth < 110) {
theWidth = 110;
}
var input = $('<input id="' + id + '-combo" style="width: ' + theWidth + 'px;">')
//.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 {
id: this.value,
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.value.match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
var span = $('<span style="white-space: nowrap;"></span>')
.append(input).insertAfter( select );
input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$("<button id='" + id + '-combo-button' + "> </button>")
.attr( "tabIndex", -1 )
.attr( "title", "Mostrar Todos os itens" )
.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;
}
// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
input.focus();
});
}
});
})( jQuery );

Heres the fix my friend pointed. This version of ui.combobox got auto width, and few fixes i found # web. works on ie also.
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var self = this,
id = this.element.attr("id"),
select = this.element,
theWidth = select.width(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
select.hide();
//fix, doesnt let the element beign too short.
if(theWidth < 110) {
theWidth = 110;
}
var input = $('<input id="' + id + '-combo" style="width: ' + theWidth + 'px;">')
//.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 {
id: this.value,
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.value.match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );
var span = $('<span style="white-space: nowrap;"></span>')
.append(input).insertAfter( select );
input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
$("<button id='" + id + "-combo-button'> </button>")
.attr( "tabIndex", -1 )
.attr( "title", "Mostrar Todos os itens" )
.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;
}
// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
input.focus();
});
}
});
})( jQuery );