Hi Paul.

Sorry for the delay.

-

Can you first try this?

If your dropdowns are not correctly working on front-end,

in the main plugin settings, find an uncheck/disable this :

Include full bootstrap front-end

Let me know if this helps;

if not, then check if the table dropdown works on back-end and the issue is just on front-end?

If that is the case,

wpDataTables is a WYSIWYG (What You See Is What You Get) concept-based plugin. This means that the table should look the same both in the back-end and in the front-end. If your front-end table looks and behaves differently than in the back-end, this usually implies that there is another plugin (or the current theme) that's changing the behavior of our plugin.

Can you please change the theme and see if the issue is resolved? If not, then please deactivate all other plugins except for our plugin, refresh the page where the issue is, and see if it is resolved (it should be). If it is, then start activating other plugins one by one, and after each activation refresh the page to see if the issue reoccurred. Once it does reoccur, you will have found the plugin causing the issue.

Let me know If this helped to isolate the issue? Thank you.

Hi, Paul.

Thank you for doing the steps, and for finding the conflict.

It now depends if this Theme is crucial for your site for what we might do next.

-

1. If the Theme is not crucial, can you please try to find an alternative Theme that doesn't have a conflict with our plugin?

2. If it is crucial and you have to use this Theme combined with wpDataTables on the same site,

unfortunately, issues like conflicts with third-party plugins or themes are always possible due to the nature of WordPress,

 and it might take significant time ( depending on the root of the issue) to investigate and replicate the issue on our side, 

( but most of the time our devs can quickly solve it)

we will do our best to try to debug the issue as quickly as possible and i will keep you posted on the progress.

If you wish us to do that, you can send me the Theme files if it is a premium/paid Theme,

or if it's a free Theme, could you send me an URL to the Theme page and we can download it;

 and I'll forward it to our developers for testing.   I can't promise anything, but we will do our best and i would keep you posted

( If you send us paid Theme files, please make sure to mark reply as PRIVATE -- for security reasons).

-

Let me know what you decide to do, we will be here to provide help if needed.

Thank you

Hi, Paul.

My sincere apology for the waiting time.

Thank you for that screenshot - that definitely shows the root of the issue.

Our plugin currently has issues if you have any Bootstrap version higher than 3.

Our developers will work to upgrade our Bootstrap to the latest version, but i can't say an ETA when that will be finished.

You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

-

It seems you have Bootstrap 4 , because it requires popper.js since it contains dropdown.js library which is dependant on it, that is coming up in the error.

We had several users with this issue, and they reported that this solved it for them, here is what you can do.

Please go to the back-end table settings, then in Customize section above the table(s), 

and in the Custom CSS section add this:

.wpDataTablesFilter[data-wpdatatable_id="8"] .dropdown-toggle::after {
    display:none !important;
}
.wpDataTableID-8 .dataTables_length .length_menu.show{
    display:inline-block !important;
}
.wpdt-c .bootstrap-select > .btn-default:after {
    display:none !important;
}

( Change the table ID to your table ID)

Then, in the functions.php file of your current theme or child theme, add this:

function bootstrap_dequeue_script() {
    $page_content = get_the_content();
    $pageContainsWpdt = has_shortcode($page_content, 'wpdatatable');
    if ($pageContainsWpdt){
        wp_dequeue_script('bootstrap-js');
        wp_enqueue_script( 'bootstrap-popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js', array('jquery'), null, true );
        wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery','bootstrap-popper'), '3.3.5', true );
    }
}
add_action( 'wp_print_scripts', 'bootstrap_dequeue_script', 100 );

( We recommend using a child Theme, because if you update your main Theme, this added code will get overridden, while in a child Theme it is not affected by updates)

Or, i guess if you don't have access to the FTP ( either FTP credentials for a client such as FileZilla or similar) ,

and you also don't have access to Hosting Panel, 

so you could check if you have the Theme File Editor available in the WP back-end, 

and edit the Theme's functions.php there,

but we advise caution, if possible, try to make a site backup before you do that.

Here is my screenshot of how it looks if i try this with my default WP Theme :

After that, in the main plugin settings/Custom JS and CSS/Custom JS,  add this code :

jQuery(window).on('load',function(){
    setTimeout(() => {
        if(document.getElementById("wdt-bootstrap-css"))
        document.getElementById("wdt-bootstrap-css").remove();
    }, 1000);
});

