Develop Reference

Laravel 8 Delete Data Using Bootstrap Model

I have a table made with Bootstrap and I want to delete the data with bootstrap model confirm. Deleting works fine without model, but with model, delete button always send last row data to the model no matter which row delete button clicked.
model button
<i class="fe fe-trash text-danger fe-24"></i>
Modal delete button
<form action="{{ route('admin.users.delete', $user) }}" method="post">
#csrf
<button type="submit" class="btn mb-2 btn-danger">Delete</button>
</form>
js used
$('#deleteModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var recipient = button.data('user')
});
table foreach
<tbody>
#if ($users->count())
#foreach ($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>(478) 446-9234</td>
<td>159 address</td>
<td>
#if ($user->user_role == 0)
User
#elseif ($user->user_role == 1)
Editor
#else Admin
#endif
</td>
<td>{{ $user->created_at->format('M d, Y') }}</td>
<td>{{ $plans->find($user->plan_id)->name }}</td>
<td>
#if ($user->expiration_date != null)
{{ Carbon\Carbon::parse($user->expiration_date)->format('M d, Y') }}
#else
N/A
#endif
</td>
<td>
#if ($user->is_active == 1)
<span class="text-success font-weight-bold">Active</span>
#else
<span class="text-danger font-weight-bold">Disabled</span>
#endif
</td>
<td>
<i class="fe fe-edit text-secondary fe-24"></i>
<i class="fe fe-trash text-danger fe-24"></i>
</td>
</tr>
#endforeach
#endif
</tbody>

I am assuming that you have a foreach to creat the delete button s for every user
The $user that is passed will always be the last $user id
You need to pass the $user that was clicked
and pass this the the action of the form
try
var deleteModal = $('#deleteModal');
$('a').on('click', function (e) { // this is the "a" tag
var userId = $(this).data('user'),
var submitUrl = {!! url("/admin/users/delete/") !!}+userId;
var form = $('#form');
form.attr('action', submitUrl);
});
});
when the is clicked ,store the data-user and create the submit and change the form action
Hope this would be of any help to you.

Flask get data from drop-down into sqlite

