Dependent Dynamic dropdown using Angular Js and Laravel 5.6 – onlinecode.org

onlinecode

3 years ago

Dependent Dynamic dropdown using Angular Js and Laravel 5.6 – onlinecode

In this post we will give you information about Dependent Dynamic dropdown using Angular Js and Laravel 5.6 – onlinecode. Hear we will give you detail about Dependent Dynamic dropdown using Angular Js and Laravel 5.6 – onlinecodeAnd how to use it also give you demo for it if it is necessary.

The Dynamic Dependent Select Box is mostly used for the Nation-State-City dropdown in various web applications. In this article, we are going to build up this dropdown feature using Laravel, Angular JS and MySQL. In this dropdown, State is connected with the Nation and City is connected with the State.

As soon as you will select the nation, state table will be reloaded with respective states of that nation and after selecting the states, city table will be reloaded with respective cities of that state.

The data will be brought from the database without reloading the page using Laravel, Angular JS and MySQL.

Go ahead and try this, you will see that its quite handy and easy to build up.

Step1: Create Table

In this first step, you can create tables using migration file or directly run the below code to create tables in your database.

You will know how to create tables using migration file by clicking :Dependent dropdown in Laravel

CREATE TABLE 'countries' (
 'id' int(11) NOT NULL AUTO_INCREMENT,
 'name' varchar(100) NOT NULL,
 'created_at' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 'updated_at' datetime DEFAULT NULL,
 PRIMARY KEY ('id')
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1

CREATE TABLE 'states' (
 'id' int(11) NOT NULL AUTO_INCREMENT,
 'country_id' int(11) NOT NULL,
 'name' varchar(100) NOT NULL,
 'created_at' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 'updated_at' datetime DEFAULT NULL,
 PRIMARY KEY ('id')
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1

CREATE TABLE 'cities' (
 'id' int(11) NOT NULL AUTO_INCREMENT,
 'state_id' int(11) NOT NULL,
 'name' varchar(100) NOT NULL,
 'created_at' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 'updated_at' datetime DEFAULT NULL,
 PRIMARY KEY ('id')
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1

Step1: Add Route

Route::get('dependent-dropdown','APIController@index');
Route::get('get-country-list','APIController@getCountryList');
Route::get('get-state-list','APIController@getStateList');
Route::get('get-city-list','APIController@getCityList');

Step 3: Create APIControlle.php File

<?php
namespace AppHttpControllers;
use AppHttpRequests;
use IlluminateHttpRequest;
use DB;

classAPIControllerextends Controller
{
    publicfunctionindex()
    {
        return view('dependent_dropdown');
    }

    publicfunctiongetCountryList(Request $request)
    {
        $countries= DB::table("countries")
                    ->select("name","id")
                    ->get();
        return response()->json($countries);
    }
    publicfunctiongetStateList(Request $request)
    {
        $states= DB::table("states")
                    ->where("country_id",$request->country_id)
                    ->select("name","id")
                    ->get();
        return response()->json($states);
    }
    publicfunctiongetCityList(Request $request)
    {
        $cities= DB::table("cities")
                    ->where("state_id",$request->state_id)
                    ->select("name","id")
                    ->get();
        return response()->json($cities);
    }
}

Step 4: Create dependent_dropdown.blade.php file

PHP - I Can't get the $_POST Values on Ajax Request

In this post we will give you information about PHP - I Can't get the $_POST Values on Ajax Request. Hear we will give you detail about PHP - I Can't get the $_POST Values on Ajax RequestAnd how to use it also give you demo for it if it is necessary.

I want to share this posts with you because when i was working on native PHP and Ajax Post request(Specially AngularJS Post request) at that time i can't get Post value on form submit. That's why i would like to share you this post. I also want to tell you i was working on my Ubuntu 14.04. I did try lot but i can't get value.

At last find stuff to how to solve this issue, i did use "file_get_contents('php://input')" that way i could get POST value in json object and i also decode json value using "json_decode()". So let's try this way :

Example:

$post = file_get_contents('php://input');
$post = json_decode($post);
$sql = "INSERT INTO items (title) VALUES ('".$post->title."')";
$result = $mysqli->query($sql);

Hope this code and post will helped you for implement PHP - I Can't get the $_POST Values on Ajax Request. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

In this last step, I will create “dependent_dropdown.blade.php” file.

<!DOCTYPE html>
 <html>  
  <head>  
       <title>Dependent Dynamic dropdown using Angular Js and Laravel 5.6 - onlinecode</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>  
       <linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  </head>  


  <body>  
     <divclass="container"style="width:500px;">  
          <h3align="center">Dependent Dynamic dropdown using Angular Js and Laravel 5.6 - onlinecode</h3>  
          <br/>  
          <divng-app="demoapp"ng-controller="democontroller"ng-init="loadCountry()">  
             <selectname="country"ng-model="country"class="form-control"ng-change="loadState()">  
                  <optionvalue="">Select country</option>  
                  <optionng-repeat="country in countries"value="<% country.id %>"><% country.name %></option>  
             </select>  
             <br/>  
             <selectname="state"ng-model="state"class="form-control"ng-change="loadCity()">  
                  <optionvalue="">Select state</option>  
                  <optionng-repeat="state in states"value="<% state.id %>"><% state.name %></option>   
             </select>  
             <br/>  
             <selectname="city"ng-model="city"class="form-control">  
                  <optionvalue="">Select city</option>  
                  <optionng-repeat="city in cities"value="<% city.id %>">  
                       <% city.name %>
                  </option>  
             </select>  
          </div>  
     </div>  
  </body>  


 </html>  


 <script>  

var app = angular.module('demoapp', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });


 app.controller("democontroller", function($scope, $http){  

      $scope.loadCountry =function(){  
         var url="{{url('get-country-list')}}";
         $http.get(url)  
         .success(function(data){  
              $scope.countries = data;  
         })  
      }  


      $scope.loadState =function(){ 
           var url="{{url('get-state-list')}}?country_id="+$scope.country; 
           $http.get(url)  
           .success(function(data){  
                $scope.states = data;  
           })  
      }  


      $scope.loadCity =function(){  
           var url="{{url('get-city-list')}}?state_id="+$scope.state
           $http.get(url)  
           .success(function(data){  
                $scope.cities = data;  
           });  
      }  


 });  


 </script>

As we know, both Angular and Laravel have same syntax to use double curly brackets :

<code>{{ variable }}</code>

So I changed the Angular Tags by using following code :

var app = angular.module('demoapp', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });

Now Angular will use <% variable %> and Laravel will use {{ variable }}.

You can alse change the Laravel Blade Tags if you want to use default Angular syntax.

Show Demo

Label :

PHP

Laravel PHP Framework

Angular JS

How To

MVC

JavaScript

Hope this code and post will helped you for implement Dependent Dynamic dropdown using Angular Js and Laravel 5.6 – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github