Ad

How To Display A Table In A Popup Box?

I have the form below, with 4 comboboxes "Metier=profession" "tache=task" "tacrification=pricing" and "technicien=technician", I select a Metier and a tache, after this I want that a popup box appears and show me a table that contains all the "techniciens" and their "tarification" (of course only the "techniciens" that are related with the "tache" already selected).

Please see the second form. After this I select a "technician" from that table a now the form is completely filled with the "technician" and it's "pricing".

enter image description here

What I'm trying to do:

enter image description here

intervention

    Schema::create('interventions', function (Blueprint $table) {
        $table->increments('id');
        $table->date('date_intervention')->nullable();
        $table->string('description');
        $table->dateTime('duree_prevu');
        $table->boolean('statut');
        $table->integer('technicien_id')->unsigned();
        $table->foreign('technicien_id')->references('id')- 
        >on('techniciens');
        $table->integer('tarification_id')->unsigned();
        $table->foreign('tarification_id')->references('id')- 
        >on('tarificationtaches');
        $table->integer('client_id')->unsigned();
        $table->foreign('client_id')->references('id')->on('Clients');


        $table->timestamps();
    });

tarificationtache

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->datetime('deleted_at')->nullable();
         $table->timestamps();
          });

Intervention class

class Intervention extends Model
{
protected $fillable = [ ];
protected $guarded = [];

public function avisintervention()
{
    return $this->hasMany(AvisIntervention::class);
}

public function technicien()
{
    return $this->belongsTo(technicien::class);

}

public function client()
{
    return $this->belongsTo(Client::class);

}
 public function tarificationtache()
{
return $this->belongsTo('App\Tarificationtache','tarification_id');

}

tache class

class tache extends Model
{
use SoftDeletes;
protected $guarded = [];
 protected $dates = ['deleted_at'];

public function metier()
{
    return $this->belongsTo(Metier::class);
}

public function tarificationtache()
{
    return $this->hasMany(Tarificationtache::class);
}

}

metier class

class metier extends Model 
{
use SoftDeletes;
protected $guarded = [];
 protected $dates = ['deleted_at'];
public function taches()
{
    return $this->hasMany(Tache::class);
}
public function techniciens()
{
    return $this- 
    >belongsToMany('App\technicien','technicien_zone','metier_id','technicien_id');

}
}

tarificationtache class

class tarificationtache extends Model
{
use SoftDeletes;
protected $guarded = [];
 protected $dates = ['deleted_at'];
public function tache()
{
    return $this->belongsTo(Tache::class);
}


public function techniciens()
{
    return $this->belongsToMany('App\technicien','technicien_tarificationtache','tarificationtache_id','technicien_id');

}
public function intervention() {
    return $this->hasMany(intervention::class);
}

}

intervention controller

public function create()

{
    $client = client::orderBy('id', 'asc')->get();
    $metiers = metier::orderBy('id', 'asc')->get();
    $technicien = Technicien::orderBy('id', 'desc')->get();
    $tarifications = tarificationtache::orderBy('id', 'desc')->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');

    }
Ad

Answer

Check this to know how to create a Modal: Bootstrap Modal W3school

Next put your table inside this div

<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);
}
Ad
source: stackoverflow.com
Ad