Display table where 'tache_id' on table 'tarificationtache' equal the values of select box' id' from table 'tache'

Published 3 months ago by chagouani

I have a vieu that contion 2 select box dynamic

we choose a 'metier' the list of 'tache' is displayed we choose a 'tache' I would like to display a table that contains the list of' tarificationtaches' that are the selected' tache' in the selectbox

iterventioncontroller

public function index()
{
    
    $Listintervention=Intervention::with(['technicien','client','tarificationtache'])->get();
    
    return view('intervention.index',['interventions'=>$Listintervention]);


}


/**
 * Show the form for creating a new resource.
 *
 * @return \Illuminate\Http\Response
 */
public function create()

{

    $client = client::orderBy('id', 'asc')->get();
    $metiers = metier::orderBy('id', 'asc')->get();
    $technicien = Technicien::orderBy('id', 'desc')->get();
    $tarifications = tarificationtache::with('techniciens.user')->get(); 
    
    return view('intervention.create')->with('technicien', $technicien)->with('client',$client)- 
    >with('metiers',$metiers)->with('tarifications',$tarifications);
}

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(InterventionRequest $request)
{
    $intervention = new Intervention();
    
    $intervention ->description =$request->input('description');
    $intervention ->duree_prevu =$request->input('duree_prevu');
    

    if($request->has('statut')){
    $intervention->statut = $request->input('statut');
    }else{
           $intervention->statut = 0;
    }
    
    $intervention ->technicien_id = $request->input('technicien_id');
    $intervention ->client_id = $request->input('client_id');
    $intervention ->tarification_id = $request->tarificationtache_id;
    $intervention->save();
    return redirect('intervention');




}

create.blade.php

     @extends('Layouts/app')
    @extends('Layouts/master')
 @section('content')
    <!--  jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap- 
datepicker.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap- 
datepicker.js"></script>


<script type="text/javascript">
var getTachesByMetierUrl = "{{url('/tachesbymetier')}}";
    var getAdresseByClientUrl = "{{url('/adressebyclient')}}";
    var getTarificationsByTacheUrl = "{{url('/tarificationsbytache')}}";
    var getTechniciensByTarificationtacheUrl = "{{url('/techniciensbytarificationtache')}}";
    //console.log(getMetiersByTechnicienUrl,getTachesByMetierUrl 
    ,getTarificationsByTacheUrl);
    

    function getAdresseByClient(val) {
        if(val.length>0) {
            var client_id = val;
            $.get(getAdresseByClientUrl+'/'+client_id,function(res) {
                var html = '<option value="">-Select-</option>' ;
                $.each(res.adresses,function(index,item) {
                    html+='<option value="'+item.id+'">'+item.code_postal+'</option>';
                });
                $('#adresses').html(html);

            });
        }
    }


    function getTachesByMetier(val) {
        if(val.length>0) {
            var metier_id = val;
            $.get(getTachesByMetierUrl+'/'+metier_id,function(res) {
                var html = '<option value="">-Select-</option>' ;
                $.each(res.taches,function(index,item) {
                    html+='<option value="'+item.id+'">'+item.libelle_tache+'</option>';
                });
                $('#taches').html(html);

            });
        }
    }

     function getTechniciensByTache(val) {
        if(val.length>0) {
            var tache_id = val;
            $.get(getTechniciensByTacheUrl+'/'+tarificationtache_id,function(res) {
                var html = '<option value="">-Select-</option>' ;
                $.each(res.techniciens,function(index,item) {
                    html+='<option value="'+item.id+'">'+item.nom+'</option>';
                });
                $('#techniciens').html(html);

            });
        }
    }
 
   
    function rowSelect(currentRow){
        //this is the code to set a dropdown menu using jquery
        var technicien_id = selectedRow.children[0].innerHTML;
        $("#your_technicien_dropdown_menu_id").val(technicien_id);
    }




</script>



