Develop Reference

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

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.

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

Why will the CSS/Javascript and HTML only pass some properties, but not all?

I have downloaded source code for a hidden search bar, that when clicked, reveals a text input bar.
I have copied this html into my homepage.html:
<div id="reserveButtonOuter">
<button id="reserveButton">Reserve a Table</button>
</div>
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
This is connected to my HomePage.js file, in which I have the code below:
;( function( window ) {
function UISearch( el, options ) {
this.el = el;
this.inputEl = el.querySelector( 'form > input.sb-search-input' );
this._initEvents();
}
UISearch.prototype = {
_initEvents : function() {
var self = this,
initSearchFn = function( ev ) {
if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
ev.preventDefault();
self.open();
}
else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
self.close();
}
}
this.el.addEventListener( 'click', initSearchFn );
this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
},
open : function() {
classie.add( this.el, 'sb-search-open' );
},
close : function() {
classie.remove( this.el, 'sb-search-open' );
}
}
This is only a small part of the code, as it is several hundred lines.
The .css file is linked to my page fine as it is working for my other elements. The search bar is rendering as nothing more than an orange square, which when clicked shows no errors on the console. Im not sure what that means for the Javascript?
Any advice would be great, thanks!

My advice for you is to check in the developer tools what css is enforced on the element.
Maybe you are loading some values with higher priorities, or maybe your selectors are not correct, or you might have js exception thrown, before the css loading..

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.

Hover on dynamic link generated

I want to create a hover similar to the example here in the jQuery. But the link is dynamically generated so I'm really having a hard time figuring this out.
I tried this:
$(document).ready( function() {
$('a.g-tabs').on('hover', 'a', function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
},
function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
});
});
But its not working. Seems like my selector is the problem. How can I select it properly?
UPDATE:
This JS is handles for the view to not refresh if the tab is created:
$(document).on('submit','#pop-form', function(e) {
// make an ajax request
$.post('../admin/FLT_add_tab.do',
$('#pop-form').serialize(),
function( data ) {
// if data from the database is empty string
if( $.trim( data ).length != 0 ) {
// hide popover
$('#popover').popover('hide');
//append new tab and new tab content
var id = $(".nav-tabs").children().length - 1;
$('#popover').closest('li').before('<li>' + data + '</li>');
$('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> <c:import url="flt-pis.html"></c:import> </div>');
} else {
// error handling later here
}
}
);
e.preventDefault();
});
Not this one is the HTML that handles the tabs if the user goes to this page in first hand:
<!-- Other tabs from the database -->
<c:forEach var="tabNames" items="${ allTabs }">
<li> ${ tabNames.key }</li>
</c:forEach>
<!-- Add new tab -->
<li>New <i class="icon-plus-sign"></i></li>
As requested the server side code:
#ResponseBody
#RequestMapping( value = "/admin/FLT_add_tab", method = RequestMethod.POST )
public String createNewTab( #RequestParam
String newTab, HttpServletRequest request )
{
HttpSession session = request.getSession();
String returnVal = Credentials.checkSession( session );
if( returnVal != null )
{
return returnVal;
}
String tabName = null;
try
{
DataSource dataSource = DatabaseCommunication.getInstance().getDataSource();
QuestionnaireDAO qDAO = new QuestionnaireDAO( dataSource );
if( qDAO.getTabName( 0, newTab ) == null )
{
qDAO.insertQtab( newTab );
tabName = newTab;
}
}
catch( Exception e )
{
// no logger yet
e.printStackTrace();
}
return tabName;
}

If it is dynamically created the you have to use the delegate
$(document).on('mouseenter', 'a.g-tabs', function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
});
$(document).on('mouseleave', 'a.g-tabs', function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
});

try this code
$('a.g-tabs').on({
mouseenter: function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
},
mouseleave: function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
}
}, "a");
this code from Is it possible to use jQuery .on and hover

use CSS.
.g-tabs a>.icon-clear-remove
{
display:none;
}
.g-tabs a:hover>.icon-clear-remove
{
display:inline-block;
}
E > F Matches any F element that is a child of an element E.
E:hover Matches E during user hovers E.
So, E:hover>F means that while user hovers E, apply rule to F.
Try it here http://jsfiddle.net/7bVTj/