How to dynamically change a subcategory?

Question

This is output of image and which show all category and subcategory

What I want to achieve is to display all the categories and, when a category is clicked, its relative subcategory should be displayed.

The model view code

    <!-- Button to Open the Modal -->

      <div class="form-group col-md-8">
      <button type="button" class="form-control" data-toggle="modal" data-target="#myModal">
    Category  </button>

      <!-- The Modal -->
      <div class="modal" id="myModal">
    <div class="modal-dialog modal-lg" >
          <div class="modal-content">
          
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Category</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <!-- Modal body -->
            <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4" >
                                    <a href="#" name="category" id="category" >            
                                        @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{$category->category}}</option>
                                        @endforeach
                                     </a>
                             
                        </div>
                          <div class="col-md-4 ">
                            <a href="#" name="subcategory" id="subcategory" >
                                @foreach($subcategories as $subcategory)
                                <option value="{{$subcategory->id}}">{{$subcategory->subcategory}}</option>
                                @endforeach
                             </a>
                                
                          </div>
                          <div class="col-md-4">
                            hhh
                          </div>
                  </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <script type="text/javascript">
      $(document).ready(function() {
       
                        $('#category').change(function(){
                var categoryID = $(this).val();
                if(categoryID){
                    $.ajax({
                        type:"GET",
                        url:"{{url('/api/getSubcategory/')}}/"+categoryID,

                        success:function(res){

                            if(res){
                                
                                data = JSON.parse(res)
                                $("#subcategory").empty();
                                $("#subcategory").append('<option>Select</option>');
                                $.each(data,function(key,value){
                                    $("#subcategory").append("<option value='"+key+"'>"+value+"</option>");
                                           
                                });

                            }else{
                                $("#subcategory").empty();
                            }
                        }
                    });
                }else{
                    $("#subcategory").empty();
                }
            });
                    });
</script>

The controller code:

public function create()
{
    $categories = Category::all();
    $subcategories = Subcategory::all();

    return view('post.create', compact('categories', 'subcategories'));
}

This is the route:

Route::get('/post/create', 'PostController@create')->name('post.create');

This is the API I created, but I don't know how to use it.

public function getSubcategory(Request $request)
{
    $id = $request->id;
    $subcategories = Subcategory::where('category_id',$id)
                         ->select('subcategory','id')
                         ->pluck('subcategory', 'id');
    {{ dd(json_decode($subcategories, true)); }}

    return json_encode($subcategories);
}

API route

Route::get('api/getSubcategory/{id}', 'PostController@getSubcategory');

How can I do this at runtime, when model is changed to a subcategory of its relative category.

Please help me. I am a beginner.

I want to this type of output output which i want

Do your Category model and subcategory model have relationships between them? — dilusha_dasanayaka, Jan 29 '19 at 04:30
yes category model I put this public function subcategory(){ return $this->hasMany('App\Subcategory'); } -@dilusha_dasanayaka — bhavik prajapati, Jan 29 '19 at 04:31
@bhavikprajapati check i edit my answer for your storing data in database — PHP Hupp Technologies, Jan 31 '19 at 09:50

score 0 · Answer 1 · answered Jan 29 '19 at 04:51

As a beginner you can easily do something like this.

<div class="modal-body">
    <div class="row">
       <div class="col-md-4" >

        @foreach($categories as $category)

          <a href="#" name="category" id="category" >                            
              <option value="{{$category->id}}">{{$category->category}}</option>
          </a>

          <div class="col-md-4 ">

            @foreach($category->subcategory as $subcat)
                <a href="#" name="subcategory" class="subcategory" >
                    <option value="{{$subcat->id}}">{{$subcat->subcategory}}</option>                             
                </a>
             @endforeach
         </div>
        @endforeach

      </div>
  </div>

If you still want to load subcategories on click/hover events on category item, then you can do it using jquery library. This answer tells you about how to do something on mousehover event. Simply call your get subcategory route on that event via ajax, ($.ajax()) and append your result.

I used ajax... I forgot to put..i am going to update question - — bhavik prajapati, Jan 29 '19 at 04:57

PHP Hupp Technologies · Accepted Answer · 2019-01-31T09:48:57.337

0

For your dynamic subcategory use below jquery Ajax function

<div class="modal-body">
  <div class="row">
        <div class="col-md-4" >
          <a href="#" name="category" id="category" >            
              @foreach($categories as $category)
              <option class="categoryList" value="{{$category->id}}">{{$category->category}}</option> <!-- add conman class for click event --> 
              @endforeach
           </a>
        </div>
        <div class="col-md-4 ">
          <a href="#" name="subcategory" id="subcategory" >
          </a>
        </div>
  </div>
</div>
<script type="text/javascript">
  $('.categoryList').on('click', function(){
  var cat_id = $(this).attr('value');
  var url = "localhost:8000/api/getSubcategory/"+cat_id;
  $.ajax({
      type: "GET",
      url: url,
      dataType: "JSON",
      success: function(res)
      {
        // amusing res = {"3":"home","4":"home duplex"}; 
        var html = "";
        $.each(res, function (key, value) {
             html += "<option value="+key+">"+value+"</option>";
        });
        $("#subcategory").html(html);
      }
  });
});
</script>

