triggering keyup from outside the container of the table

rivaldid

I'm sorry for the weird title but is very weird the behaviour of the filters when I apply searches from DOM objects that are outside from the table container.
Times ago I have asked a question about the individual filters and how fill them dynamically which I have had answer and fixed the issue.
Short intro: my table is very huge about 130k+ record with 33 columns targeted for 30 persons which works from different groups, my idea is make an shared xml with a simple syntax. Datatables side, I load this xml with ajax and parse it to build an hided list nested in a button to dynamically change the individual filters of the footers table.
I'm proud to say it's working.
This button list is going to be long, and it's not so proper nice to see in the page. So I have begun to work on a drop-down menu which is in another container, the container of the navigation bar.
Since I moved this button list in another container as a drop-down menu, the filters has ended up to stop working.
By Firefox Developer version, I looks the network requests:
1) opening the page it loads the table, from the post request I see draw=1;
2) clicking one of the filtering buttons, from the post request I see draw=2 .. n, and by the data sent I see my configuration that is being sent and the resultset that be smaller, it's ok the filters are being applying to the query;
Till now I have ended up the filtering process and I should see the table processed in the page, but the post requests don't finish here.
3) I see two news requests: draw=1 and draw=2 that resets the table and let the user see the table without any filters applyied.

The matter is simple moving this button list in the same container of the table all is working fine, moving it outside as example my case in the navigation bar, the trigger works bad. The do their job but they do two more trigger without parameters and the end is the same table at the beginning.

Here I link my first request here: https://datatables.net/forums/discussion/49193
and a request which looks similar to mine: https://datatables.net/forums/discussion/31650

Hope someone help me, I'm stuck here from a week.
Regards.

colin

Hi @rivaldid ,

We're happy to take a look but it would help with something like this to have a running example to demonstrate the problem. Would that be possible?

Cheers,

Colin

rivaldid

I don't know how recreate this situation in a jsbin application, the html part is produced by some php script, the js part is composed by 18 scripts included with &.getScript(prefix + "my_script.js") into a main.js , this function in the specific is just a script that uses ajax source that take a json direct from the database.
This is the code of this function, hope this help: http://jsbin.com/beneten/edit?js

allan

Can you show me the code that you are using to move the filtering input into a different container? Also the event handlers as well please.

Allan

rivaldid

It's all there the code, I just change the parent variable inside the xml2app function:
the div #show_filters is located into the div which contains the table;
the div #logindone containes the div #nav which contains the navigation bar, inside the navigation bar there is a li element which has an id #call_bdt_ng which has the submenu profiles showed as a drop-down menu.
The div #show_filters is located in the div which contains the table because I print a list of the active filters just above the table to improve the user experience. Appending here also the filtering menu called #profiles the table is triggered correct, by network I show draw=1 draw=2, etc, draw=6 and all my filters are applied.
Appending the filtering menu #profiles to the navigation bar as a drop-down menu the table result looks without any filters applied because are been triggered two more event that resets the filters.

rivaldid

The function profile2filters scans the list created from the xml and input the values into the table filters

rivaldid

Update: using as parent the main div #logindone the function works good. So the problem is when the filtering menu is appended to the ul#nav, it's not working both "ul#nav" than "ul#nav li#spot_bdt_ng", the main navigation menu. So the problem is not the other container, it was driving me crazy because it was a non-sense, jsut another div. Maybe there are difference with the interpreter of ul li list.

rivaldid

This is how the navigation bar is styled: http://jsbin.com/nerubi/edit?css

rivaldid

No way, triggering the event on individual filters from the profiles list that has been appended to the list u#nav make the table a self reset recharging with empty filters. Doing the same outside from the ul#nav make table trigger works fine. Don't know why.
I'm trying to change the declaration of the click event from:
$(parent+" ul#profiles"+" li."+id).click( function () {
to
$(parent+" ul#profiles").on('click', "li."+id, function () {
But it has no effect.

rivaldid

I have also tried to monitor the keyup event by printing in console a string each time it runs, the count of this printing is right not one more not one less.
the event through run one time more, by the network observer I see 2 calling which are referred to this excessive run.
this happens even when the list of filtering profile are nested to the navigation bar

allan

Can you create a running JSBin showing the issue? I'm struggling to piece it all together in my head. I see the event handlers, but its over 300 lines of code and a running test case would be very useful.

Allan

rivaldid

I will make a working prototype and we will discuss about this, now I need to progress the implementation of other stuff. I have lost my head for the last 3 days, I will do later thanks guys.

rivaldid

Hi Allan and Colin,
That's been only my fault, I have make drop-down a menu which wasn't designed as it. When you put the focus on an element of the list (floated as vertical menu), you get the hover which make visible the drop-down with the filtering profile but when you make a click inside you fire both the local element than his parent, in this case you fire the keyup trigger and after the table generation. That's why I get draw=1 after draw=4 or 5 or 6 depending on how much filters are in a profile.
So, sorry again mates. That was not a datatable issue, good news for you.
I would take this opportunity to thank you, thanks to DataTable I got the chance to make looks younger a project not so old but designed with an old technology, and of course to make good impression with my bosses.
Regards.

allan

Thank you . Great to hear that you've got it working now.

Allan