@if(count($errors))
    <div class="alert alert-danger" role="alert">
        <ul>
            @foreach($errors ->all() as $message)
                <li>{{$message}}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="container">
    <div class="row"></div>
    <div class="col-md-10">
        <h1>Ajout Intervention</h1>
        <form action=" {{url ('intervention')  }}" method="post">
            {{csrf_field()}}
            <div class="form-group">
                <label for="client">Client</label>
                <select onchange="getAdresseByClient(this.value)" name="client_id" id="client" 
 class="form-control">
                    <option value="">-Select-</option>
                    @foreach($client as $t)
                        <option value="{{$t->id }}">
                            {{$t->user->nom}}
                        </option>
                    @endforeach
                </select>
            </div>


            <div class="form-group">
                <label for="">date et heure </label>
                <input class="form-control" type="datetime-local"  name ="duree_prevu" value=" 
 {{old('duree_prevu')}}">
            </div>

            <div class="form-group">
                <label for="">description</label>
                <input type="text"  name ="description" class="form-control"value=" 
 {{old('description')}}">
            </div>

    <div class="form-group">
                <div class="col-md-12">
                <div class="col-md-4">
                <label>Metier: </label>
                <select onchange="getTachesByMetier(this.value)" style="width: 200px" 
  class="productm form-control" id="metiers">
               <option value="">-Select-</option>
                    @foreach($metiers as $t)
                        <option value="{{$t->id }}">
                            {{$t->libelle_metier}}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <label>tache: </label>
                <select onchange="getTarificationsByTache(this.value)" style="width: 200px" 
  class="productname form-control" name="tache" id="taches">
                <option value="">-Select-</option>
                </select>
            </div>

            
</div>
            <div class="form-group">
                <div class="form-group">
                <label for="">statut    :   </label>
                <input type="checkbox"  name ="statut" value="1" required autofocus>
            </div>
            <div class="form-group">
                <label for="">payement</label>
                <input type="checkbox"  name ="payement" value="">
            </div>
            <div class="form-group">

                <input type="submit" value = "enregistrer" class="form-control btn btn-primary">
            </div>
</div>
</div>
</div>
<script>
     function getMessage(){
         $.ajax({
                  type:'GET',
                  url:your_url,
                  dataType: 'json',
                  success:function(tarifications_list){
                    $table_body = $("#tbl_body_name");
                    $table_body.empty();

                    if (tarifications_list.length > 0) {
                        div_no_data.style.display = 'none';
                        $.each(tarifications_list, function (index, value) {
                            $table_body.append('<tr class="deselected" onclick="rowSelect(this)">' +
                                '<td style="text-align: left;">' + value.technicien_id  + '</td>' +
                                '<td style="text-align: left;">' + value.tache_id + '</td>' +
                                '</tr>');
                        });
                    }
                  }
                });
     }
  </script>

    
@endsection

table tarificationtaches

 public function up()
{
    Schema::create('tarificationtaches', function (Blueprint $table) {
        $table->increments('id');
        $table->float('tarif', 8,2);
        $table->integer('tache_id')->unsigned();
        $table->foreign('tache_id')->references('id')->on('taches');
        $table->integer('technicien_id')->unsigned();
        $table->foreign('technicien_id')->references('id')->on('techniciens');
        $table->datetime('deleted_at')->nullable();
        $table->timestamps();
    });
}
chagouani
Vilfago

Get the id of the selected "Taches", and request it on your table "tarificationstaches" where tache_id = $id.

Could we have the code of what you tried ?

chagouani

@Vilfago I tried with the ajax code to display the table but nothing is displayed

chagouani

@Vilfago i have make table like this but he shown all tarificationtaches

