kebhin

I was able to solve this issue myself with Javascript, this was plugin version 5.2.5

However when I upgrade to 5.5.3, it no longer works and in fact the table is not displayed at all. I found that the “dom” option may not be supported so I removed that from advanced options. Then the table and search builder panes are displayed but the search builder is not initialised as specified in the options.

I’ve removed the Javascript from the page – so that’s not the issue. I don’t see any relevant exceptions in the Java console either.

It looks like the advanced options are no longer supported in 5.5.3, or if they are there must be a change to syntax or semantics. The documentation has not been updated since around 2020

Can you help on this? Do you want me to go to Premium Support for these advanced issues?

Hi Kim

I looked at this and the Datatables references and came up with this starting point to change the values from javascript:

Add this line to advanced options (I also tried “initComplete”):

“drawCallback”: “function(settings,json) {settable(settings,json)}”,

This is the function ‘settable’:

function settable(settings,json) {
    var table = jQuery('#'+settings.sTableId).DataTable();
    var s = table.searchBuilder;
    if (s != null) {
        var c = s.getDetails();
        c[0].value[0]='2024-01-01';
        s.rebuild(c);
    }
}

The intention is to change the starting date of the search to 2024-01-01 however it does not work, an exception is thrown and the searchbuilder is not displayed: Here is the exception from java console:

dataTables.searchBuilder.min.js:127 Uncaught TypeError: Cannot read properties of undefined (reading 'getDetails')
    at c.getDetails (dataTables.searchBuilder.min.js:127:449)
    at B.<anonymous> (dataTables.searchBuilder.min.js:146:157)
    at Object.getDetails (jquery.dataTables.min.js?ver=5.2.5:122:332)
    at settable (full-detail/:253:19)
    at Object.eval [as userDrawCallback] (eval at convert_string_to_function (wpda_datatables.js?ver=5.2.5:732:13), <anonymous>:3:33)
    at e.<computed>.drawCallback (wpda_datatables.js?ver=5.2.5:678:36)
    at jquery.dataTables.min.js?ver=5.2.5:91:103
    at Function.map (jquery.min.js?ver=3.7.1:2:3971)
    at F (jquery.dataTables.min.js?ver=5.2.5:91:50)
    at ja (jquery.dataTables.min.js?ver=5.2.5:44:108)

I understand that this a fairly complex case and I’m asking a lot of support, but is there anything similar someone has done or perhaps a completely different approach for initialising the searchbuilder?

Hi again (after 3 months)

This works of course but as documented it does not affect the columns for any export options.

Is it possible to make it apply to exported columns as well? I’m thinking that it could be done in the Advanced options json, but I can’t find any options to make it work (I’ve found some datatables examples but no luck and I think there is interference between that and wpda)

If possible could someone tell me precise json to achieve this? I want it for either pdf or print export

Thanks

Kebhin

Hi Kim/Peter

I appreciate your responses, I was able to get this working with the right combination of settings, and by reconciling the data designer with the table itself – the topic can be closed

Thank you

Kebhin

Hi Kim

Any update on this – an answer like ‘Yes it is a bug too tough to fix in parent/child would suffice’ as it isn’t a showstopper

Thanks. I don’t see a button named Submit > List, only Submit > Child List or Submit >Parent List. Do you mean one of those? If so neither seems to take me to edit the parent. Or is Submit > List referring to a more recent version?

Looking at the reference you found I can see how to hide all Search buttons with .search-box {display:none}. But I don’t know how to distinguish the child form button. That CSS also hides the Search button on table display which I want to keep. Can you identify the appropriate selector?

Thanks again for your help

Yes that’s perfectly fine. I thought I would check as the contact form post probably didnt make sense on its own

Thanks for all your help

Kebhin

Just checking you did get the URLs from the contact form I sent a couple of days ago?

Hi Kim

I don’t think I can include a screenshot in a contact form, its plaintext only isn’t it?

Last message is missing the screenshots, it won’t allow me to upload an image and when I tried a URL from google drive (sharing access granted) it doesnt seem to work either. Can you give me an email address to send it to?

Hi Kim

Here is a screenshot of the page before adding a new passenger. You see that all the input boxes are white background and editable

After adding a passenger you can see the main table fields are greyed out

Also you can see the search box in the bottom right, associated with the child table

Thanks

Kebhin

Thanks Kim, that does the job perfectly

Hi Peter

Thank you – that works for me. Interestingly I had already tried that last jQuery at the beginning of the ready function but that didn’t seem to work

I appreciate all your help – this is really useful now and when I have tuned it, will post the full solution

Best regards
Kevin

Hi Peter

None of those things work as they stand – however they did give me an insight as to what is going on. I am not proficient enough in CSS or Javascript to determine the solution, but I’m hoping if I explain in detail you or someone can advise on the correct answer.

To recap we are trying to get multicolumn forms, but with the Show More/Less button functionality still working, initially hiding columns that have been ticked in the ‘Less’ column of the form template

In the normal case, such fields are marked with tr class of “row-show-less-more”. The CSS has ‘display:none’ for this, so the row is not displayed. When the Show More button is clicked, it executes jQuery(‘.row-show-less-more’).toggle() which introduces style=”display:table-row” to the tr element – revealing the missing rows. All as expected

In the multicolumm case, the principle is to introduce .wpda_simple_table tr CSS with a suitable width attribute and display:grid to get multiple tr into the same screen row
However this display:grid overrides the display:none of the row-show-less-more class and so you see all rows initially. If you click the Show More button, the toggle function still works and you get a style=”display:none” to hide the affected rows. But this means everything is backwards – rows are displayed initially and the Show More/Less button works the wrong way round.

Kevin

Thanks for this – but as reported in some follow up emails the CSS solution causes the ‘Show more’/’Show less’ buttons to go wrong (the less and more is inverted). Indeed the CSS seems to recognise this by hiding the buttons!

The more/less feature is very important to me as I want to hide the more obscure fields that aren’t used much.

Is there any way this could be fixed, or worked around in some way?