How to display a table in a popup box? - laravel

Question

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".
What I'm trying to do:
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');
}

Answer 1

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);
}