Develop Reference

Why my modal shows tiny options only in the last id value/item?

Im trying to call a modal to edit a data saved in my database. The "observacao" field uses tiny to format its values. Im using twig also. But when i call the modal, only the last data saved (only whith last id item) shows the tiny options and format in the observacao field. If i try to call another item/id, the modal shows the value but without formatting with tiny.
This is the modal code
{% for matriz in matrizes %}
<div class="modal fade " id="ModalEdit{{matriz.id}}" tabindex="-1" role="dialog" aria-labelledby="ModalCentral" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<h5 class="modal-title" id="TituloModalCentralizado">Editar Matriz</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ doc_root }}matriz/matriz-edit/{{ matriz.id }}" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<br>
<div class="row">
<div class="col-5">
<div class="form-group">
<label for="title">Nome: </label>
<input type="text" name="name" id="name" value="{{ matriz.name }}" class="form-control">
<span class="errors">{{ errors.title }}</span>
</div>
<div class="form-group">
<label for="title">Senha: </label>
<input type="password" name="password" id="password" value="" class="form-control text-right" style="width: 200px;">
<span class="errors">{{ errors.password }}</span>
</div>
<br>
</div>
<div class="col-6 ml-5">
<div class="form-group">
<label for="article-content">Observação: </label>
<textarea name="observacao" id="matriz-observacao" class="form-control">{{ matriz.observacao | raw}}</textarea>
<span class="errors">{{ errors.observacao }}</span>
</div>
</div>
</div>
<br>
<br>
{% if errors.message %}<div class="alert alert-danger">{{ errors.message }}</div>{% endif %}
</div>
<div class="modal-footer">
<section class="text">
<br>
<input type="hidden" name="member_id" value="{{ session.id }}" />
<input type="hidden" name="investimento_id" value="{{ session.investimento_id }}" />
<span class="errors">{{ errors.member }}</span>
<input type="submit" name="update" value="Salvar" class="btn btn-primary mr-2">
</section>
</div>
</form>
</div>
</div>
</div>
{% endfor %}
and i call it whith this script:
<script type="text/javascript">
$('#ModalEdit{{matriz.id}}').on('shown.bs.modal', function () {
alert("modal open");
$('#meuInput').trigger('focus')
})
</script>
and call tiny with this one:
<script src="https://cdn.tiny.cloud/1/kwdb6s3lt2pbcfu9m220i0kok6vcr80w8se19hgmpv9jeaps/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
if (document.getElementById('matriz-observacao')){
tinymce.init({
menubar: false,
selector: '#matriz-observacao',
toolbar: 'bold italic link',
plugins: 'link',
target_list: false,
link_title: false
});
}
</script>
What should i do to show tiny options for all itens when called by a modal ?

The matriz-observacao id is used for more than 1 element, I would change it to include {{matriz.id}} in all input field ids. For tinymce use a class as the selector so it applies to all fields with that class.
Note I haven't used tinymce so if the class selector doesn't work, you can use document.getElementsByClassName() and loop through all fields.
{% for matriz in matrizes %}
<div class="modal fade " id="ModalEdit{{matriz.id}}" tabindex="-1" role="dialog" aria-labelledby="ModalCentral" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<h5 class="modal-title" id="TituloModalCentralizado">Editar Matriz</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ doc_root }}matriz/matriz-edit/{{ matriz.id }}" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<br>
<div class="row">
<div class="col-5">
<div class="form-group">
<label for="name{{ matriz.id }}">Nome: </label>
<input type="text" name="name" id="name{{ matriz.id }}" value="{{ matriz.name }}" class="form-control">
<span class="errors">{{ errors.title }}</span>
</div>
<div class="form-group">
<label for="password{{ matriz.id }}">Senha: </label>
<input type="password" name="password" id="password{{ matriz.id }}" value="" class="form-control text-right" style="width: 200px;">
<span class="errors">{{ errors.password }}</span>
</div>
<br>
</div>
<div class="col-6 ml-5">
<div class="form-group">
<label for="matriz-observacao{{ matriz.id }}">Observação: </label>
<textarea name="observacao" id="matriz-observacao{{ matriz.id }}" class="form-control tinyField">{{ matriz.observacao | raw}}</textarea>
<span class="errors">{{ errors.observacao }}</span>
</div>
</div>
</div>
<br>
<br>
{% if errors.message %}<div class="alert alert-danger">{{ errors.message }}</div>{% endif %}
</div>
<div class="modal-footer">
<section class="text">
<br>
<input type="hidden" name="member_id" value="{{ session.id }}" />
<input type="hidden" name="investimento_id" value="{{ session.investimento_id }}" />
<span class="errors">{{ errors.member }}</span>
<input type="submit" name="update" value="Salvar" class="btn btn-primary mr-2">
</section>
</div>
</form>
</div>
</div>
</div>
{% endfor %}
Tiny code
<script src="https://cdn.tiny.cloud/1/kwdb6s3lt2pbcfu9m220i0kok6vcr80w8se19hgmpv9jeaps/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
if (document.getElementsByClassName('tinyField').length > 0) {
tinymce.init({
menubar: false,
selector: '.tinyField',
toolbar: 'bold italic link',
plugins: 'link',
target_list: false,
link_title: false
});
}
</script>

