Okay
  Public Ticket #3356187
Table showing unformatted
Closed

Comments

  • Jeff Margel started the conversation

    I am using wpdatatables with Popup maker (remote content).  Popup maker gave me code so that I could do an ajax call and send a dynamic wpdatatable shortcode.  

    The issue is, nothing appears in the popup.  However in the wpdatatables settings, if I disable 'Hide table until fully loaded', the table will show but it will be unformatted.  How can I fix this?  

  • Jeff Margel replied

    Doing a little more digging, it seems like wpdatatables is not rendering the table correctly, which is why it's not showing when the 'Hide table until fully loaded' is set to on.

    Running my page and looking at the developer tools, I see this:  If I change the display: to anything else it outputs the table but it's unformatted.

    <table id="table_1" class=" responsive display nowrap data-t data-t wpDataTable wpDataTableID-3" style="display: none;" data-described-by="table_1_desc" data-wpdatatable_id="3"></table>
    
  • Jeff Margel replied

    Can I please get some help?  I have the paid version of this plugin.

  •  1,849
    Miloš replied

    Hi, Jeff.

    Just to confirm, you are referring to this Popup Maker plugin?

    -

    We currently do not have any kind of integration with this plugin,

    so I am not sure about the level of assistance we will be able to provide,

    since you are using a custom solution for this use-case, including the code for the ajax call to send a dynamic wpDataTable shortcode,

    we will do our best as much as our support can cover.

    -

    We will check with our developers what they can do, they can take a look if perhaps a basic modification is needed to get the result you need,

    but they will need to see more details about how you set all of this up.

    -

    Would it be possible if you could record your screen and send us a Video,  to show us exactly how and where are you implementing the ajax call to  send a dynamic wpdatatable shortcode,

    and if you can send us an URL of this page, so that we can see the issue?

    -

    I am also not sure if I understood;

    did you resolve this issue with the provided HTML with the in-line CSS style,

    or is the issue still unresolved? 

    <table id="table_1" class=" responsive display nowrap data-t data-t wpDataTable wpDataTableID-3" style="display: none;" data-described-by="table_1_desc" data-wpdatatable_id="3"></table>

    If the page has any sensitive data, please send the reply as PRIVATE, just for safety reasons, then only we can see the reply.

    Thank you.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Jeff Margel replied

    I will be happy to share all my code with you.  I have talked to popup maker support and they said: 

    "AJAX will try to load the table asynchronously so the whole page doesn't need to reload. But, if the table is hidden because the table is not fully loaded, the AJAX call won't see the hidden table and returns nothing.
    According to that same reply, the "formatting" issue is because of table conflicts since wpDataTables always returns table_1 for the table ID which is not unique and invalid HTML"

    Anyway, this is my scenario:  I have a webpage and a button (built from visual composer).  When click, it opens a popup maker popup.  Inside this popup (it is remote content) is the following shortcode: 

    [pum_remote_content method="ajax" ajax_function_name="popmake_remote_content_ajax" loading_icon="lukehass/load1" min_height="600"][/pum_remote_content]
    

    Here is my PHP code:

    function rc_ajax_demo_js() { ?>
      <script type="text/javascript">
     jQuery(document).ready(function ($) {
                $('#popmake-2761').on('popmakeRcBeforeAjax', function () {
                    $.fn.popmake.rc_user_args[2761] = {
     custom: 3,
     name: 'wpdatatable'
                    }; // fn
                }); // Listener
        }); // jQuery
      </script>
    <?php }
    add_action( 'wp_footer', 'rc_ajax_demo_js', 500 ); // Load the script in the footer with a "late" priority.
     function popmake_remote_content_ajax() {
      
     $fname = do_shortcode('[' . $_REQUEST['name'] . ' id='. $_REQUEST['custom'] .  ']');
     echo $fname;
     }

    Popup maker has a tutorial on how to accomplish this and when using plain string text (instead of sending the wpdatatable shortcode in the rc_ajax_demo_js() it works fine as an example here: Remote Content -- AJAX Type Introduction - Popup Maker Documentation (wppopupmaker.com)

    However like I said when I use your shortcode, it works only when the 'Hide until fully loaded' is set to off, however the table is unformatted and looks awful.  So, it's not the popup that is the issue it's the wpdatatable  not being rendered when using AJAX.  Another support ticket about 3 years ago was submitted by someone else but they some how figured it out on their own but did not give much in terms of sharing their solution.  That can be found here: Nothing here (ticksy.com)

  • Jeff Margel replied

    Are you able to help?

  •  1,849
    Miloš replied

    Hi, Jeff.

    I am honestly not sure if we will be able to provide assistance,

    since this is a custom solution, but we will see what we can do.

    We will escalate this with our 2nd level Team,  and will also ask our developers if they have any kind of working example for what you described,

    or advice on what you might try to modify in your solution.


    Can we also see the page where you have that table, and also if we can have access to the back-end setup?

    Please provide us with the URL of the page that shows the unformatted/ or badly formatted table;

    and a temporary WP-admin (administrator) user for your site where this happens, 

    so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. 

    We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties. 

    You can write credentials here just check PRIVATE Reply so nobody can see them except us.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •   Jeff Margel replied privately
  •   Miloš replied privately
  •   Jeff Margel replied privately
  •   Jeff Margel replied privately
  •   Jeff Margel replied privately
  •   Jeff Margel replied privately
  •   Miloš replied privately
  •   Jeff Margel replied privately
  •   Jeff Margel replied privately
  •  1,849
    Miloš replied

    Hi, Jeff.

    Apologies for the waiting time.

    In the meantime, i sent this to our developer Team.

    They checked all the details as you described for this use-case,

    and i am truly sorry to disappoint you, 

    we did our best to search through all our available working examples,

    and unfortunately, we don't have any example to show you for something similar to this specific use-case.


    We also don't have any built-in solution to achieve this at this time, but you can suggest it to our developers - they will do their best to make a solution in the future.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    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.

    -

    If you have coding skills and wish to try to make a custom solution now,

    you can check out our available hooks for Developers on this documentation and see if you can find any hook that might help.

    Please be advised that custom solutions with hooks are not included in our support.

    You can also research resources such as Stack Overflow to see if any other user perhaps found a workaround.

    ( We do like to give examples for certain solutions, but for this use-case, we, unfortunately, don't have anything yet)

    Maybe this can be done with some custom work, but our developers are very busy at the moment, working on some priority tasks and fixing bugs and issues with our plugins, so they won't be having the time for custom work in the near future.



    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables