Codeigniter base url didn't recognized in javascript

I have an ajax request in my CI application ,here is my cstom.js file for that purpose.

$(document).ready(function(){
    var base_url='<?php echo base_url();?>';
   $('#add-ct').click(function(){      
      $.ajax({
          url:base_url+'stockmanagement/add_category',
          data:{category:$('#category').val()},
          success:function(data){
              alert(data);
          },
          error:function(err){
              alert('error'+err);
          }
      });
   });
});

But the base_url didn't recolonized, when i check the debug console the base_url is printed as the same as the source code like this way.

var base_url='<?php echo base_url(); ?>';

UPDATE

my javascript file is included in a view file

<?php if($page=='add-category'){ echo '<script src="'.base_url().'/assets/js/custom.js"></script>'; }?>

Solution

The problem is that you are trying to run PHP code inside a JS file. This will not work as PHP code can only run inside files named with a .php extension.

To fix this, you have to set a global variable in Javascript to hold the value of your base_url

so if you want to include a JS file you should first define the variable like in the following example:

index.php

<html>
  <head>
    <!-- SET GLOBAL BASE URL -->
    <script>var base_url = '<?php echo base_url() ?>';</script>
    <script src="/assets/js/custom.js"></script>
  </head>
  <body>
  </body>
</html>

custom.js

//now we can reference the base_url
alert(base_url+"some/other");