Codeigniter ajax request is not working when use external JS file

Question

My Codeigniter ajax request is working when JS inner embed. But when i want to use it as external JS file. It it not working. Why is that?

View sample_ajax

<html>
    <head>
        <title></title>
         <script src='<?= base_url() ?>public/js/jquery.min.js'></script>
         <!--<script src='<?= base_url() ?>public/js/script.js'></script>When put script part on external script.js, it's not working -->       
    </head>
    <body>
         <div>
            <input name="submit1" id="submit1" type="button" value="Load">
        </div>
        <div id="receive" style="height: 50px; background-color: yellowgreen">       
        </div>

        <script type="text/javascript">
        $(document).ready(function () {
            $('#submit1').click(function () {
                $.ajax({
                    url: '<?php echo base_url();?>' + 'main/testarray',
                    dataType: "JSON",
                    type: "POST",
                    success: function (retdata) {
                        $("#receive").html(retdata.name);
                    }
                });
            });
        });
        </script>        
    </body> 
</html>

Main Controller

class Main extends CI_Controller {
    public function test() { 
        $this->load->view('home/sample_ajax'); 
    } 
    public function testarray() {
        $student_data = [
            'name' => 'Sample Name',
            'age' => '26'
        ];
        echo(json_encode($student_data));
    }
}

please try to echo (json_encode($student_data));

krutssss
– krutssss

2016-03-19 06:58:17 +00:00
Commented Mar 19, 2016 at 6:58 — krutssss
– krutssss, Commented Mar 19, 2016 at 6:58

Aslam Patel · Accepted Answer · 2016-03-19 12:21:24Z

1

you can create base url gloabl variable in javascript in your header or a view that always loading put this code

   <script type="text/javascript">
    var baseURL= "<?php echo base_url();?>";
    </script>

and url external js file path use this type

<script type="text/javascript">
        $(document).ready(function () {
            $('#submit1').click(function () {
                $.ajax({
                    url: baseURL+'main/testarray',
                    dataType: "JSON",
                    type: "POST",
                    success: function (retdata) {
                        $("#receive").html(retdata.name);
                    }
                });
            });
        });
        </script>

answered Mar 19, 2016 at 12:21

Aslam Patel

8947 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kunicmarko20 · Accepted Answer · 2016-03-19 10:22:20Z

1

First you don't need ( ) at echo(json_encode($student_data));

And second you can't just copy

url: ' php echo base_url();' + 'main/testarray'

to external js, you have to pass base_url() before adding external

<script type="text/javascript">
var base = "<?php echo base_url();?>";
</script>
<script src="<?php echo base_url();?>js/yourjavascriptexternal.js"></script>

It will look like url: base + 'main/testarray'

answered Mar 19, 2016 at 10:22

kunicmarko20

2,1902 gold badges18 silver badges26 bronze badges

Collectives™ on Stack Overflow

Codeigniter ajax request is not working when use external JS file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related