Unable to pass the value from .module file to JS using the implementation given below

Question

.module file

function taxonomy_fancybox_menu(){
     $items['fetch-popup-markup-data/%'] = array(
  'title' => 'Store markup',
  'page callback' => 'ajax_fetch_markup_popup_data',
  'page arguments' => array(2),
  'access arguments' => array('access content'),
  'type' => MENU_CALLBACK,
);
return $items;
}

function ajax_store_markup_popup_data($fieldname){

  $field = $_POST['field'];

  // $html = $_POST['html'];
     $output = theme('taxonomy_fancybox_term_field_display_template',array(
     'rows' => $_SESSION['taxonomy_fancybox'][$field]['rows'],
     'field'=>$field
    )
   );
     drupal_set_message($field);
   drupal_set_message($output);
   watchdog('taxonomy_fancybox','<pre> OUTPUT:'. $output . '</pre>');
   drupal_json_output(array('output'=>$output));
  // $_SESSION['taxonomy_fancybox'][$field]['html'] = $html;
  // drupal_json_output($html);
}

JS Implementation:

$('.popup-data').each(function(){
           var field = $(this).attr('field');
           var html  = $(this).html();
           $.ajax({
             type: 'POST',
              dataType: 'json', 
             data: {field: field},
             url: '/fetch-popup-markup-data/'+field+'/',
             success: function(ht) {
              alert(ht);
              alert('got the html if not check in the console');
              console.log(ht);
              if (ht !=''){
                $('#'+field+'-popup-data').html(ht);
              }
             }
            // Change site name to current user name.
           });
        });

Whatever data I am passing in drupal_json_output() does not pass to JS and when I try to check the value in watchdog, I see the data, also see it in drupal_set_message() but when I check the html on the success function of the POST by sending alert() it returns empty value,even the console.log() returns empty value, what can be the reason for the empty value ?

Answer 1

Router:

$.ajax{{
...
 url: '/fetch-popup-markup-data/'+field+'/'

vs router

$items['store-popup-markup-data/%'] = array(..

not dissimilarity. change dataType dataType: 'json' to dataType: 'html'

You can try code below:

$('.popup-data').each(function(){
  var field = $(this).attr('field');
  var html  = $(this).html();
  $.ajax({
     type: 'POST',
     dataType: 'json', 
     data: {field: field},
     url: '/store-popup-markup-data/'+field+'/',
     success: function(ht) {
       alert(ht);
       alert('got the html if not check in the console');
       console.log(ht);
       var jsonHt = $.parseJSON(ht);
       if (jsonHt.output !=''){
         $('#'+field+'-popup-data').html(jsonHt.output);
       }
     }

   });
 });