Search not working with JQM

dpeacock

After calling enhanceWithin() it appears that search doesn't work with dataTables. I've provided a jsfiddle below:

https://jsfiddle.net/Ls70bh0q/

The enhanceWithin renders the page with the JQM styles which is required. It looks like the events aren't being fired as it's not entering the search function.

dpeacock

Any thoughts on how to get this working?

allan

It looks like JQM is removing the DataTables default events for the text input. I have no idea why it is doing that I'm afraid - I'll try to make some time to look into it closer later today, but it might be one for the JQM list.

Allan

dpeacock

Hi Allan, thanks for the response. Have you had any luck figuring this out, or what should the next steps be?

allan

No I haven't had a chance to I'm afraid - support requests have been coming in too fast to keep up with recently!

I'd suggest asking a JQM list, I don't understand why it would be performing any action on the existing event handlers. It is quite possible it is a DataTables issue, but given that an external control is doing something that then makes it not work, my instinct is to look into that external control first.

Allan

dpeacock

Thanks Allan, I've posted this to JQM forums as well for reference:

https://forum.jquery.com/topic/jquery-mobile-removing

Did a little digging and enhanceWithin() calls degradeInputsWithin() ... this basically copies the html of the input without copying the event - thus we lose the DataTables events. Lets see if they have any ideas how this should be approached...

didiergm

@dpeacock

With JQM one must not use $(document).ready(function() {..} which is next to useless, but place all code initialisation in $(document).on('pagecreate', .... or pagebeforecreate

If you make that change do you have better luck ?
I found a link here from some guy have used JQM+DataTables:
http://a.kabachnik.info/ajax-data-tables-for-jquery-mobile.html

Hope this helps.

dpeacock

Thanks for the insight. The document ready was merely on my jsfiddle - not in my real example. I've posted some additional details on the JQM forums for this. Basically it boils down to the fact that the search is given a type of 'search'. JQM has a list of input types to degrade, 'search' is one of them. As a result, it copies the dom, replaces the type but doesn't copy the event listeners. I've asked now whether this was by design or not.

Assuming it was by design, I would like to propose the following fix in searchFn replace:

    var input = '<input type="search" class="'+classes.sFilterInput+'"/>';

with:

    var inputType = typeof(jQuery.mobile) === "undefined" ? "search" : "text";
var input = '<input type="' + inputType + '" class="'+classes.sFilterInput+'"/>';

I've tested and this solves my problem. @allan what do you think?

allan

I don't really want to put a workaround in for another framework into the DataTables code (I already get frustrated enough about having to put workarounds in for the various browsers ;-) ), but I will consider adding an option to allow the type to be set. I rather wish I hadn't made the input type search - its a pita to style and this as well.

Here is a workaround without changing the DataTables library: http://live.datatables.net/peqidomo/1/edit .

Thanks for digging into this - interesting findings!

Allan

dpeacock

I had put a similar proposal for changing the type in jQuery on the existing DOM node vs. replacing it. However, apparently they said this was done on purpose as this functionality isn't supported in internet explorer.

https://github.com/jquery/jquery-mobile/issues/8317#issuecomment-150357943

It sounds like they are deprecating some of this functionality in 1.5, however when I checked the 1.5 source the degrade inputs still was doing the same thing on search boxes.

I think your proposal of being able to set a configuration for the search boxes type, I would definitely vote for this option if possible!