Need to create ajax load on click to custom shortcode

[drmohamedgamalelsher]

Need to create ajax load on button click to load custom shortcode

[Gandalf]

Hello @drmohamedgamalelsher, welcome to the forums.

I have unlisted your topic for the present as it doesn’t give much detail about what you are trying to achieve. Please provide as much detail as you can to enable people to help you.

[drmohamedgamalelsher]

function cxp_add_bootstrap_modal(){

  ?>

  <button type="button" class="btn btn-primary read_article" data-toggle="modal" data-target="#cxpModal[wpv-post-id]">

  Display Post Content

</button>

  <!-- Modal -->

  <div class="modal fade" id="cxpModal[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="cxpLabel" aria-hidden="true">

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

        </div>

        <div class="modal-body" id="modalBody[wpv-post-id]">

          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">x</span></button>

        </div>

      </div>

    </div>

  </div>

<?php

}

add_action('wp_footer','cxp_add_bootstrap_modal');

function cxp_show_post_in_modal( $atts ) {

  $attributes = shortcode_atts( array(

      'id' => 0,

      'text' => "Open post in modal",

      'class' => "btn btn-primary",

      'style' => ''

  ), $atts );

  $ajax_nonce = wp_create_nonce( "cxp-bootstrap" );

  ?>

  <script>

  function cxp_show_post_js(id){

  jQuery.ajax({

    url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",

    data: { id:  id, action: 'cxp_show_post', security: '<?php echo $ajax_nonce; ?>'},

        

    success: function(response){

      if(response['error'] == '1'){

        jQuery('#modalTitle').html("Error");

        jQuery('#modalBody').html("No post found! Sorry :(");

      } else {

        jQuery('#modalTitle').html(response['post_title']);

        jQuery('#modalBody').html(response['post_content']);

          

      }

      jQuery('#cxpModal').modal('show');

          

        }

      });

}

  </script>

    <a style="<?php echo $attributes["style"]; ?>" class="<?php echo $attributes["class"]; ?>" onClick='cxp_show_post_js(<?php echo $attributes["id"]; ?>)'><?php echo $attributes["text"]; ?></a>

  <?php

}

add_shortcode( 'cxp_post', 'cxp_show_post_in_modal' );

add_action('wp_ajax_nopriv_cxp_show_post', 'cxp_show_post');

add_action('wp_ajax_cxp_show_post', 'cxp_show_post');

function cxp_show_post(){

  check_ajax_referer( 'cxp-bootstrap', 'security' );

  $id = $_GET['id'];

  $post = get_post($id);

  if($post){

    wp_send_json(array('post_title' => $post->post_title, 'post_content' => $post->post_content));

  } else {

    wp_send_json(array('error' => '1'));

  }

  wp_die();

}

[Gandalf]

I take it this code does not do as you want? Please explain what you expect it to do and what it is - or is not - doing.

[drmohamedgamalelsher]

I need to display modal content including shortcode that only loaded when I click the button to load it

when modal div is .modal-open