I am trying to make a CRUD application using livewire to render data in the component Blade and save data to the DB there afterwards. The data is being render correctly to the livewire Blade component but when I try to save the data from the component, Livewire is rendering the blank page instead of updating the added data. Here is my code.
Employees.php
<?php
namespace App\Http\Livewire;
use App\Models\User;
use Illuminate\Support\Facades\Validator;
use Livewire\Component;
use Session;
class Employees extends Component
{
public $name, $email, $edit=false;
public function resetInputFields(){
$this->name="";
$this->email="";
}
public function create(){
$this->create=true;
}
public function store(){
$this->validate([
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
]);
$user = User::create([
'name' => $this->name,
'email' => $this->email,
]);
Session::flash('success', 'Employee added successfully');
$this->resetInputFields();
}
public function render()
{
$employees = User::latest()->paginate(5);
return view('livewire.employees',compact('employees'));
}
}
And here is my employees.blade.php blade component File
<x-app-layout>
<div>
<center>
<h3 style="font-weight:bold;font-size:20px">Employees List </h3>
<br>
<!--Successs for Employee Addition-->
#if (Session::has('success'))
<div class="alert alert-success w-75">
{{ Session::get('success') }}
</div>
#endif
<!-- Validation Errors -->
<x-auth-validation-errors class="mb-4" :errors="$errors" />
</center>
#include('livewire.create')
<br><br>
<div class="container shadow p-3 mb-5 bg-white rounded">
<hr>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">NAME</th>
<th scope="col">EMAIL</th>
<th scope="col">ACTION</th>
</tr>
</thead>
<tbody>
#foreach($employees as $employee)
<tr>
<td>{{$employee->name}}</td>
<td>{{$employee->email}}</td>
<td>
<span class="btn btn-success">Edit</span>
<span class="btn btn-danger">Delete</span>
</td>
</tr>
#endforeach
</tbody>
</table>
{{ $employees->links() }}
</div>
</div>
</x-app-layout>
The create.blade.php is the modal being included in employees.blade.php and it appears as.
<center>
<!-- Button trigger modal -->
<button style="align-items:center" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Add Employees
</button>
</center>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Employees</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!--Employee Name-->
<label for="Name">Employee Name</label>
<input class="form-control" name="name" type="text" placeholder="Employee Name" wire:model.defer="name">
<br>
<!--Employee Email Address-->
<label for="Email">Employee Email</label>
<input class="form-control" type="text" name="email" placeholder="Employee Email" wire:model.defer="email">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary" data-dismiss="modal" wire:click.prevent="store()">Save changes</button>
</div>
</div>
</div>
</div>
Now when I save data in employees.blade.php the component is only showing a flash message of success without showing the updated data. Am I missing something here?
do you not need to redirect after the store / flash method
return redirect()->to('/render');
So I figured out that I had two root elements. One in my app.blade.php
<div>
{{ $slot }}
</div>
and another root element in my employee.blade.php as
<div>
My entire code here
</div>
So after removing one root element in my app.blade.php the template was rendered successfully.
Related
I have a table like this:
<table id="criteria-table">
<thead>
<tr>
<th rowspan="2" class="text-center align-middle">#</th>
<th rowspan="2" class="text-center align-middle">Employee</th>
<th colspan="3" class="text-center">Order</th>
</tr>
<tr>
<th class="text-center">Priority</th>
<th class="text-center">Criteria</th>
<th class="text-center">Unit</th>
</tr>
</thead>
<tbody>
<tr class="tr_template">
<td class="text-center">1</td>
<td class="text-center">Employee A</td>
<td class="text-center">75%</td>
<td class="text-center">10</td>
<td class="text-center">order</td>
</tr>
</tbody>
</table>
And I have 2 button in the end of this table:
<a class="btn btn-add-criteria btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD CRITERIA
</a>
<a class="btn btn-add-employee btn-sm m-btn--icon color" href="javascript:void(0)">
<i class="la la-plus"></i>ADD EMPLOYEE
</a>
When I click add criteria button, a popup will open to type criteria data and submit:
<div class="modal fade" id="popup-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content clear-form">
<!-- Body modal -->
<div class="modal-body">
<!-- Form -->
<form id="frm-add-criteria">
<div class="row">
<div class="col-lg-12">
<div class="m-form__group">
<div class="criteria-content">
<!-- Criteria -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Criteria</label>
<div class="input-group">
<select name="kpi_criteria_id" id="kpi_criteria_id" class="form-control">
<option value="1">Order</option>
<option value="2">Contract</option>
<option value="3">Revenue</option>
</select>
</div>
</div>
</div>
<!-- Priority -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Priority</label>
<div class="input-group">
<input type="text" class="form-control" id="priority" name="priority" placeholder="Input criteria" aria-describedby="basic-addon2">
</div>
</div>
</div>
<!-- Amount -->
<div class="row modal-row">
<div class="col-12">
<label class="font-weight-bold">Amount</label>
<div class="input-group">
<input type="text" class="form-control" id="kpi_value" name="kpi_value" placeholder="Input amount" aria-describedby="basic-addon2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer modal -->
<div class="modal-footer">
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit ss--width--100">
<div class="m-form__actions m--align-right">
<button data-dismiss="modal" class="btn btn-metal bold-huy m-btn m-btn--icon m-btn--wide m-btn--md">
<span class="ss--text-btn-mobi">
<i class="la la-arrow-left"></i>
<span>CANCEL</span>
</span>
</button>
<button type="submit" onclick="" id="btn-save-criteria" class="btn btn-success color_button son-mb m-btn m-btn--icon m-btn--wide m-btn--md btn_add_close m--margin-left-10">
<span class="ss--text-btn-mobi">
<i class="la la-check"></i>
<span>SAVE</span>
</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
After I submit the form in modal, it will add one more column like this for all employee row in table:
Here is my old table:
After submit form modal:
Same like this, when I click add employee, it will show a modal for me to choose employee, then it will insert one more employee row to this table with all criteria I add before.
Here is my JSFiddle to show you what I did.
I really don't know how to do this so forgive me if you feel I just give you about code not solution.
Hope you can give me a good advise to handle this.
Thank you very much!
You can use JS / JQuery DOM manipulation.
here's an example using JQuery and Bootstrap:
Table
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td>John</td>
<td>Male</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Add Person
</button>
I put an id to the table body (tbody) element so I can access it directly from script side using JQuery.
Modal
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Insert Person</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<label>Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="col-md-6">
<label>Gender</label>
<select id="gender" class="form-control">
<option>Choose Gender</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addPerson()" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I put id on every input for JQuery access. and since we are not to sending it to a database or another http request, there's no need for a form.
The JQuery Script:
<script>
function addPerson() {
var name = $('#name').val();
var gender = $('#gender').val();
var html = '';
html += '<tr>';
html += '<td>' + name + '</td>';
html += '<td>' + gender + '</td>';
html += '</td>';
$('#tableBody').append(html);
$('#name').val('');
$('#gender').val('Choose Gender');
}
</script>
first I make 3 variables to contain empty string, the value of name, and the value of gender. then I make a table row mock up and fill it with the values from name and gender on that empty string variable, after that I add the new data to the table using the $('#tableBody').append(html); command. and then refresh the form using $('#name').val('');and $('#gender').val('Choose Gender');. hit me up if you need more elaboration.
I'm attempting to bind a KO viewmodel to a bootstrap modal and I seem to be missing something to instruct KO to populate the input fields.
Here's what I have so far.
The modal template:
<script type="text/html" id="edit">
<div class="modal fade modal-template" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" data-bind="value: Id">
<div class="row">
<div class="col-sm-4">
Name
</div>
<div class="col-sm-8">
<input type="text" class="form-control" data-bind="value: Name" />
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4">
Description
</div>
<div class="col-sm-8">
<textarea style="resize: none;" class="form-control" data-bind="value: Description" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success">Save</button>
<button type="button" data-dismiss="modal" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</div>
</script>
I have a table also mapped to a KO viewmodel. The display template used to render the items in the table is as such:
<script type="text/html" id="display">
<td data-bind="text: Name"></td>
<td data-bind="text: Published"></td>
<td data-bind="text: PublishedOn"></td>
<td>
<div class="btn-toolbar">
<button type="button" class="btn btn-default btn-space" data-bind="click: $root.showModal"><span class="fas fa-edit"></span></button>
</div>
</td>
</script>
The viewmodel:
this.viewModel = {
workflowCollection: ko.observableArray(),
showModal: function (model) {
//this creates an instance of a bootstrap modal, using the html content of the template instead of the #edit element itself.
$($('#edit').html()).modal('show');
}
};
In showModal I'm receiving the entity for which the modal was opened, but is there anything I need to further specify for KO to bind it properly? As of now, the fields are blank.
Since the bootstrap modal is being created from a brand new element in the DOM that hasn't yet been bound by knockout, you need to specifically bind it by passing the new element to ko.applyBindings.
showModal: function (model) {
//this creates an instance of a bootstrap modal, using the html content of the template instead of the #edit element itself.
var myModal = $($('#edit').html());
ko.applyBindings(model, myModal[0]);
myModal.modal('show');
}
I can normally insert, update and delete data from database with Laravel 5.2. Now i want to update table data with Bootstrap Modal . My modal and Table view in same blade.
Modal:
<!-- Modal content-->
<div class="modal-content">
#foreach($dataQrDetails as $dataQr)
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Updating {{ $dataQr->winner_name }}</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="{{url('admin/winner/status/'.$dataQr->id)}}" method="POST" enctype="multipart/form-data" id="contactForm">
{{ csrf_field() }}
<input type="hidden" name="chance_of_win" value="Shipped">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Text Input</label>
<div class="col-md-9">
<div class="input-icon">
<i class="fa fa-archive" aria-hidden="true"></i>
<input type="text" class="form-control" placeholder="{{ trans('common.enter') }}" name="status_text" value="{{ $dataQr->status_text}}"></div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
</div>
</div>
</div>
</form>
</div>
#endforeach
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
tbody:
<tbody>
#foreach($dataQrDetails as $dataQr)
<tr>
<td> {{ $dataQr->winner_name }} </td>
<td> {{ $dataQr->username }} </td>
<td> {{ $dataQr->winner_gender }} </td>
<td> {{ $dataQr->mobile_no }} </td>
<td> {{ $dataQr->ship_address }} </td>
<td> {{ $dataQr->product_name }} </td>
<td> {{ $dataQr->product_stat }} </td>
<td> {{ $dataQr->created_at }} </td>
<td> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" data-winner="{{ json_encode($dataQr) }}">Open Modal</button>
</tr>
#endforeach
</tbody>
Controller:
public function statusUpdate(Request $request, $id)
{
$id = $request->input("id");
$winner = Winner::find($id);
if ($winner->product_stat == "Shipped") {
echo "Its Already Shipped!";
}else{
$winner->product_stat = "Shipped";
$winner->status_text = $request->get('status_text');
$winner->save();
$request->session()->flash('alert-info', 'Product Status Updated!');
return Redirect::to('admin/winner/detail');
}
}
Routes:
Route::post('/winner/status/{id}', ['as' => 'winner.status', 'uses' => 'WinnerController#statusUpdate']);
Now if i click on edit button of one row then its open Bootstrap modal with all value. But it should be the clicked value. Again if i fill up modal and click on submit button then its not updating into database. Its just redirect ../public/admin/winner/status/18 url with MethodNotAllowedHttpException error. How can i do that? Thanks in advance.
I make this work by using little bit JavaScript. Hope it will help who want to update data with Bootstrap Modal and Laravel Framework. Retrieve data from database with js and show it in modal with id.
Modal Looks Like:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Updating "<span class="qr_winner_name_show" style="color: #32c5d2;"></span>" Shipping Status</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="{{url('admin/winner/status/update')}}" method="POST" enctype="multipart/form-data" id="contactForm">
<input type='hidden' name='id' class='modal_hiddenid' value='1'>
{{ csrf_field() }}
<input type="hidden" name="chance_of_win" value="Shipped">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Text Input</label>
<div class="col-md-9">
<div class="input-icon">
<i class="fa fa-archive" aria-hidden="true"></i>
<input type="text" class="form-control modal_status_inp" placeholder="{{ trans('common.enter') }}" name="status_text" value=""></div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Passing id when i click on button with data-id="{{ $dataQr->id }}" again if you need to pass another value then you can pass like this way.
tbody:
<tbody>
#foreach($dataQrDetails as $dataQr)
<tr id="qrd_{{$dataQr->id}}">
<td class="qr_winner_name"> {{ $dataQr->winner_name }} </td>
<td> {{ $dataQr->username }} </td>
<td> {{ $dataQr->winner_gender }} </td>
<td> {{ $dataQr->mobile_no }} </td>
<td> {{ $dataQr->ship_address }} </td>
<td> {{ $dataQr->product_name }} </td>
<td> {{ $dataQr->product_stat }} </td>
<td> {{ $dataQr->created_at }} </td>
<td> <button type="button" class="btn btn-info btn-xs openModal" data-id="{{ $dataQr->id }}" data-status-text="{{ $dataQr->status_text }}" data-toggle="modal" data-target="#myModal">Delier</button></td>
</tr>
#endforeach
</tbody>
JS:
$(document).ready(function(){
$(document).on('click','.openModal',function(){
var id = $(this).data('id');
$('.modal_hiddenid').val(id);
$('.modal_status_inp').val($(this).data('status-text'))
var qr_winner_name = $('#qrd_'+id+' .qr_winner_name').html();
$('.qr_winner_name_show').html(qr_winner_name);
});
})
Routes:
Route::get('/winner/status/{id}', ['as' => 'winner.status', 'uses' => 'WinnerController#editStat']);
Route::post('/winner/status/update', ['as' => 'winner.change', 'uses' => 'WinnerController#statusUpdate']);
Controller:
public function editStat($id)
{
//
$winner = Winner::findOrFail($id);
return view('winner.detail', ['id' => $id, 'winner' => $winner]);
}
public function statusUpdate(Request $request, $id=0)
{
$id = $request->input("id");
$winner = Winner::find($id);
if ($winner->product_stat == "Shipped") {
$request->session()->flash('alert-warning', 'Its has been already Shipped! Try another one.');
return Redirect::to('admin/winner/detail');
}else{
$winner->product_stat = "Shipped";
$winner->status_text = $request->get('status_text');
$winner->save();
$request->session()->flash('alert-info', 'Product Status Updated!');
return Redirect::to('admin/winner/detail');
}
}
Hope it will help some who wants to insert/update database value with Bootstrap Modal and Laravel Framework.
To update or insert into your database you need to use POST method.
Your GET method need to replace with POST method.
You have so many options to make it working.
I'will show you one:
Make a seperate GET Route e.g /winner/edit/{id}
then in your Controller function render a view which contains the modal content:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Item</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<input value="{{$model->whatever}}">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
</div>
</div>
</div>
Controller function
fuction edit($id) {
return view('edit_modal')->with(['model' => Model::find($id)])->render();
}
In the click function of your edit button load this view over ajax, fill the content of your modal, and show it.
There are many other way, depends on the size of your project and what functions you will also achieve.
e.g. Use a Libaray for JS Object binding (knockoutjs)
Total simple but resource eating way:
Render a seperate modal for each Model and open only the corresponding one on click.
#foreach($dataQrDetails as $dataQr)
<div class="modal fade" id="{{$dataQR->id}}">
<div class="modal-dialog"><!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Updating {{ $dataQr->winner_name }}</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="{{url('admin/winner/status/'.$dataQr->id)}}" method="POST" enctype="multipart/form-data" id="contactForm">
{{ csrf_field() }}
<input type="hidden" name="chance_of_win" value="Shipped">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Text Input</label>
<div class="col-md-9">
<div class="input-icon">
<i class="fa fa-archive" aria-hidden="true"></i>
<input type="text" class="form-control" placeholder="{{ trans('common.enter') }}" name="status_text" value="{{ $dataQr->status_text}}"></div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green" id="submitContact" form="contactForm">{{ trans('common.submit') }}</button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endforeach
<td> <button type="button" class="btn btn-info btn-xs" onclick:$('#'+{{$dataQR->id}}).modal('show')>Open Modal</button>
I have a problem with flask app published pythonanywhere. This is a dashboard and if I click the title of the posting, it is supposed to show details of the posting. I want to add confirm message before delete. How can I make it? Now I try to use javascript, but it doesn't work. Below are my codes.
app.py
import MySQLdb as mysql
con = mysql.connect("host", "username", "password", "database")
con.ping(True)
#app.route('/deleteschool/<int:School_Id>')
def deleteschool(School_Id):
try:
if session.get('user'):
#con = mysql.connect()
cursor = con.cursor()
query_string = "DELETE FROM school WHERE School_Id = '{School_Id}'".format(School_Id=School_Id)
cursor.execute(query_string)
#cursor.execute("DELETE from school where School_Id=%s", (School_Id))
delete=cursor.fetchall()
if len(delete) is 0:
con.commit()
return redirect('/getSchoolList')
else:
return redirect('/error')
else:
return redirect('/error')
except Exception as e:
return redirect('/error')
school_page_showpost.html
<script src="/static/js/confirm.js"></script>
{% for row in schoolpost %}
<div id="titleOutput" class="two fields">
<div class="field">
<label>TITLE</label>
<textarea id="ckeditor1" class="cleditor" disabled="yes" readonly="yes" rows="1">{{row[1]}}</textarea></div></div>
<div id="contentsOutput" class="field">
<h6></h6>
<label>CONTENTS</label>
<textarea id="ckeditor2" class="cleditor" disabled="yes" readonly="yes" rows="10" cols="80">{{row[2]}}
</textarea>
<script>
var editor2=CKEDITOR.replace( 'ckeditor2' );
</script>
</div>
</div>
<div class="extra content">
<div class="right floated author">
<span class="right floated time">{{row[4]}} </span>
<span class="category">School board </span>
<span class="writer">
{{row[3]}}</span>
</div>
</div>
</div>
<br><br>
<ul class="actions pagination">
<li><a onclick="javascript : window.location = '/editschool/{{row[0]}}' " class="ui button">EDIT</a></li>
<li><button id="confirmDeleteSchool" type="submit" name="confirmDeleteSchool" class="ui button">DELETE</button></li>
<li><a href="/school" class="ui button" >LIST</a></li>
</ul>
{% endfor %}
confirm.js
$(function(){
$('#confirmDeleteSchool').click(function(){
var confirm = confirm("Are you sure?");
if (confirm == true) {
$.ajax({
url: '/delteschool/{{row[0]}}',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});
} else {
}
});
});
If I click delete button, it is supposed to load confirm.js file and execute. But it does nothing. Please help.
An alternative approach for a similar task:
I implemented a confirmation step before deleting post through modal by using only HTML and jinja.
{% block body %}
<h1>Dashboard <small> Welcome {{session.username}} </small></h1>
<a class="btn btn-success" href="/add_article">Add Article</a>
<hr>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th></th>
<th></th>
</tr>
{% for article in articles %}
<tr>
<td>{{article.id}}</td>
<td>{{article.title}}</td>
<td>{{article.author}}</td>
<td>{{article.create_date}}</td>
<td> Edit </td>
<td>
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalCenter{{article.id}}">
Delete
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter{{article.id}}">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle{{article.id}}">Deleting Post Permanently</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>{{article.title}}??</h3>
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="{{url_for('delete_article', id=article.id)}}" method="post">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</table>
{% endblock %}
Including a js file in Flask works differently:
`<script type="text/javascript" src="{{ url_for('static', filename='js/confirm.js') }}"></script>`
With this you should be able to load the JS
So I have a table of people, with each column containing certain values. At the end of each row, I have a "Delete" button. When that button is pressed, a modal pops up to confirm if you want to proceed with deleting that person. Clicking the "Delete" button again should delete the person and display a success message for it.
With the modal, I'm trying to make sure not only that a user needs to accept the action before proceeding, but also making sure that only the specific person in question is deleted. However, when I try to clarify the request it only contains the CSRF token that I'm passing through. Even when I try to more deliberately inject the targeted person into the modal the person isn't being sent through.
The important snippets of my code, for reference:
#foreach($people as $person)
<tr id="row{{ $loop->iteration }}">
<td id="first_name_row{{ $loop->iteration }}">{{ $person->first_name }}</td>
<td id="last_name_row{{ $loop->iteration }}">{{ $person->last_name }}</td>
<td id="email_row{{ $loop->iteration }}">{{ $person->email }}</td>
<td>
<input type="button" id="delete_button_row{{ $loop->iteration }}" class="btn btn-btn-submit delete" value="Delete" onclick="delete_modal('{{ $loop->iteration }}', {{ $person }})">
</td>
</tr>
#endforeach
..........
<!-- Modal -->
<div class="modal fade" id="DeleteModal" role="dialog">
<div class="modal-dialog">
<form class="form-horizontal style-form" id="model-form" data-toggle="validator" role="form" method="post" action="/employer/delete-person">
<!-- Modal content-->
{{ csrf_field() }}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete This Person</h4>
</div>
<div class="modal-body">
<p>Are you sure you would like to do that?</p>
<input id="delete_ex">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" id="modal-execute" class="btn btn-btn-submit">Delete</button>
</div>
</div>
</form>
</div>
</div>
......
<script>
function delete_modal(num, person){
$('#delete_button_row' + num).attr("data-toggle" , "modal");
$('#delete_button_row' + num).attr("data-target", "#DeleteModal");
$('#delete_ex').val(person);
}
.......
</script>