jquery - Where to place the javascript file in codeigniter directory? -
sorry if question repeat, have read of questions of similar kind didn't solve problem. have code dependent drop down list using angular js, trying implement in codeigniter project. when place codes directly view form.php result 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 (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 (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 city in cities"> <option value=''>select</option> </select> </div> </div> </div>
i want place javascript codes >myproject>js directory , copy pasted javascript file called script.js , included following line view/includes/header.php
script type="text/javascript" language="javascript" src="<?php echo base_url();?>js/script.js"></script> in controller>form.php have line load header.php
$this->load->view('includes/header',$datah); when separate script view>form.php drop down list result of html tags have there no contents or list of countries or cities seen in of drop down menu. please me find has gone wrong attempt.
i away angular. build array in ci controller, pass view. view use jquery work in 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 $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>"); }); }); }); });
Comments
Post a Comment