How to write Codeigniter code in external js file?

Question

The given code I have written in Php file using codeigniter framework but I want to write below code in external Js file and load in header via script src how to do this in external_script.js I tried this but not getting this way it is refreshing page when I click submit button.

Here this way I am passing base_url to script file external.js

 <script type="text/javascript">
       base_url: '<?= base_url() ?>',
     </script>
    <script type="text/javascript" src="<?= base_url();?>files/external.js"></script>



//Below code in external.js

$("body").on("submit","#submit_form",function(event){
         event.preventDefault();
            $('#sub_btn').prop("disabled", true);
            $.ajax({

                url: <?=base_url('Controller/method name')?>
                type: "POST",
               data: new FormData(this),
                cache: false,
               contentType: false,
                processData: false,
                success: function (response) {
                    if (response === 'success') {
                        $(".show_res").html('information updated successfully');
                        $('#sub_btn').prop("disabled", false);
                     document.getElementById('submit_form').reset();
                    }

                }
            });

        }));

[Check this link ](https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript) you can get base_url in JavaScript — caveboy, Feb 06 '18 at 09:41
@caveboy i know how to pass base_url but in that how to call method name inside controller by passing base_url I had tried so many ways but nothing work. — MSP, Feb 06 '18 at 09:48

score 0 · Accepted Answer · answered Feb 06 '18 at 10:19

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];

$("body").on("submit","#submit_form",function(event){
     event.preventDefault();
        $('#sub_btn').prop("disabled", true);
        $.ajax({

            url: baseUrl+'Controller/method name',
            type: "POST",
           data: new FormData(this),
            cache: false,
           contentType: false,
            processData: false,
            success: function (response) {
                if (response === 'success') {
                    $(".show_res").html('information updated successfully');
                    $('#sub_btn').prop("disabled", false);
                 document.getElementById('submit_form').reset();
                }

            }
        });

    }));

Hope this will help you

can you please explain me base_url concept here actually I am using base_url in header file before specifying path of main.js file but in other case to load assets/images it is working fine ,so why in this case not working as per requirement. — MSP, Feb 06 '18 at 11:57
assuming header.php is your header so this "= base_url();?>" php is working for css,images etc but when you want base url in external.js you need to declare global variable as var base_url = "= base_url();?>". in your main.js which is include in every view. then you can use this variable. I think there is problem in variable declaration. — caveboy, Feb 06 '18 at 12:21

How to write Codeigniter code in external js file?

1 Answers1