JavaScript with json call working in head but not if in separate .js file [duplicate]

Hello guys I need some help from you. First of all I am a newbie in js programming.

I have this script that retrieves the data I write in the text boxes and then shows it.

So, my script looks like this:

$(document).bind('em_booking_success', function() {
post_data = $('.em-booking-form').serializeArray();   
//Get the price    
priceHolder = $('.em-booking-form > div.em-booking-form-details > p.ticket-price').find("strong").html();

var thenum = priceHolder.replace( /^\D+/g, '');    
var priceInt = parseInt(thenum, 10);    
var data1 = page_id.the_id;

    $.ajax({    
        type: "GET",    
        url: "<?php echo admin_url( 'admin-ajax.php' ) ?>",    
        data: {    
            'action':'ajax_get_page',                        
            'page_id' : data1    
        },    
        success:function(data) {    
            // This outputs the result of the ajax request    
            var page = $.parseJSON( data );    
            //update with the new one   
            $("#main > section.content-holder > div.container-fluid").empty();  ....

As you can see I am making an ajax call to retrieve the data and the I am loading it with the content of the page I created in Wordpress.

The problem is if I write this script between tags it works like a charm, but, if I make separate .js file with this script in it and enqueue that file with "wp_enqueue_script" function I get an error:

Uncaught SyntaxError: Unexpected token <

and it points me to the .

I did a lot of searching on the internet but I can not find any solution, but everywhere it's said that this has something to do with the json part of the script.

Thank you in advance guys!