the ajax code didn't work on a django app

I am working on a machine learning app with Django and I have to pass the data that I wont to use in the model to a views function using ajax and Jquery but the function didn't get called at all so whenever I submit the form is show nothing I've try many solution but didn't work
ps: I am still a beginner in JS
here is the views function:
def Iris_classify(request):
print('called1')
if request.POST.get('action') =='post':
print('caled2')
sepal_length = float(request.POST.get('sepal_lenght'))
sepal_width = float(request.POST.get('sepal_width'))
petal_length = float(request.POST.get('petal_lenght'))
petal_width = float(request.POST.get('petal_width'))
model = pd.read_pickle(r"C:\Users\zakaria\Django\DataProject\Data_science\machinlearning\classifier_model.pickl")
prediction_features=[sepal_length,sepal_width,petal_length,petal_width]
result = model.predict([prediction_features])
classification = result[0]
print(classification)
return JsonResponse({'result': classification, 'sepal_length': sepal_length,
'sepal_width': sepal_width, 'petal_length': petal_length, 'petal_width': petal_width},
safe=False)
and here is the template:
{%extends 'machinlearning/base.html'%}
{%block title%}Iris classification{%endblock %}
{%block content %}
<div class='container pt-5'>
<form action ="" method="POST"id ="input_form">
{% csrf_token %}
<div class="form-group" >
<label for="sepal_length" style="color:white">Sepal Length</label>
<input type="number" step="0.1" class="form-control" id="sepal_length" placeholder="Sepal Length">
</div>
<div class="form-group" >
<label for="sepal_width">Sepal Width</label>
<input type="number" step="0.1" class="form-control" id="sepal_width" placeholder="sepal width">
</div>
<div class="form-group" >
<label for="petal_length">Petal Length</label>
<input type="number" step="0.1" class="form-control" id="petal_length" placeholder="petal_length">
</div>
<div class="form-group" >
<label for="petal_width">Petal Width</label>
<input type="number" step="0.1" class="form-control" id="petal_width" placeholder="petal width">
</div>
<button type="submit" value = "Submit" class="btn btn-primary" data-toggle="modal" data-target= "#modalex">classify</button>
</form>
</div>
<div class="modal fade" id="modalex" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Result</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<h5>Prediction Input:</h5>
<div>Sepal Length: <span id="sl"></span></div>
<div>Sepal Width: <span id="sw"></span></div>
<div>Petal Length: <span id="pl"></span></div>
<div>Petal width: <span id="pw"></span></div>
<h5 class="pt-3">Prediction Classification:</h5>
<div id="prediction"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"data-dismiss="modal">Try again</button>
</div>
</div>
</div>
</div>
<script>
$(document).on("#input_form",'submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'{%url "mlapps:iris"%}',
data:{
sepal_length:$('#sepal_length').val(),
sepal_width:$('#sepal_width').val(),
petal_length:$('#petal_length').val(),
petal_width:$('#petal_width').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
action: 'post'
},
success:function(json){
document.forms["input_form"].reset();
document.getElementByID("prediction").innerHTML=json['result']
document.getElementByID("sl").innerHTML =json['sepal_length']
document.getElementByID("sw").innerHTML=json['sepal_width']
document.getElementByID("pl").innerHTML=json['petal_length']
document.getElementByID("pw").innerHTML=json['petal_width']
},
error : function(xhr,errmsg,err) {
}
});
})
</script>
{%endblock %}