If you want to store your data in database then remove model and add below HTML put after your last form input.

<div class="col-md-4" >
  <select onchange="selectSubcategory(this)" name="category_id">            
      @foreach($categories as $category)
      <option value="{{$category->id}}">{{$category->category}}</option>
      @endforeach
  </select>
</div>
<div class="col-md-4 ">
  <select name="subcategory_id" id="subcategory_id">                                  
  </select>
</div>

below code for your dynamic subcategory

<script type="text/javascript">
  function selectSubcategory(obj){
  var cat_id = $(obj).val();
  var url = "localhost:8000/api/getSubcategory/"+cat_id;
  $.ajax({
      type: "GET",
      url: url,
      dataType: "JSON",
      success: function(res)
      {
        // amusing res = {"3":"home","4":"home duplex"}; 
        var html = "";
        $.each(res, function (key, value) {
             html += "<option value="+key+">"+value+"</option>";
        });
        $("#subcategory_id").html(html);
      }
  });
}
</script>

In your controller store method get category and subcategory like below

$request->category_id;
$request->subcategory_id;

edited Jan 31 '19 at 09:48

answered Jan 29 '19 at 05:24

PHP Hupp Technologies

1,842
9
18

it show only category...if i click category nothing show anything - – bhavik prajapati Jan 29 '19 at 05:53
Have you check in console and what is error show in console ? – PHP Hupp Technologies Jan 29 '19 at 05:56
If i put http://localhost:8000/api/getSubcategory/2 in browser than give me this result {"3":"home","4":"home duplex"} – bhavik prajapati Jan 29 '19 at 06:25
ok @bhavikprajapati then use below code in HTML append ```var html = ""; $.each(res, function (key, value) { html += ""; });``` – PHP Hupp Technologies Jan 29 '19 at 10:09
this response(`{"3":"home","4":"home duplex"}`) come after json parse or before ? if before then show me your console error if after then do JSON.parse(res); – PHP Hupp Technologies Jan 29 '19 at 10:37
check this link https://jsfiddle.net/58vc4rep/ if you are not add jquery CDN then add it – PHP Hupp Technologies Jan 29 '19 at 12:32
I added see...after it doesn't work – bhavik prajapati Jan 29 '19 at 12:58
I checked it and apply but not working...can you help me in remotely? – bhavik prajapati Jan 29 '19 at 16:20
You can check..i post answer – bhavik prajapati Jan 30 '19 at 06:36
I try it but not save category..infact not select than how could i store? - – bhavik prajapati Jan 31 '19 at 12:52
you mean you cant select category ? – PHP Hupp Technologies Jan 31 '19 at 13:12
I select category but i can't select subctaegory – bhavik prajapati Jan 31 '19 at 13:26
Have you check what is error show in console or API call in inspect->Network ? – PHP Hupp Technologies Jan 31 '19 at 13:42

bhavik prajapati · Answer 3 · 2019-01-31T04:31:16.137

@extends('layouts.app')

@section('content')
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>   
       <div class="modal-body">
  <div class="row">
        <div class="col-md-4" >
          <a href="#" name="category" id="category" >            
              @foreach($categories as $category)
              <option class="categoryList" value="{{$category->id}}">{{$category->category}}</option>
              @endforeach
           </a>
        </div>
        <div class="col-md-4 ">
          <a href="#" name="subcategory" id="subcategory" >
          </a>
        </div>
  </div>
</div>
      </div>
    </div>
  </div>

</div>
<script type="text/javascript">
  $('.categoryList').on('click', function(){
  var cat_id = $(this).attr('value');
  var url = "localhost:8000/api/getSubcategory/"+cat_id;
  $.ajax({
      type: "GET",
      url: url,
      dataType: "JSON",
      success: function(res)
      {
        // amusing res = {"3":"home","4":"home duplex"}; 
        var html = "";
        $.each(res, function (key, value) {
             html += "<option value="+key+">"+value+"</option>";
        });
        $("#subcategory").html(html);
      }
  });
});
</script>
@endsection

This is output but not save in database

`console.log(cat_id);` put this in below `cat_id` variable and tell me result after click on category list — PHP Hupp Technologies, Jan 30 '19 at 07:01
I did it...It show nothing on console.. _@PHPHuppTechnologies — bhavik prajapati, Jan 30 '19 at 07:05
error is cors policy..it's working fine now...but i am selecting category and subcategory thats not going in database -@PHPHuppTechnologies — bhavik prajapati, Jan 30 '19 at 16:15
Yes I post answer..check it but that is not store database ...why? -@PHPHuppTechnologies — bhavik prajapati, Jan 31 '19 at 04:27
I did it before dropdown list and data store too but i try to modal through and in this data not store -@PHPHuppTechnologies — bhavik prajapati, Jan 31 '19 at 08:12

How to dynamically change a subcategory?

3 Answers3