WordPress load PHP plugin on demand with jQuery / AJAX?

Question

I need to load a WordpPress plugin shortcode with jQuery / Ajax / PHP on demand, ONLY when we press a button. This is what I tried:

1) I have an HTML code with a button and a DIV:

<a href="#" class="LoadBtn">Load Gallery Plugin</a>
<div id="PhotoGrid">Plugin shortcode should be loaded here</div>

2) When I press the button, the following jQuery code runs. This communicates with a PHP file and tries to "insert" a shortcode into the DIV:

$(function() {
  $('.LoadBtn').on('click', function() {

    var url = "http://localhost:8888/studio/ajax.php";
    $.post(url, function(data) {
        $("#PhotoGrid").html(data).show();
    });

  });
});

3) PHP code:

echo do_shortcode('[wonderplugin_gridgallery id=1]');

But I run into an error. In the jQuery code, there is a html(data) string. Maybe that's the problem as the shortcode is not an hmtl but a full plugin code? I am new to PHP, what and how to write?

Error message that I get in console:

• send @ jquery.js?ver=1.11.3:5
• send @ jquery.js?ver=1.11.3:5
• ajax @ jquery.js?ver=1.11.3:5
• m.(anonymous function) @ jquery.js?ver=1.11.3:5
• (anonymous) @ my-custom.js
• dispatch @ jquery.js?ver=1.11.3:4
• r.handle @ jquery.js?ver=1.11.3:4

Answer 1

From your earlier post I surmise that your objective is to improve speed ranking by deferring the load of the gallery. This can be done quite easily with a small amount of PHP code - ~ 25 lines but from your comments I surmise that you have not yet acquired the skill level to do this. However there is an ugly, inefficient trick you can use to circumvent this problem. The jQuery .load() function can be used to load just a fragment of an HTML document.

$("#PhotoGrid").load( "<url of page with gallery shortcode>", "<jQuery selector of the gallery HTML" );

The server will send the complete page from which the jQuery .load() function will extract the HTML of the gallery using the jQuery selector and insert it into the "#PhotoGrid" element. This is slightly inefficient as the server builds the complete page and only the gallery shortcode fragment is necessary. To be clear you now need two pages an initial page with the call to the jQuery .load() function and your original page with the gallery shortcode. Your original page is never displayed directly but used as a source from which the HTML of the gallery shortcode can be extracted.

In fact, since the original page is used only as a source for the gallery HTML you can make this more efficient by removing the header, footer and sidebar by using a custom template and having a post content with only the gallery shortcode. You really only need the environment where the shortcode will be evaluated correctly and nothing else. If you do this I suspect this will execute almost as efficient as the solution I suggest next.

Note that this is not as inefficient as loading a page twice as the .js and .css files are loaded only once by the initial page. It is also necessary that the initial page load all the needed .css and .js files as the second load will not load any .css or .js files.

There is one caveat to this technique. If the original HTML page was doing additional processing of the gallery in a $(document).ready() handler then since this handler runs only on the initial load of the document you will also need to execute any necessary code in that handler after the load of the gallery.

If you want to do this more efficiently you need to write some tricky PHP code. The main idea is to use an AJAX request to load the page the shortcode would be in and bypass the normal WordPress template processing using the action 'template_redirect' and replace it with the evaluation of your shortcode. Note that this is not an 'wp_ajax ...' action as that processing will not be done in the context of a post.