Laravel Edit Update JSON Array and remove specific input using JavaScript

How can i load the JSON array saved in the database to the edit form input field ?
Here's how my create form looks like
Here's the form Code
<div class="card">
<h5 class="card-header">
Manage Extras
</h5>
<div class="card-body">
<div class="optionBox">
<div class="block main">
<div class="form-row pb-2">
<div class="col">
<input type="text" class="form-control" name="extras_name[]" value="" placeholder="Name">
</div>
<div class="col">
<input type="text" class="form-control" name="extras_price[]" placeholder="Price">
</div>
<div class="col">
<button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</div>
</div>
<div class="block mt-2 ">
<button type="button" class="add btn btn-success">Add Extras</i></button>
</div>
</div>
</div>
</div>
</div>
Here's the Script to Add Extra input field and delete button
<script>
$('.add').click(function() {
$('.block:last').before('<div class="form-row pb-2"><div class="col"><input type="text" class="form-control" name="extras_name[]" placeholder="Name"></div><div class="col"><input type="text" class="form-control" name="extras_price[]" placeholder="Price"></div><div class="col"><button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button></div></div>');
});
$('.optionBox').on('click','.remove',function() {
$(this).parent().parent().remove();
});
</script>
Here's how it saves in the database
Here's the edit function in the Controller
public function edit(CustomProduct $customProduct)
{
$data = [
'customProduct'=>$customProduct,
];
return view('manage.custom-products.edit')->with($data);
}
I was able to load the data into the form using a foreach as below
<div class="row">
<div class="col">
<strong>Names</strong>
#foreach ($customProduct['extras_name'] as $item)
<li>{{ $item }}</li>
#endforeach
</div>
<div class="col">
<strong>Prices</strong>
#foreach ($customProduct['extras_price'] as $item)
<li>{{ $item }}</li>
#endforeach
</div>
</div>
And here's how it was looking like
I just want to load the json data into the input fields on edit and should be able to remove a pacific input by clicking the delete icon,
How can i do make this happen, Please help me out

Get data to Modal on button click, with buttons that have the same ID

Scenario -
I have a page that has job listings, every individual job listing has a button called apply. A modal pops open when you click it, however that modal has no context as to which job the user wants to apply to, so I want to get the ID of the Job posting to the modal somehow.
Problem - The buttons are being procedurally generated and have the same ID's. So using javascript to catch a onclick event cause for some reason it only gets the data-id of first button.
{% for vacancy in vacancies %}
<div class="card">
<div class="card-body">
<h5 class="card-title">Job
Title - {{ vacancy.job_title }}
</h5>
<strong><p>Description </p></strong>
<p class="card-text">{{ vacancy.job_description }}</p>
</div>
<button id="openmodal" data-id="{{ vacancy.id }}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Apply
</button>
</div>
{% endfor %}
<div class="modal-body">
<form action="" class="customer-input" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="form-group col-lg-6">
<label for="fullName">Full Name</label>
<br>
<input name="full-name" type="text" placeholder="Full Name" required="required">
</div>
<div class="form-group col-lg-6">
<label for="email">Email</label>
<br>
<input type="email" name="email" placeholder="Email" required="required">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Job Role</label>
<br>
<select class="job-role" name="job-role">
<option value="python-developer">Python Developer</option>
<option value="fullstack-developer">Full Stack Developer</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Your Resume</label>
<br>
<input type="file" name="resume" accept=".pdf, .docx, .doc, .odt, .ott">
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="login-res-btn">Apply!</button>
</div>
</form>
</div>

