Js file is not adding using this code in functions.php

One of the things that confused me when using ajax was that die() is necessary at the end of the ajax callback function.

Another issue is with the path(s)
If you use get_template_directory_uri() and you use a child theme then you get the parents folder.

If you use get_bloginfo('stylesheet_directory') and you us a child theme then you get the current child theme being used which I believe would be true for most of the time.

Here is my attempt to show an example that I hope will help you…

Put this in (preferably in a child theme) functions.php

function jquery_stuff() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('scriptX', get_bloginfo('stylesheet_directory') . '/jsfile.js');    
}
add_action( 'init', 'jquery_stuff');

//tells WP that this an function used for ajax
add_action('wp_ajax_coolContent', 'coolContent'); 

//Used for returning cool content
function coolContent() { 
   $msg = 'cool content';

   //Return content
   echo json_encode($msg);
   die();
}

jQuery (jsfile.js)

var coolContent = $.ajax({            
    type: 'POST',
    data:{
        action: 'coolContent',        //This is the function that should be called on serverside    
    },
    url: '/wp-admin/admin-ajax.php', //tells WP that it is ajax
    dataType: 'json'
});

coolContent.done(function(data) {  
    alert(data); //Should alert text "cool content"
});                        

coolContent.fail(function(ts) {           
    alert(ts.responseText);
});