I'm completely new to the flask, and really am completely lost with how to approach this.
<tr>
<th>Anmerkungen</th>
<td type="text" name="kunden_anmerkungen" id="kunden_anmerkungen" ><textarea rows="3" cols="30"></textarea></td><br>
</tr>
<tr>
<th>Lektor</th>
<td>
<select name="lektor" id="lektor">
{% for user in users %}
<option value= "{{ user['username'] }}" name="lektor" id="lektor">{{ user['username'] }}</option>
{% endfor %}
</select>
</td>
</tr>
I try to get the data from the drop-down menu to be inserted into an SQLite database. All other fields in the DP are updated. But the Lektor field can't be read.
kunden_anmerkungen = request.form.get("kunden_anmerkungen")
lektor = request.form.get("lektor")
db.execute("UPDATE kunden SET ...
Any help would be greatly appreciated.

you should add the full code involved to this, however it seems like the issue is between the select and the option tag.
Try this:
<tr>
<th>Anmerkungen</th>
<td type="text" name="kunden_anmerkungen" id="kunden_anmerkungen" ><textarea rows="3" cols="30"></textarea></td><br>
</tr>
<tr>
<th>Lektor</th>
<td>
<select name="lektor" id="lektor">
{% for user in users %}
<option value= "{{ user['username'] }}" id="lektor">{{ user['username'] }}</option>
{% endfor %}
</select>
</td>
</tr>
Basically there is name in the option and name in the 'select' tag which may cause issue.
But again if this doesn't work then add the full code because how you set the Database, the flask app or the HTML may change everything
Also Important, I don't see the tag in the HTML file ?

How to recover the inputs values entered by the user. knowing that the inputs are created dynamically with *ngFor directive

I'm trying to retrieve the input data from the td of my array in my typescript .ts file. Knowing that these cells are dynamically generated using the ngFor directive. I only get the input written in hard. but not the other input generated dinamically. I would like to retrieve input value entered by user.
here is my html file :
<tbody id="tbody">
<tr>
<td><input type="text" value="test"></td>
<td *ngFor="let column of table.columns"><input type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
</tr>
<tr>
<td><input type="text" value="test"></td>
<td *ngFor="let column of table.columns"><input type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
</tr>
<tr>
<td><input type="text" value="test"></td>
<td *ngFor="let column of table.columns"><input type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
</tr>
Here is my component.ts file
getDataTable() {
const names = this.table.columns.map(col => col.name);
console.log(names.length);
const inputValue = document.querySelector('#tbody').querySelectorAll('input');
console.log(inputValue);
const blob = new Blob(['INSERT INTO TYPPAR(' + names + ')'], {type: 'text/plain'});
console.log(blob);
}
here is my result :
I only retrieve input with test value and I want to get data input for input generated with ngFor

Django & js : My formset forms are dependent on each other

I have the following js that adds forms to my template whenever I click on the button ""
function updateElementIndex(el, prefix, ndx) {
var id_regex = new RegExp('(' + prefix + '-\\d+)');
var replacement = prefix + '-' + ndx;
if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
if (el.id) el.id = el.id.replace(id_regex, replacement);
if (el.name) el.name = el.name.replace(id_regex, replacement);
}
function addForm(btn, prefix) {
var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
var row = $('.dynamic-form:first').clone(true).get(0);
$(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
$(row).children().not(':last').children().each(function() {
updateElementIndex(this, prefix, formCount);
$(this).val('');
});
$('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
return false;
}
I call this script in my header :
$(function () {
$('#add-row').click(function() {
return addForm(this, 'form');
//$('.add-row').hide();
});
})
and this is my template :
<form action="/caisse" method="POST" enctype="multipart/form-data" id="personForm" data-tiers-url="{% url 'ajax_load_tiers' %}" >{% csrf_token %}{{ form.non_field_errors }}
<table align="center"> <!-- <div class="row" style="padding-left: 24%; padding-top: 3%"></div> -->
<tr>
<td width="10%"></td>
<td><input id="uploadFile" placeholder="Choose File" class="form-control" /></td>
<td><div class="btn btn-primary" id="divInput"><span>importer</span>
{% render_field form1.myfile id="uploadBtn" style=" position: absolute;top: 0;right: 0;margin: 0; padding: 0;font-size: 20px;cursor: pointer;opacity: 0;filter: alpha(opacity=0);" %}
</div></td>
</tr>
</table>
<table style ="border-collapse: separate;border-spacing: 15px;" id="id_forms_table">
{% for form in formset %}
<tr style="border:1px solid black;" id="{{ form.prefix }}-row" class="dynamic-form" >
<td><div class="col-xs-1"><b><p name="np1">1</p></b></div></td>
<td >
{% render_field form.dateOperation class="form-control" %}{{form.dateOperation1.errors}}
</td>
<td>{% render_field form.designation class="form-control" %}{{form.errors}}
</td>
<td>
{% render_field form.typeTiers class="form-control" %}{{form.typeTiers.errors}}
</td>
<td>
{% render_field form.tiers class="form-control" %}{{form.tiers.errors}}
</td>
<td>{% render_field form.numfacture class="form-control" %}{{form.numfacture.errors}}
</td>
<td>{% render_field form.montant class="form-control" %}{{form.montantdebit.errors}}
</td>
<td>{% render_field form.typeMontant %}{{form.typeMontant.errors}}
</td>
</tr>
{% endfor %}
</table>{{ formset.management_form }}
<tr><td><input type="submit" name="ajoutligne" value="Ajouter une ligne" class="btn btn-primary" id="add-row" style="background-color: #8C1944; border-color: #8C1944; float:right;margin: 5px;" onclick=""></td></tr>
The button Ajouter une ligne is the one called on the js to add a new row of my formset.
My problem here is that my forms are not independent.
for example the the last field typeMontant is a Radio button, when I add a new row as bellow :
Only One radio of the four radio buttons got selected. which means that the two rows are dependent on each other.
So what's the problem that makes my forms dependent when I need them to be totally independent of each other.
any help please.
I'm really stucking here, Thank You so much.

That is because the names and the ids of the form fields are the probably the same, since you are adding the same form over and over again, and all your radio buttons reference to the same name.
Django can already handle multiple forms in a page via formsets.
I found a tutorial that helped me a lot to understand and implement it on my own project:
http://whoisnicoleharris.com/2015/01/06/implementing-django-formsets.html

how to access to a html twig form field value through javascript in Symfony2?

I would like to know how to access to a html twig form field value through javascript in Symfony2. The explanation is as below:
This is the screen shot of the form that I have:
This is the form code:
<html>
<head>
<title> Wkayet </title>
<link rel="shortcut icon" href="{{asset('bundles/ikprojhome/images/icon-WKAYET.png')}}">
<link rel="stylesheet" type="text/css" href="{{asset('bundles/ikprojhome/css2/css.css')}}"/>
<script src='{{asset('bundles/ikprojhome/lib/jquery.min.js')}}'></script>
<script>
function f1(){
if(form_widget(form.start)>form_widget(form.end)){
alert("no");
}
}
</script>
</head>
<body>
<center>
<div id="container">
<div id="header">
</div>
<div id="content">
<table width="100%" height="100%" align="center">
<tr>
<td>
{% for x in groupe%}
<form id="EventForm" action='{{path('ikproj_groupe_homepaeventsAdd',{id:x['id']})}}' method="POST" {{ form_enctype(form) }} onsubmit="f1();">
<!--<form id="EventForm" action='{{path('ikproj_groupe_homepaeventsAdd',{id:x['id']})}}' method="POST" {{ form_enctype(form) }} >-->
{% endfor %}
{{ form_errors(form) }}
<table align="center">
<tr>
<td class="separation"><label for="groupname">Titre</label></td>
<td>
<!--<input id="titre" name="titre" required="required" type="text" size="50"/> -->
<div>
{{ form_errors(form.title) }}
{{ form_widget(form.title) }}
</div>
</td>
</tr>
<tr>
<td class="separation"><label for="debut">Début</label></td>
<td><!--<select id="debut" name="debut" class="select"></select>-->
<div>
{{ form_errors(form.start ) }}
{{ form_widget(form.start ) }}
</div>
</td>
</tr>
<tr>
<td class="separation"><label for="fin">Fin</label></td>
<td><!--<select id="fin" name="fin" class="select"></select>-->
<div>
{{ form_errors(form.end ) }}
{{ form_widget(form.end ) }}
</div>
</td>
</tr>
<tr>
<td class="separation"><label for="lieu">Lieu</label></td>
<td>
<div>
{{ form_errors(form.location) }}
{{ form_widget(form.location) }}
</div>
</td>
</tr>
<tr>
<td id="description" valign="top" class="separation"><label for="description">Description</label></td>
<td><textarea id="ikproj_groupebundle_eventsgroupe_description" name="ikproj_groupebundle_eventsgroupe[description]" rows="5" cols="40"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center" id="button" valign="bottom"><input class="button" type="submit" value=""/></td>
</tr>
</table>
{{form_widget(form._token)}}
</form>
</td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>
And this is the form class code:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title','text')
->add('start','datetime',array(
'input' => 'datetime',
'format' => 'dd/MM/yyyy H:i',
'minutes' => array(
0,
30
)
))
->add('end','datetime',array(
'input' => 'datetime',
'format' => 'dd/MM/yyyy H:i',
'minutes' => array(
0,
30
)
))
->add('location','text')
->add('description','text')
;
}
Actually, what I would like to do is to compare the values of the two datetime fields "start" and "end". Therefore I need to access to the value of each of that fields. By the way, please focus on this part of JavaScript code (which is at the top of the html form code):
<script>
function f1(){
if(form_widget(form.start)>form_widget(form.end)){
alert("no");
}
}
</script>
So, my question is: what will be the correct code to do that?

Why you don't access directly to properties of the HTML generated elements at Javascript? Like for example ID or class or name or something else.
Anyway if you'll like to access any var that comes from controller to Twig view you can do it as follow:
<script>
alert('{{ myvar }}');
</script>
Notice you are tying to access form_widget and that returns the complete HTML element, for example:
<input type="text" name="form[title]" id="form[title]" />
and not the value of that input, take care of that.
Second solution based on your comments
Following your comments and your needs try this code instead:
<script>
$(document).ready(function(){
// I've to do it in this way since your button
// has none class or id to use in jQuery selector
// you should take care of that too
$('input [type=submit]).on('click', function() {
alert($('#ikproj_groupebundle_eventsgroupe_start').val());
})
});
</script>
A few things more:
I made a typo, yes, but remember I'm trying to help you with some ideas, I'm not doing your work so the best you can do is try to understand my code and apply to yours
As image shows you have Symfony datetime field so maybe my code won't work at all but give it a try

You can retrieve the id of the form fields in your javascript like this :
"{{ form.start.vars.id|e('js') }}"
Then, using this id, retrieve your javascript/jQuery/... element and get its value.
If you are planing to use this form field on different forms, it may be a good idea to create a custom FormType that will add classes to the html output of your to date fields and base your javascript selector on this classes.