Ok guys and gals, I'm losing my mind here...

I am looking to append the content and a custom field of a post to a div on page. The ID of the content and custom field is defined by a data attribute on a link to be selected by the user.

Issue is the output of the function called by ajax is not being populated - instead the entire html of the current page is being duplicated instead.

This is the html of the selectors and output div on the page...

<p><a class="funnel-direction" data-funnel-id="123" href="#">Option One</a> <a class="funnel-direction" data-funnel-id="456" href="#">Option Two</a></p>

<div id="result"></div> <!-- whole page gets duplicated in here - wtf? -->

This is enqueuing my script for the ajax call

add_action( 'wp_enqueue_scripts', 'add_ajax_scripts' );

function add_ajax_scripts() {

   wp_enqueue_script( 'funnel-ajax', DNA_FU . 'js/funnel-ajax.js', array(), '1.0.0', true ); // working fine

   wp_localize_script( 'funnel-ajax', 'funnel_ajax', array(
    'ajaxurl'   => admin_url( 'admin-ajax.php' ),
    'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' )
  ));

}

This is the function being called by ajax - it is this content I want to populate in <div id="result"></div>.

add_action ( 'wp_ajax_nopriv_dna_add_funnel_part', 'dna_add_funnel_part' );
add_action ( 'wp_ajax_dna_add_funnel_part', 'dna_add_funnel_part' );

function dna_add_funnel_part() {

  $id       = $_POST['postid'];
  $meta     = get_post_meta($id, 'dna_funnel_info', true);

  $content  = apply_filters('the_content', get_post_field('post_content', $id));
  $data     = !empty($meta) ?  '<p>' . $meta . '</p>' : '';
  
  echo $content . $data;

  wp_die();

}

finally, here is my ajax .js

jQuery(document).ready(function($) {

  $('a.funnel-direction').on( 'click', function(e) {
  
    e.preventDefault();

    var postid = $(this).attr('data-funnel-id');

    console.log(postid); // working

    $.ajax({
      type: 'POST',
      url: funnel_ajax.ajax_url,
      data: {
        action: 'dna_add_funnel_part',
        postid: postid,
      },
      success: function(data) {

        // console.log(data);

        $('#result').html(data); // This populates the entire html of the current
                                 // page - it should only popualte the output of 
                                 // the dna_add_funnel_part() wordpress function
      },
      fail: {
        // to do ...
      }
    });

    return false; 

  });

});

Have looked over and over this can can't spot anything hope fully y'all can spot it!

Thanks in advance

Ok guys and gals, I'm losing my mind here...

I am looking to append the content and a custom field of a post to a div on page. The ID of the content and custom field is defined by a data attribute on a link to be selected by the user.

Issue is the output of the function called by ajax is not being populated - instead the entire html of the current page is being duplicated instead.

This is the html of the selectors and output div on the page...

<p><a class="funnel-direction" data-funnel-id="123" href="#">Option One</a> <a class="funnel-direction" data-funnel-id="456" href="#">Option Two</a></p>

<div id="result"></div> <!-- whole page gets duplicated in here - wtf? -->

This is enqueuing my script for the ajax call

add_action( 'wp_enqueue_scripts', 'add_ajax_scripts' );

function add_ajax_scripts() {

   wp_enqueue_script( 'funnel-ajax', DNA_FU . 'js/funnel-ajax.js', array(), '1.0.0', true ); // working fine

   wp_localize_script( 'funnel-ajax', 'funnel_ajax', array(
    'ajaxurl'   => admin_url( 'admin-ajax.php' ),
    'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' )
  ));

}

This is the function being called by ajax - it is this content I want to populate in <div id="result"></div>.

add_action ( 'wp_ajax_nopriv_dna_add_funnel_part', 'dna_add_funnel_part' );
add_action ( 'wp_ajax_dna_add_funnel_part', 'dna_add_funnel_part' );

function dna_add_funnel_part() {

  $id       = $_POST['postid'];
  $meta     = get_post_meta($id, 'dna_funnel_info', true);

  $content  = apply_filters('the_content', get_post_field('post_content', $id));
  $data     = !empty($meta) ?  '<p>' . $meta . '</p>' : '';
  
  echo $content . $data;

  wp_die();

}

finally, here is my ajax .js

jQuery(document).ready(function($) {

  $('a.funnel-direction').on( 'click', function(e) {
  
    e.preventDefault();

    var postid = $(this).attr('data-funnel-id');

    console.log(postid); // working

    $.ajax({
      type: 'POST',
      url: funnel_ajax.ajax_url,
      data: {
        action: 'dna_add_funnel_part',
        postid: postid,
      },
      success: function(data) {

        // console.log(data);

        $('#result').html(data); // This populates the entire html of the current
                                 // page - it should only popualte the output of 
                                 // the dna_add_funnel_part() wordpress function
      },
      fail: {
        // to do ...
      }
    });

    return false; 

  });

});

Have looked over and over this can can't spot anything hope fully y'all can spot it!

Thanks in advance

• plugin-development
• theme-development
• ajax
• jquery
• post-meta

• What do you mean by "entire html of the current page"? Do you mean everything including the site header, footer, sidebars etc? Or do you mean the entire content of the page as entered in Pages > All Pages > Edit? I notice your AJAX callback is returning the post_content. Is that what you mean? Or is result just supposed to contain the dna_funnel_info meta? – Jacob Peattie Commented Feb 10, 2021 at 11:46
• Hi Jacob - yes, the entire html header, footer, etc (even the <head>) – richerimage Commented Feb 10, 2021 at 11:51
• Jacob - and yes the content and dna_funnel_info meta. So is the user clicked the button with data-funnel-id="123" then I want to populate with the both the content and metafield of post ID 123