<table class="table table-bordered bg-light">
        <thead class="bg-dark" style=" color: white">
                <tr>
                     <th class="light-table-filter" data-table="order-table" placeholder="Filter"    
   style=" color: #337ab7">technicien </th>
                     <th class="light-table-filter" data-table="order-table" placeholder="Filter" 
   style=" color: #337ab7">Tache </th>
                    <th class="light-table-filter" data-table="order-table" placeholder="Filter" 
   style=" color: #337ab7">tarif </th>
                    
                   
                    <th style="color: #337ab7" width="220px" style="vertical-align: 
        middle">Action</th>
                    
                </tr>
                </thead>
                <tbody>
                @foreach($tarifications as $tarifications)
                <tr>
                    <td>{{$tarifications->technciens}}</td>
                    <td>{{$tarifications->tache->libelle_tache}}</td>
                    <td>{{$tarifications->tarif}}</td>
                    
                    <td>
                        <form action="{{url ('tarifications/'.$tarifications->id)}}" method="post">
                            {{csrf_field()}}
                            {{method_field('DELETE')}}
                            <a href="{{url('tarifications/'.$tarifications->id.'/show')}}" 
     type="checkbox"  name ="action" value="" >choisir</a>
                            
                        </form>

                    </td>
                </tr>
                @endforeach
                </body>
            </table>
Vilfago
$.ajax({
                  type:'GET',
                  url:your_url,
                  dataType: 'json',

your_url call what ?

Try without ajax at first... use something you know, and translate it after.

chagouani

@Vilfago I find this code on the internet and I do not know how to integrate it into my work because it is my first project with laravel if you have a link that I can see or if you can help me to solve my problém please

Vilfago

Try to post the id of the selectbox back to laravel, and then create a method in the controller to launch the query I told you.

It's basic php/sql so any tutorial will do the work.

chagouani

@vilfago that she url I must put ? on ajax code

chagouani

@vilfago this is the **find solution ** but i don't know how to impliment there with my code

<div class="modal-body">
//put your table in here
</div> 

After populate the table using this Javacript code

$.ajax({
type:'GET',
url:your_url,
dataType: 'json',
success:function(employee_list){
$table_body = $("#tbl_body_name");
$table_body.empty();

if (employee_list.length > 0) {
    div_no_data.style.display = 'none';
 $.each(employee_list, function (index, value) {
    $table_body.append('<tr class="deselected" 
 onclick="rowSelect(this)">' +
        '<td style="text-align: left;">' + value.technician_id  + 
 '</td>' +
        '<td style="text-align: left;">' + value.tache_id + '</td>' +
        '</tr>');
 });
}
 }
 });

Next use this function to get selected row information and set it to your desired dropdown

function rowSelect(currentRow){
//this is the code to set a dropdown menu using jquery
var technician_id = selectedRow.children[0].innerHTML;
$("#your_technician_dropdown_menu_id").val(technician_id);
}
Vilfago

It will be easier to debug if you don't do it in ajax at first.

But yes, you should put an url like if it was a page showing all "tarification" for a specific "taches"...

However, you should return a json and not a view in your controller with ajax... so once again:

  • do it the way you know, and when it works, find an ajax tutorial to convert it.
chagouani

@Vilfago i have do it with combobox he shown relative 'tarifcationtache' to tache but i like to shown on table

Vilfago

There's a lot to do... you have to go on your own by step. We can help, but not do it for you.

But you can follow these steps :

  • retrieve the id of the selected "tâche"
  • send it to laravel using a specific route to a controller action
  • in this controller, query the database to get the tarification, and dd($the_result).

If you have what you expect, follow these :

  • send the id to the same route using ajax
  • return a json from the controller
  • loop the result in javascript to build your table

Now, seeing your code, I think none of these points work, so it's hard to help without do it for you. And you will learn nothing this way.

chagouani

@Vilfago I find that you always want to block me I'm looking for a solution if you can help me with a solution or with a link to understand like frater otherwise you do not stay with my question please

Vilfago

It's not that I want to block, just that I don't understand what you want most of the time...

But yes I will stop replying your questions, as other peoples seems understand what you want.

Bonne journée

Please sign in or create an account to participate in this conversation.