Also, please disable this option,  in the main plugin settings/Custom JS and CSS/Use minified wpDataTables Javascript.

And lastly, disable the 'Include full bootstrap.js on the front-end' of our plugin in the main settings :

There is a chance that on some elements in our tables, the CSS styles might not be completely as they should usually look, 

because we mainly configured all of this to avoid the Bootstrap conflict, 

but let us know if you notice anything like that and we will do our best to help.

Let me know how it goes.

Hi, Paul.

Firstly my sincerest apology for the waiting time.

Thank you for this update, i am sorry to see that the issue with the dropdowns is still not resolved.

Could you clone your website so that our developers can install it on our Test environment and try to debug the issue?

If yes - I'll ask you to install the All-in-One WP Migration plugin.

  It will generate a cloned copy of the website that you can send me (along with the Administrator log-in credentials), 

and then we can create an exact copy of your website, see what the issue is and try to resolve it.

Please note that the files will be too large to attach to the ticket, so you can upload them via anything like wetransfer.com or Google Drive for example, and just send me the link.

And let us know what is the page name, for the front-end where you placed the table shortcode or send us the URL.

Just make sure to send it as PRIVATE reply, for safety reasons, so that nobody can see it but us.

Thank you.

Hi, Paul.

I completely understand.

We will also check with our developers to see if they can provide any other advice,

anything else that you could try which was not already mentioned.

I will let you know if they add any advice in the meantime,  and let us know if you can provide us with a cloned copy of the site.

Thank you.

Hi, Paul.

Our developers advised.

The best method will be if you send us the "All In One Migration" copy of the site, so that they can inspect and try to debug the issue.

In the meantime, we found one other case where a user was using a "Xamin" theme, i will share what my colleague told the user, and what the user did later on to fix it.

At first, my colleague said this :

" Bootstrap v4 requires popper.js since it contains the dropdown.js library which is dependent on it. You need to make some changes to the theme. In file the functions.php file (usually in wp-content/themes/xamin/functions.php) you'll see something like this:

wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery'), '3.3.5', true );

Above that line add this:

wp_enqueue_script( 'bootstrap-poper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js', array(), null, true );

This will be overwritten when the theme is updated, so maybe a better solution would be to add the following hook to the functions.php file of your theme or the child theme:

function bootstrap_dequeue_script() {
   $pageID = get_the_ID();
   // here will be replaced id of the page where is our table
    // Can be found when you edit that page in URL for post parametar
    // Example if id is 1 (..post.php?post=1&action=edit..)
   if ($pageID == 1){
       wp_dequeue_script('bootstrap');
       wp_enqueue_script( 'bootstrap-popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js', array('jquery'), null, true );
       wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery','bootstrap-popper'), '3.3.5', true );
   }
}
add_action( 'wp_print_scripts', 'bootstrap_dequeue_script', 100 );

You need to make sure the bootstrap file is located in the correct path, so double-check "assets/js/bootstrap.min.js".

Then, when you access the table and go to the Customize/Custom CSS field, add this:

// For example we insert id of the table 1, but you need to replace it with your table id
.wpDataTablesFilter[data-wpdatatable_id="1"] .dropdown-toggle::after {
    display:none !important;
}
.wpDataTableID-1 .dataTables_length .length_menu.show{
    display:inline-block !important;
}

It should be working fine after that."

-

But this user reported back after that step, and they said this :

"I was able to get the dequeue to work but I had to comment the bootstrap enqueue - leaving it made the edit modal button not work. And then I had to tweak the Custom CSS to

.wpDataTableID-1 .dropdown-toggle::after {
    display: none !important;
}

And that made the double carets disappear".

After that, they also had to do this :

"I need to leave "Include full bootstrap on Frontend" on, and just not include Xamin's version for things to work. I'll make a child theme with these changes."

-

Then it worked for them, but as mentioned earlier, we are not 100% sure which changes will work for this particular site,

so if you wish you can try one of these variations/steps in the meantime,

and i forgot to ask is the site on a live server, and if so, could you send us an URL of a front-end page where the issue happens,  at least our devs can take a look at the page, while we wait for the cloned site?

If the page has any sensitive data, please mark the reply as PRIVATE.

Thank you.