CODEWITHSUNDEEP
wordpressshortcode
user2593040
user2593040

Reputation: 199

Is there a way to load a shortcode onclick event in javascript?

I am trying to use a shortcode for a Masonry Gallery. I want to create 4 tabs. Once you click on tab #2, it should display a div and hide the others (which are already hidden by css). But when I click on tab #2, 3, or 4, the masonry gallery doesn't display until you click on a sort menu associated with the gallery. So Is there a way to add a simple function to this code so that I can load the shortcode upon click?

All I am doing with the tabs in the html is calling the function on click event. Sample Html: onClick="displayClothing()"

JAVASCRIPT:

function displayClothing() {
document.getElementById("tab-1").style.display = "block";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx1") {
    //Load gridfx id #1 shortcode  by calling script
 }
}
function displayPocket() {
document.getElementById("tab-2").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx2") {
    //Load gridfx id #2 shortcode  by calling script
 }
}
function display287art() {
document.getElementById("tab-3").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-4").style.display = "none";
document.getElementById("grid-fx3") {
    //Load gridfx id #3 shortcode by calling script
 }
}   
function display350art() {
document.getElementById("tab-4").style.display = "block";
document.getElementById("tab-1").style.display = "none";
document.getElementById("tab-2").style.display = "none";
document.getElementById("tab-3").style.display = "none";
document.getElementById("grid-fx4") {
    //Load gridfx id #4 shortcode by calling script
 }
}

AND WHAT I WANT TO DO IS LOAD THIS BUT THERE WILL BE 4 DIFFERENT SHORTCODES IN DIFFERENT DIV'S:

 [gridfx theme="light" posttypes="product"  show_title="1" columns=6 integrate="woocommerce" item_custom_field="woocommerce" single_item_custom_field"=woocommerce" excerpt_over_image="30" sortmenu="1"]

Upvotes: 0

Views: 5298

Answers (1)

hemnath mouli
hemnath mouli

Reputation: 2755

functions.php 

function its_my_shortcode(){
echo "HI";
}

add_shortcode('myshortcode', 'its_my_shortcode');

function ajax_r(){
do_shortcode('[myshortcode]');
}

add_action ( 'wp_ajax_myshortcode', 'ajax_r' );
add_action ( 'wp_ajax_nopriv_myshortcode', 'ajax_r' );

function make_on_init(){ 
echo "<script>var ajaxhandle = '".admin_url('admin-ajax.php')."';</script>"; 
} 

add_action('wp_head', 'make_on_init');

JQuery

jQuery(document).ready(function($){
$("#element").click(function(){
var params = {
            type: 'POST',
            url: ajaxhandle,         
            data:  {
                "action" : 'myshortcode'                                
            },
            //dataType: 'json',
            timeout: 30000,
            beforeSend : function(){  

            },
            success: function( res ) {  
                $("#tabcontent").html(res);
            }

        };
        $.ajax( params ); 
});
});

This will show "HI" in the #tabcontent from myshortcode short code.

Upvotes: 3

Related Questions