How to do search with first letter in individual column searching datatable - javascript

I'am working on a web app with datatable.
I've done global research bar and individual research bar, like this example: https://datatables.net/examples/api/multi_filter.html
Now what I want to do is to start research by the first letter only in the individuals columns.
I tried to do this whith global research and it worked fine, thank to this :
$(document).ready(function() {
var table=$('#example').DataTable( {
responsive: true
} );
$('.dataTables_filter input').on( 'keyup', function (e) {
var regExSearch = '\\b' + this.value;
table.search(regExSearch, true, false).draw();
});
} );
But this is not what I want
And I have programmed my individual research like that :
table.columns(':gt(1)').every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search(this.value )
.draw();
}
} );
} );
I tried to use the same logic as global research while adding
.search('\\b' +this.value )
but when I try to search something, nothing is returned.
Maybe I do something wrong, does anyone know how to do that ?

Ok I was so close.
The only thing I had to do is :
table.columns(':gt(1)').every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search('\^'+this.value, true, false ) // regex=true, smart=false
.draw();
}
} );
} );
And it work.

Related

Initialising jQuery DataTables in Wordpress Breaking HTML Table

I've been working with DataTables in Wordpress but ran into a weird issue which seems like a wordpress specific problem.
I can initialise the jQuery DataTable without a problem using:
<script>
jQuery(document).ready( function () {
jQuery('#test_table').DataTable( {
dom: 'lBfrtip',
} );
} );
</script>
But the jQuery functionality disappears rendering the table back to plain html when I use:
<script>
jQuery(document).ready(function() {
// Setup - add a text input to each footer cell
jQuery('#test_table tfoot th').each( function () {
var title = jQuery(this).text();
jQuery(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = jQuery('#test_table').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
jQuery( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
It doesn't make sense because both of the above work fine in jsfiddle. Any ideas?
Thanks for your reply that makes sense,
Im enqueueing my .js file as described here: https://developer.wordpress.org/themes/basics/including-css-javascript/
After an excruciating few hours I managed to get it working with:
jQuery(document).ready(function() {
var table = jQuery('#test_table').DataTable();
// Setup - add a text input to each footer cell
jQuery('#test_table tfoot th').each( function () {
var title = jQuery(this).text();
jQuery(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});
table.columns().every( function () {
var that = this;
jQuery( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
});
I moved
var table = jQuery('#test_table').DataTable();
to line 2.
If anyone else runs into this problem my setup is:
Wordpress 5.0.3
Plugins:
Formidable Forms 3.0.5
Formidable Forms Pro 3.0.5

How to create a widget instance in jQuery

Consider I have two widgets.
$.widget( "custom.car", {
options: {
name: ''
},
_create: function() {
this.options.name = 'car'
},
random: function( event ) {
console.log(this.options.name);
},
clear: function() { console.log('Clear'); }
});
$.widget( "custom.bike", {
options: {
name: ''
},
_create: function() {
this.options.name = 'bike'
},
random: function( event ) {
console.log(this.options.name);
},
clear: function() { console.log('Clear'); }
});
isCar and isBike is based on user input.
if(isCar) {
$( "div" ).car();
$( "div" ).car('random');
} else if(isBike) {
$( "div" ).bike();
$( "div" ).bike('random');
}
If I call the random method in some where place I'll write the if condition.
If any possible solution to avoid the if condition or any other solution.
Note: My question is correct or not?
Not really, you'll have to decide which method you want to call so you'll have to use an if...else if construct or at least a ternary operator.
Here is an example that reduces the number of statements:
var fName = isCar ? "car" : "bike";
$( "div" )[fName]();
$( "div" )[fName]('random');
In this example I assume that if isCar is false isBike is true which is not exactly like your example.
There is a lot of information missing from your post but here is a way to avoid an "if else" statement.
<form id="selection">
<input id="car-radio" type="radio" value="car" checked> Car
<input id="bike-radio" type="radio" value="bike"> Bike
</form>
<script type="text/javascript">
var carFunc = function() {
isCar = true;
isBike = false;
$( "div" ).car();
$( "div" ).car('random');
}
var bikeFunc = function() {
isCar = false;
isBike = true;
$( "div" ).bike();
$( "div" ).bike('random');
}
$("#selection").on('click', '#car-radio', carFunc);
$("#selection").on('click', '#bike-radio', bikeFunc);
</script>

Conflict between jQuery UI and Bootstrap also for "buttonset"

I have the same problem as in this question here, which is the conflict between jQuery UI and Bootstrap. The given answer from Darkseal
$.widget.bridge('uibutton', $.ui.button);
completely solved my problem for the "button"-widget. But it seems to me, that also the "buttonset"-widget reveals a conflict between the two libraries but
$.widget.bridge('uibuttonset', $.ui.buttonset);
does not do the trick for me. Am I doing something wrong?
This is an older question but I thought I'd share my fix for this.
You don't need the..
$.widget.bridge('uibuttonset', $.ui.buttonset);
There isn't any conflict there with Bootstrap (v3.3.6). The issue is $.ui.buttonset makes calls to .button() which isn't the the new name you declared so the conflict lives on. To fix this, I updated the calls to .button() inside .buttonset() to match the new name, "uibutton" or whatever you declare it as.
Below is my code for version jQuery UI 1.11.4. Perhaps there is an easier fix, but I've not come across it.
$.widget( "ui.buttonset", {
version: "1.11.4",
options: {
items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
},
_create: function() {
this.element.addClass( "ui-buttonset" );
},
_init: function() {
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "disabled" ) {
this.buttons.uibutton( "option", key, value );
}
this._super( key, value );
},
refresh: function() {
var rtl = this.element.css( "direction" ) === "rtl",
allButtons = this.element.find( this.options.items ),
existingButtons = allButtons.filter( ":ui-button" );
// Initialize new buttons
allButtons.not( ":ui-button" ).uibutton();
// Refresh existing buttons
existingButtons.uibutton( "refresh" );
this.buttons = allButtons
.map(function() {
return $( this ).uibutton( "widget" )[ 0 ];
})
.removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
.filter( ":first" )
.addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
.end()
.filter( ":last" )
.addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
.end()
.end();
},
_destroy: function() {
this.element.removeClass( "ui-buttonset" );
this.buttons
.map(function() {
return $( this ).uibutton( "widget" )[ 0 ];
})
.removeClass( "ui-corner-left ui-corner-right" )
.end()
.uibutton( "destroy" );
}
});
I hope that helps you and everyone else.

WooCommerce event not triggering when using Select2 instead of actual select

I've built a custom website using Wordpress and WooCommerce and have installed Select2 to generate custom selects which is working fine. The issue I am having is with some of the selects on the WooCommerce pages, specifically those that trigger an event on change.
The custom selects successfully change the option selected, but the issue arises with selects that are meant to trigger an event. For example, the colour variation dropdown on the product page or the 'Sort By' select on the store page.
I've looked through the WooCommerce JS files and discovered some WooCommerce specific events that are triggered when a selection is made using the actual select box but I'm not sure how to implement this when using Select2 instead.
Here is a copy of the WooCommerce JS in relation to the event I'm talking about (in this case the change to the select for product variations):
.on( 'change', '.variations select', function() {
$form.find( 'input[name="variation_id"], input.variation_id' ).val( '' ).change();
$form.find( '.wc-no-matching-variations' ).remove();
if ( $use_ajax ) {
if ( $xhr ) {
$xhr.abort();
}
var all_attributes_chosen = true;
var some_attributes_chosen = false;
var data = {};
$form.find( '.variations select' ).each( function() {
var attribute_name = $( this ).data( 'attribute_name' ) || $( this ).attr( 'name' );
if ( $( this ).val().length === 0 ) {
all_attributes_chosen = false;
} else {
some_attributes_chosen = true;
}
data[ attribute_name ] = $( this ).val();
});
if ( all_attributes_chosen ) {
// Get a matchihng variation via ajax
data.product_id = $product_id;
$xhr = $.ajax( {
url: wc_cart_fragments_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_variation' ),
type: 'POST',
data: data,
success: function( variation ) {
if ( variation ) {
$form.find( 'input[name="variation_id"], input.variation_id' )
.val( variation.variation_id )
.change();
$form.trigger( 'found_variation', [ variation ] );
} else {
$form.trigger( 'reset_data' );
$form.find( '.single_variation_wrap' ).after( '<p class="wc-no-matching-variations woocommerce-info">' + wc_add_to_cart_variation_params.i18n_no_matching_variations_text + '</p>' );
$form.find( '.wc-no-matching-variations' ).slideDown( 200 );
}
}
} );
} else {
$form.trigger( 'reset_data' );
}
if ( some_attributes_chosen ) {
if ( $reset_variations.css( 'visibility' ) === 'hidden' ) {
$reset_variations.css( 'visibility', 'visible' ).hide().fadeIn();
}
} else {
$reset_variations.css( 'visibility', 'hidden' );
}
} else {
$form.trigger( 'woocommerce_variation_select_change' );
$form.trigger( 'check_variations', [ '', false ] );
$( this ).blur();
}
// Custom event for when variation selection has been changed
$form.trigger( 'woocommerce_variation_has_changed' );
} )
And then my own attempt to utilise this event:
$('#pa_colour').select2();
$('#pa_colour').on('change', function(){
var $form = $(this).parents('form');
$form.trigger( 'woocommerce_variation_select_change' );
$form.trigger( 'woocommerce_variation_has_changed' );
});
Unfortunately the site isn't live yet so I can't provide a link but hopefully you get the idea.
If someone can help me here I'd be so appreciative, I'm not exactly sure how Wordpress hooks (if this is what this is) work and I may be just missing something obvious.
Thanks,
Kathryn
This isn't a solution exactly, but I ended up replacing the Select2 plugin with the Selectric plugin and that works perfectly. Oh well! Thanks guys. http://lcdsantos.github.io/jQuery-Selectric/
I came across the same issue and found a solution in the last comment in this thread Select2 not showing selected value
The comment by Matt inspired by Kevin suggested wrapping the select2 call in $(window).bind("load", function() {...}); which worked for me.
Kudos to those guys.

How to use keyup in ckeditor

I am using angular js for development.
Initializing ck editor on controller
function initEditor(){
CKEDITOR.replace( 'editor1', {
on: {
pluginsLoaded: function( evt )
{
var doc = CKEDITOR.document, ed = evt.editor;
if ( !ed.getCommand( 'bold' ) )
doc.getById( 'exec-bold' ).hide();
if ( !ed.getCommand( 'link' ) )
doc.getById( 'exec-link' ).hide();
}
}
});
}
Html
<textarea cols="100" id="editor1" name="editor1" rows="50"></textarea>
I have tried several way to find key up but not working
CKEDITOR.instances["editor1"].on('keyup', function() {
alert('key up');
}
I have refereed some other SO answers also , nothing seems to be working . Is it because of i am using angular js controller .
Please suggest a way to do this
I got the solution
var editor = CKEDITOR.instances["editor1"] ;
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editor.document, 'keydown', function() {
console.log('key up');
} );
} );

Categories

Resources