This is not the correct solution, there has to be something better but I am desperate and I'll just generate the modal procedurally as well.
{% for vacancy in vacancies %}
<div class="card">
<div class="card-body">
<h5 class="card-title">Job
Title - {{ vacancy.job_title }}
</h5>
<strong><p>Description </p></strong>
<p class="card-text">{{ vacancy.job_description }}</p>
</div>
<button data-id="{{ vacancy.id }}" type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modal{{ vacancy.id }}">
Apply
</button>
</div>
<br>
<br>
<div class="modal text-center" id="modal{{ vacancy.id }}">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Apply for the desired role</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" class="customer-input" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="form-group col-lg-6">
<label for="fullName">Full Name</label><br>
<input name="full-name" type="text" placeholder="Full Name"
required="required">
</div>
<div class="form-group col-lg-6">
<label for="email">Email</label><br>
<input type="email" name="email" placeholder="Email"
required="required">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Your Resume</label><br>
<input type="file" name="resume"
accept=".pdf, .docx, .doc, .odt, .ott">
<input type="text" value="{{ vacancy.id }}" name="job-title" readonly="readonly" hidden="hidden">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="login-res-btn">Apply!</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endfor %}

How to implement adder input in django forms?

I spent several hours trying to figure out,How to implement Adder input in django.
My probleme is in my template I implemented a javascript script that adds additional fields to a form.
those fields are key/value fields, in my model I created a JSONField.
I wanted to grab data from dynamic fields and store them as key values in my JSONField
forms.py
class MyForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
form_fields = kwargs.pop("fields", {})
super(CrontabForm, self).__init__(*args, **kwargs)
for field in form_fields:
field_name = field['name']
field_label = field['label']
field_type = field['type']
self.fields[field_name] = forms.CharField(label=field_label)
print fields.name
class Meta:
model = MyModel
models.py
class MyModel(models.Model):
user = models.ForeignKey(getattr(settings, 'AUTH_USER_MODEL'), verbose_name=_('User'))
params = JSONField(_('Url params'))
views.py
class MyView(LoginRequiredMixin, SuccessMessageMixin, CreateView):
model = MyModel
form_class = MyForm
template_name = '/index.html'
success_url = '/success/'
success_message = "The instance was created successfully"
def form_valid(self, form):
form.instance.user = self.request.user
return super(MyView, self).form_valid(form)
my jquery.js:
{% block custom_js %}
{{ block.super }}
<script>
console.log('tesss');
$(document).ready(function () {
// Number of params
var index = 0;
function addParams() {
var tmp_template = $('template').clone();
var paramsDiv = $('#params');
paramsDiv.append(tmp_template.html());
$($('[class$="param-x"]')[index]).attr('name', 'param' + (index + 1));
$($('[class$="value-x"]')[index]).attr('name', 'value' + (index + 1));
index = index + 1;
}
addParams();
$('#addParam').on('click', function(){
addParams();
});
});
</script>
{% endblock %}
index.html:
<div class="col-md-12">
<form action="." method="post">
<div class="col-md-6">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<div class="row">
{{ field.errors }}
<label class="col-md-2 control-label">{{ field.label_tag }}</label>
<div class="col-md-6">
{{ field }}
</div>
{% if field.help_text %}
<p class="help">{{ field.help_text|safe }}</p>
{% endif %}
</div>
</div>
{% endfor %}
<div class="text-center">
<div class="pagination">
<i class="btn btn-success waves-input-wrapper waves-effect"
style="color:#fff ;background:#5cb85c">
<input class="waves-button-input" type="submit" value="Add"
style="background-color:rgba(0,0,0,0);"></i>
{% url 'cron:crontab-list' as cronslist %}
{# <div class="col-sm-offset-5 col-sm-2 text-center">#}
<a href="{{ cronslist }}"><i class="btn btn-primary waves-input-wrapper waves-effect"
style="color:#fff;background:#286090">
<input class="waves-button-input has-value" type="button" value="Cancel"
style="background-color:rgba(0,0,0,0);">
</i></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-10">
<div style="text-align:center">
<label class="col-md-4">Param</label>
<label class="col-md-6">Value</label>
</div>
<div id="params"></div>
<!-- The template for adding new field -->
<template>
<div class="form-group">
<div class="col-md-4">
<input type="text" class="form-control param-x" placeholder="Task"/>
</div>
<div class="col-md-6">
<input type="text" class="form-control value-x" placeholder="Task"/>
</div>
</div>
<div class="col-md-10">
<hr>
</div>
</template>
</div>
<div class="col-md-2">
<label class="col-md-2">Add</label>
<button id="addParam" type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>