CODEWITHSUNDEEP
javascriptjqueryangularjscodeigniter
karma
karma

Reputation: 137

Where to place the javascript file in codeigniter directory?

Sorry if this question is a repeat, I have read most of the questions of similar kind but it didn't solve my problem. I have this code for dependent drop down list using angular js, where I am trying to implement in my codeigniter project. When I place this codes directly into my view form.php I get the result as expected.

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        function CountryController($scope) {
            $scope.countries = {
                'India': {
                    'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
                    'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],  
                },
                'USA': {
                  'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
                  'Los Angeles': ['Burbank', 'Hollywood']
                },
                'Australia': {
                    'New South Wales': ['Sydney','Orange','Broken Hill'],
                    'Victoria': ['Benalla','Melbourne']
                }
            };
        }
    </script>
    </head>
    <body>
    <div ng-app class="container">
      <div ng-controller="CountryController">
        <div class="form-group">
          <label class="control-label" for="Country">Country:</label>
          <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
            <option value=''>Select</option>
          </select>
        </div>
        <div class="form-group">
          <label class="control-label" for="States">States:</label>
          <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
            <option value=''>Select</option>
          </select>
        </div>
        <div class="form-group">
          <label class="control-label" for="City">City:</label>
          <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
            <option value=''>Select</option>
          </select>
        </div>
      </div>
    </div>

I want to place the javascript codes into >MyProject>js directory and copy pasted the javascript into a file called script.js and included the following line into view/includes/header.php

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

In my controller>form.php I have a line to load the header.php

$this->load->view('includes/header',$datah);

When I separate the script from view>form.php I only get the drop down list which is the result of the html tags that I have but there are no contents or list of countries or cities to be seen in any of the drop down menu. Please somebody help me find what has gone wrong with my attempt.

Upvotes: 0

Views: 714

Answers (1)

CodeGodie
CodeGodie

Reputation: 12132

I would do away with Angular. I would build the array in my CI controller, then pass it to the view. The view will then use jquery to do the work in a separate JS file:

Controller:

function method() {
    $data['countries'] = array(
        'India' => array(
            'Andhra Pradesh' => array('Vijayawada', 'Guntur', 'Nellore', 'Kadapa'),
            'Madhya Pradesh' => array('Hyderabad', 'Warangal', 'Karimnagar'),
        ),
        'USA' => array(
            'San Francisco' => array('SOMA', 'Richmond', 'Sunset'),
            'Los Angeles' => array('Burbank', 'Hollywood'),
        ),
        'Australia' => array(
            'New South Wales' => array('Sydney', 'Orange', 'Broken Hill'),
            'Victoria' => array('Benalla', 'Melbourne'),
        )
    );

    $this->load->view('page', $data);
}

View:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="<?= base_url();?>js/script.js"></script>
    </head>
    <body>
        <div>
            <div class="form-group">
                <label class="control-label" for="Country">Country:</label>
                <select class="form-control input-lg" id="country">
                    <option value=''>Select</option>
                    <?php foreach ($countries as $country => $states) { ?>
                        <option data-states='<?= json_encode($states); ?>'><?= $country ?></option>
                    <?php } ?>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="States">States:</label>
                <select class="form-control input-lg" id="state">
                    <option value=''>Select</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="City">City:</label>
                <select class="form-control input-lg" id="city">
                    <option value=''>Select</option>
                </select>
            </div>
        </div>
    </body>
</html>

JS:

$(document).ready(function() {
    $("#country").change(function() {
        $("#state, #city").html("<option value=''>Select</option>");
        var states = $('option:selected', this).data('states');
        $.each(states, function(k, v) {
            $("#state").append("<option data-cities='" + JSON.stringify(v) + "'>" + k + "</option>");
        });
        $("#state").change(function() {
            var cities = $('option:selected', this).data('cities');
            $.each(cities, function(k, v) {
                $("#city").append("<option>" + v + "</option>");
            });
        });
    });
 });

Upvotes: 1

Related Questions