I use the jQuery combobox plugin:
https://jqueryui.com/autocomplete/#combobox
My JS:
$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
My goal is to add a custom class to the autocomplete div in order to individually style the autocomplete dropdown. I already tried the following, but this is not working:
$( "#combobox" ).combobox().autocomplete("widget").addClass('my-custom-autocomplete-class');
Try This, As per selected value class add to combobox write css for each option mention in drop down
$(function($) {
$( 'select[id=combobox]' ).on("change",function() {
var dynaminClass = $(this).val();
console.log(dynaminClass);
$(this).attr('class', dynaminClass);
})
})
Related
I am not getting data from class which is selected - radio button not post.
Live example: https://www.kodjs.com/uyeol.php
All-Code jQuery: https://jsfiddle.net/8Lbsdduv/1/
$('[data-toggle="wizard-radio"]').click(function(){
wizard = $(this).closest('.wizard-card');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
/*My code*/
$( "input" ).on( "click", function() {
$( "#log" ).html( $( "input:checked" ).val());
});
Try replacing
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
with this
$(wizard).find('[type="radio"]').prop('checked', false);
$(this).find('[type="radio"]').prop('checked',true);
i have this working code bellow and i think he is a little bit too long and redundant can i customize it ?
$( "#unique" ).click(function() {
if ( $( this ).is(':checked') ) {
$( ".lotud" ).show();
$( "#add_lot" ).hide();
$( "#lots_rows_contnr" ).hide();
$(".lotud input").prop({disabled: false})
$("#lots_rows_contnr input").prop({disabled: true})
}
else {
$( ".lotud" ).hide();
$( "#add_lot" ).show();
$( "#lots_rows_contnr" ).show();
$(".lotud input").prop({disabled: true})
$("#lots_rows_contnr input").prop({disabled: false})
}
});
You can shorten it slightly through the use of ternaries, using the checked property on the DOMElement itself, joining selectors and using the checked property as the basis for the disabled property. Try this:
$("#unique").click(function() {
$(".lotud").toggle(this.checked);
$("#add_lot, #lots_rows_contnr").toggle(!this.checked);
$(".lotud input").prop({ disabled: !this.checked });
$("#lots_rows_contnr input").prop({ disabled: this.checked });
});
Which of the two versions, your original or the above, is more readable is a matter of opinion.
jQuery(document).ready(function() {
jQuery( "li.post_link_history.current" ).click(function() {
jQuery( "div#rating-anchor" ).css( "display", "none !important" );
});
});
//or
jQuery(document).ready(function() {
if(jQuery('li.post_link_history.current').attr('class')=='current')
{
jQuery('div#rating-anchor').not(jQuery(this)).css('display','none !important');
}
});
How can I "By selecting a class, another div display none in jquery"?
Your display style value is not valid for inline styles
jQuery( "div#rating-anchor" ).css( "display", "none" );//or just call the hide() method
jQuery(document).ready(function() {
jQuery( "li.post_link_history" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or
jQuery( "li.current" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or use an common class for "li" ex:"commonli"
jQuery( ".commonli" ).click(function() {
if(jQuery(this).hasClass("current")){
jQuery( "div#rating-anchor" ).hide();
}
});
});
.hide() method will hide the division.
edited... current and post_link_history are different classes..so use any one
$(document).ready(function(){
$('#1, #2').click(function(){
window.clickedbtnid = $(this).attr('id');
$( "#table_dialog_1" ).dialog();
});
$( "#table_dialog_1" ).find('td').click(function(){ $('#'+window.clickedbtnid).parent().prev().find('input').val($(this).id);
$( "#table_dialog_1" ).dialog('close');
})
});
$('#input_'+id).attr('value', $(this).html());
this was closed to what i want but it only pass based on clicked td's text of table on dialog area because what I need is the first td table of dialog window to pass on input tag, and second td and third on link tag element. See my last table in fiddle below, it should look like the table on the main page when dialog window is closed.
see this FIDDLE
I hope this is what you are looking for, I refactored the code a bit, added class clickMe to button, it makes id unnecessary.
the JS code
var clickedButton;
$(document).ready(function(){
$('.clickMe').click(function(){
clickedButton = this;
$( "#table_dialog_1" ).dialog();
});
$( '#table_dialog_1 tr').click(function(){
var tds = $(this).children();
$(clickedButton).parent().prev().find('input').val(tds.eq(0).html());
$(clickedButton).next('a').text(tds.eq(2).html()+','+tds.eq(1).html());
$( "#table_dialog_1" ).dialog('close');
});
});
I am using the jQuery DataTables plug-in in my application. I need to select the multiple rows in a jQuery datatable using the mouse drag option. How is it possible?
Use jQuery-UI selectable and code similar to the following:
$( "#yourTable" ).selectable(
{
distance: 10,
stop: function()
{
$( this ).find( "tr" ).each(
function () {
if ( $( this ).hasClass( 'ui-selected' ) )
$( this ).addClass( 'row-selected' );
else
$( this ).removeClass( 'row-selected' );
});
}
});
I use 'distance: 10' because I found that otherwise my mousedown handler for the table wouldn't get events - this may not be important for you.