When I use bootstrap modal for my form its only show first value.
here my template.html
{% for company in companys %}
<tr>
<td>{{ company.name }}</td>
<td>{{ company.desc }}</td>
<td align="center">
<button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default2">
delete
</button>
<div class="modal fade" id="modal-default2">
<div class="modal-dialog">
<form method="post" action="{% url 'system:company_delete' pk=company.pk %}">
{% csrf_token %}
<div class="modal-content">
<div class="modal-body">
<input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ company.pk }}">
<input type="submit" class="btn btn-primary" value="Delete">
</div>
</div>
</form>
</div>
</div>
</td>
</tr>
{% endfor %}
its loop all the data, when click delete confirm form will popup. but its return same value.
but if without modal-bootstrap its work fine.
example: template.html
{% for company in companys %}
<tr>
<td>{{ company.name }}</td>
<td>{{ company.desc }}</td>
<td align="center">
<form method="post" action="{% url 'system:company_delete' pk=company.pk %}">
{% csrf_token %}
<input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ company.pk }}">
<input type="submit" class="btn btn-primary" value="Delete">
</form>
</td>
</tr>
{% endfor %}
it's work fine.
what I should do to make it work?...
update
views.py
# Company Crud
class CompanyListView(ListView):
context_object_name = 'companys'
model = models.Company
class CompanyCreateView(CreateView):
fields = ('name', 'desc')
model = models.Company
class CompanyUpdateView(UpdateView):
fields = ('name', 'desc')
model = models.Company
class CompanyDeleteView(DeleteView):
model = models.Company
success_url = reverse_lazy("system:company_list")
Your ajax modal will always return the same value inside modal because:
- Modal has this data-target="#modal-default2" as the target, however, your loop contains the modal body, with the id id="modal-default2", which will render modal as much as your loop goes.
So what you can do is to define a unique ID for each modal with the ID of each company modal-default{{company.id}}:
{% for company in companys %}
''' rest of codes '''
<button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default{{company.id}}">
delete
</button>
''' rest of codes '''
<div class="modal fade" id="modal-default{{company.id}}">
<div class="modal-dialog">
</div>
</div>
''' rest of codes '''
{% endfor %}
But this method is not effective if you have a lot of data, it will render lots of html codes.
Another option
With AJAX and one modal.
Your html would be:
{% for company in companys %}
<td>{{ company.name }}</td>
<td>{{ company.desc }}</td>
<button data-id="{{company.id}}" type="button" class="btn btn-warning margin-bottom delete-company" >
delete
</button> <!-- be aware of class 'delete-company' -->
{% endfor %}
{% csrf_token %}
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
{% if company %} <!-- this company instance will come from AJAX -->
<form method="post" action="{% url 'system:company_delete' pk=company.pk %}">
{% csrf_token %}
<div class="modal-content">
<div class="modal-body">
<input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ company.pk }}">
<input type="submit" class="btn btn-primary" value="Delete">
</div>
</div>
</form>
{% endif %}
</div>
</div>
AJAX
$(document).on('click','.delete-company',function(){
var id = $(this).data('id');
$.ajax({
url:'',
type:'POST',
data:{
'id':id,
'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
},
success:function(data){
$('#modal-default .modal-dialog').html($('#modal-default .modal-dialog',data));
$('#modal-default').modal('show');
},
error:function(){
console.log('error')
},
});
});
And your views would be:
change your url from CompanyListView.as_view() to companyListView
def companyListView(request):
context = {}
companys = models.Company.objects.all()
if request.method == 'POST' and request.is_ajax():
ID = request.POST.get('id')
company = companys.get(id=ID) # So we send the company instance
context['company'] = company
context['companys'] = companys
return render(request,'template.html',context)
Related
I am new to JQuery and I have an Ajax function to update the select options. The Ajax is working fine on my first Div. But when I clone the div and run the Ajax call it again update the first Div element only not the element of cloned one. I new to closet... etc. Please help me so when I call the Ajax it will update the cloned div(current div) element.
this is my ajax function:
function acct_dbox() {
{#var that = $(this)#}
$.ajax(
{
type: "GET",
url: "/waccounts/getaccounts",
dataType: "json",
data: {
{#'acctlevel': $(this).val(),#}
'csrfmiddlewaretoken': '{{csrf_token}}'
},
success: function (data) {
$.each(data, function(index, item) {
if (item.length > 0){
console.log('test', item[0].AcctCode);
console.log('test', item[0].AcctName);
{#$("#id_accountcode option").remove();#}
$.each(item, function(index1, item1) {
console.log(item1.id);
console.log(item1.AcctCode);
console.log(item1.AcctName);
$("#id_accountcode").append($('<option/>',{
{#$("#id_accountcode").append($('<option/>', {#}
value: item1.AcctCode,
text: item1.AcctName
}));
})
$( document ).ready(function() {
acct_dbox();
var original_external_int_div = document.getElementById('account_list');
//Div to Clone
var clone = original_external_int_div.cloneNode(true); // "deep" clone
original_external_int_div.parentNode.append(clone);
acct_dbox(); # (it is updating the first div again - not cloned one)
});
My html is:
{% extends 'wstore_base_generic.html' %}
{% block content %}
<form action="" method="post" class="w-auto" id="new_trans_form"
xmlns:width="http://www.w3.org/1999/xhtml">
<div class="row mt-1 mb-4" >
<div class="col-md-12">
<div>
<div class="headerctr">
<h3>JV</h3>
<!-- <div> -->
<!-- <h3 > -->
<!-- </h3> -->
</div>
<div class="card-body" >
{% csrf_token %}
<div 38rem class="row style= width:18">
<div class="col">
<label>Transaction Date</label>
<input type="date" class="form-control" name="
{{form.fh_dt.name}}" value="{{current_date}}"
readonly>
{% if form.fh_dt.errors %}
{% for error in form.fh_dt.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col-sm" >
<label>Transaction Number</label>
<input type="number" class="form-control" name="
{{form.fh_no.name}}"
value="{{transaction_number}}" readonly>
{% if form.fh_no.errors %}
{% for error in form.fh_no.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<input type="hidden" class="form-control" name="
{{form.fh_type.name}}" required readonly
value="JV">
{% if form.fh_type.errors %}
{% for error in form.fh_type.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
<label>Transaction Ref.</label>
<input type="text" class="form-control" name="
{{form.fh_ref.name}}" required
value="Ref.">
{% if form.fh_ref.errors %}
{% for error in form.fh_ref.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
<div class="row mt-0">
<div class="col">
<label>Transaction Code</label>
<input type="text" class="form-control" name="
{{form.fh_code.name}}" required readonly
value="JV">
{% if form.fh_code.errors %}
{% for error in form.fh_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction Detail</label>
<input type="text" class="form-control" name="
{{form.fh_detail.name}}" required
value="Detail">
{% if form.fh_detail.errors %}
{% for error in form.fh_detail.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction UserCode</label>
<input type="text" class="form-control" name="
{{form.fh_user_code.name}}" required
value="{% if form.fh_user_code.value %}
{{form.fh_user_code.value}}{% else %}{{request.user.username}}{% endif %}">
{% if form.fh_user_code.errors %}
{% for error in fh_user_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-0">
<div class="card shadow">
<div class="card-header text-center">
<h3 class="headerctr">
Item Details
</h3>
</div>
<div class="card-body">
{% csrf_token %}
<table class="">
<thead class="thead-light">
<tr>
<th>Code</th>
<th class = "text-danger">Account</th>
<th class = "text-danger">Debits</th>
<th class="text-success">Credits</th>
<th class = "text-warning">Description</th>
<th class = "text-warning">Tax</th>
</tr>
</thead>
<tbody id="account_list" style="margin-bottom: 0">
<tr>
<td>
<select name="acct_code" class="form-control
fh_code" id="id_accountcode">
<option value="SELECT"
selected="selected">---SELECT---</option>
required></select>
</td>
<td>
<input type="text" name="acct_name"
class="form-control fh_name"
placeholder="Acct Code" readonly>
</td>
<td>
<input type="number" name="acct_debit"
class="form-control fh_debit"
placeholder=" " >
</td>
<td>
<input type="number" class="form-control
fh_credit" name="acct_credit"
placeholder=" ">
</td>
<td>
<input type="text" class="form-control
fh_detail" placeholder="Description"
name="acct_descript" >
</td>
<td>
<input type="number" class="form-control
fh_tax" name="acct_tax"
placeholder=" ">
</td>
<td>
<div class="btn-group">
<button type="button" id="btnadd"
class="btn add_new_row" title="Add">
<i class="fas fa-plus-square"></i>
</button>
<button type="button" class="btn
delete_row" title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td class = "text-success">Total Quantity:
<strong id="final_quantity">0</strong></td>
<td></td>
<td class = "text-success"> Total Price: <strong
id="final_price">0</strong></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-12 mb-1">
<div class="btn-group">
<a href="{% url 'transactions' transtype='INV'
posted='ALL' %}" class="btn btn-info mr-2" >Cancel</a>
<input type="submit" class="btn btn-info submit_form"
name="save_next" value="Save&Print">
</div>
</div>
</div>
</div>
</div>
</form>
{% endblock %}
{#$("#id_accountcode").append($('<option/>', {#}
value: item1.AcctCode,
text: item1.AcctName
I made a change like:
$("table tbody select[name=acct_code]").append($('<option/>',
the all div selects get updated with option -Thanks to swathi.
My problem is opposite to most people. I want to be able to search for a user multiple times. For example, if I look up Ray, I retrieve ray's data. Then if I look up bob, I want to retrieve bob's data.
However, my code works to retrieve the data from the first search. It then appears your clicking the button, but nothing is happening.
I have not tried much, because I don't know where to start.
<div align="center">
</div>
<!--
<div class = "box" style = "width:100%; text-align:center;">
<form method = "POST">
<input style = "float:left;"type="search" class="form-control" type="text" name = "search" placeholder="Enter First and Last name to begin" aria-label="Search" > </input>
<button style = "float:right;"type="submit" class="btn btn-success" id ="search" onclick="fetchlist();return false;">Search</button>
</form>
-->
<div style="text-align: center;">
{% from "_formhelpers.html" import render_field %}
<form method="POST" action="/">
<dl style="display: inline-block; text:white;" >{{render_field(form.search)}} </dl>
<button id="searchbutton" type="submit" style="display: inline-block;" class="btn btn-outline-success my-2 my-sm-0" onclick="fetchlist(); return false;">Search</button>
<br>
{% if error %}
<p class = "error"><strong>Error:</strong>{{error}}</p>
{% endif %}
</form>
</div>
{% if data %}
<div style="text-align:center;">
<table id="list" style="display:none;" class = "table table-hover" >
<thead>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Rating</th>
<th scope="col">Review</th>
</thead>
<tbody>
{% for row in data %}
<tr>
{% for d in row %}
<td>{{ d }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</body>
<script>
function fetchlist() {
if (document.getElementById('searchbutton').onclick) {
document.getElementById('list').style.display = 'inline';
}
else document.getElementById('list').style.display = 'inline';
}
</script>
{% endblock %}
#app.route('/', methods=['GET', 'POST'])
def homepage():
try:
form=SearchForm(request.form)
global d1
d1 =""
if request.method == "POST":
s1 = form.search.data
a = s1.split(" ",1)
firstname, lastname = (a[0], a[1])
c,conn = connection()
qry = "SELECT FirstName, LastName FROM posts WHERE FirstName LIKE (%s) AND LastName like (%s)"
c.execute(qry, ((thwart(firstname)), (thwart(lastname))))
d1 = c.fetchall()
c.close()
conn.close()
print(d1)
else: print('error')
return render_template("index.html", data=d1, form = form)
except Exception as e:
return(str(e))
No error messages. I expect to perform multiple searches.
I have a form with it is own submit button and there is a button inside that form that has the attributes type=button, onclick=somefunction().. the button with the onclick runs great but the other button is not submitting at all.
I've made sure that the button with the function on click have type=button and other button have type=submit
Here is my code:
{% extends 'base/base.html' %}
{% block content %}
<!-- Page Content -->
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<!-- page content -->
<br><br>
<h3>إنشاء فاتورة بيع جديدة </h3>
<br><br>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<form method='post' autocomplete="off" action=".">
{% csrf_token %}
<div class="autocomplete" style="width:100%">
<b>هاتف العميل </b><br>
{{ create_sell_invoice.client }}
<br>
<p style="display: none;" id="shown_name">
client name
</p>
<div id="add_new_client" style="margin:25px;padding: 25px;display: none;">
<form method='POST'>
{% csrf_token %}
<small style="color:rebeccapurple;">يمكنك إضافة عميل جديد برقم هاتف جديد</small>
<br><br>
<b>إسم الطالب</b>
{{ add_client_from_invoice_form.student_name }}
<br><br>
<b>ولى الامر</b>
{{ add_client_from_invoice_form.parent_name }}
<br><br>
<b>العنوان</b>
{{ add_client_from_invoice_form.address }}
<br><br>
<b>الهاتف</b>
{{ add_client_from_invoice_form.phone1 }}
<br><br>
<b>المستوى</b>
{{ add_client_from_invoice_form.level }}
<br><Br>
<button type="button" class="btn btn-success form-control" onclick="sendingRequest()">
إضافة
</button>
</form>
</div>
</div>
<b id="id_delivery_title">التوصيل </b><br>
{{ create_sell_invoice.delivery }}
<br><br>
<b id="id_delivery_price_title">تكلفة التوصيل </b><br>
{{ create_sell_invoice.delivery_price }}
<br><br>
<b id="id_delivery_notes_title">ملاحظات على التوصيل </b><br>
{{ create_sell_invoice.delivery_notes }}
<br><br>
<button type="submit" id='ok_button' class="btn btn-primary form-control" disabled>موافق</button>
<br><Br><Br>
</form>
<script>
function sendingRequest() {
const studentName = document.getElementById('studentName');
const parentName = document.getElementById('parentName');
const clientAddress = document.getElementById('clientAddress');
const clientPhone = document.getElementById('clientPhone');
const clientLevel = document.getElementById('clientLevel');
$.ajax({
url: '/add/new/client/from/invoice/normal/invoice_sell_add/' + studentName.value + '/' + parentName.value + '/' + clientAddress.value + '/' + clientPhone.value + '/' + clientLevel.value + '/',
type: "POST",
data: {name: 'name', age: 'age'},
success: function (response) {
const add_new_client = document.getElementById('add_new_client');
add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: none;')
window.location.reload();
},
complete: function () {
},
error: function (xhr, textStatus, thrownError) {
}
});
}
</script>
<!-- /.col-lg-12 -->
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<datalist id="mylist">
{% for item in clients %}
<option>{{ item }}</option>
{% endfor %}
</datalist>
{% for item in clients %}
{{ item }}
{% endfor %}
<!-- ajax -->
<script>
$("#id_client").change(function () {
var number = $(this).val();
$.ajax({
url: '/ajax/getting_client_name/',
data: {
'number': number
},
dataType: 'json',
success: function (data) {
const shown_name = document.getElementById('shown_name'),
ok_button = document.getElementById('ok_button'),
add_new_client = document.getElementById('add_new_client');
if (data.client_name) {
shown_name.setAttribute('style', 'display:block;color: blue;');
shown_name.innerHTML = data.client_name;
ok_button.disabled = false;
add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: none;background-color: #d3e4ec;');
$('#id_delivery').fadeIn();
$('#id_delivery_title').fadeIn();
$('#id_delivery_price').fadeIn();
$('#id_delivery_price_title').fadeIn();
$('#id_delivery_notes').fadeIn();
$('#id_delivery_notes_title').fadeIn();
if (data.client_name === 'رقم الهاتف غير صحيح') {
shown_name.setAttribute('style', 'display:block;color: red;');
ok_button.disabled = true;
add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: block;background-color: #d3e4ec;');
$('#id_delivery').fadeOut();
$('#id_delivery_title').fadeOut();
$('#id_delivery_price').fadeOut();
$('#id_delivery_price_title').fadeOut();
$('#id_delivery_notes').fadeOut();
$('#id_delivery_notes_title').fadeOut();
}
}
}
});
});
</script><!-- end of ajax -->
{% endblock %}
The problem is in this line of code
<button type="submit" id='ok_button' class="btn btn-primary form-control" disabled>موافق</button>
where the button do nothing at all when clicked
Based on #hindmose comment the problem was having nested forms, I solved it by deleting the inner form tags and moved this part before the opening form tag .. now it is like :
<div id="add_new_client" style="margin:25px;padding: 25px;display: none;">
<small style="color:rebeccapurple;">يمكنك إضافة عميل جديد برقم هاتف جديد</small>
<br><br>
<b>إسم الطالب</b>
{{ add_client_from_invoice_form.student_name }}
<br><br>
<b>ولى الامر</b>
{{ add_client_from_invoice_form.parent_name }}
<br><br>
<b>العنوان</b>
{{ add_client_from_invoice_form.address }}
<br><br>
<b>الهاتف</b>
{{ add_client_from_invoice_form.phone1 }}
<br><br>
<b>المستوى</b>
{{ add_client_from_invoice_form.level }}
<br><Br>
<button type="button" class="btn btn-success form-control" onclick="sendingRequest()">
إضافة
</button>
</div>
<form method='post' autocomplete="off" action=".">
....
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>
Hi my project works on Django framework with some use of AngularJS. What I need to achieve is when I click on submit on my page(html), it should save all the values I entered into the Database. I heard that I just need a simple submit button and main changes are in views.py. I am very new to Django as well as AngularJS. The following is my codes. Thanks in advance.
Html and AngularJS:
{% extends "base.html" %}
{% load static %}
{% block stylesheets %}
<link href="{% static 'css/xxg.css' %}" rel="stylesheet">
{% endblock %}
{% block mainbody %}
<br><br>
<div class="well">
<div class="well" ng-controller="LayerCtrl">
<table>
<tr>
<td>
<div class="input-group">
<span class="input-group-addon">jj</span>
<select class="form-control" name="jj">
{% for f in fab %}
<option value="{{f}}">{{f}}</option>
{% endfor %}
</select>
</div>
</td>
<td>
<div class="input-group">
{% for f in jj%}
{% if f == '1' %}
<span class="input-group-addon">yy</span>
<select class="form-control" ng-model="rr" ng-options="l.value as l.label for l in yyy"></select>
{% endif %}
{% if f == '8' %}
<span class="input-group-addon">tt</span>
<select class="form-control" ng-model="selected_technode" ng-options="l.value as l.label for l in rrr"></select>
{% endif %}
{% endfor %}
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">DD</span>
<!--<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
{%verbatim%}
<select class="form-control" ng-model="selected_dd" ng-options="l as l for l in tt"></select>
{%endverbatim%}
</div>
</td>
</tr>
</table>
</div>
<div><h3>history:</h3></div>
<br/><br/>
<div ng-controller="AlertDemoCtrl">
<table class="table">
{% verbatim %}
<tr>
<td class="input-group" ng-repeat="(k,v) in alerts">
<span class="input-group-addon" ng-hide="v.hide">Check {{ k }}</span>
<span ng-hide="v.hide">
<input type="text" class="form-control" placeholder="Add gg here" ng-model="v.input">
<b>QQQ</b><input type="radio" name="{{ k }}" value="fc" ng-model="v.props">
<b>issue</b><input type="radio" name="{{ k }}" value="rr" ng-model="v.props">
<b>risk</b><input type="radio" name="{{ k }}" value="dr" ng-model="v.props">
<a type="reset" ng-click="reset()">
<span class="glyphicon glyphicon-repeat"></span>
</a>
<a href="" ng-click="remove(v)">
<span class="glyphicon glyphicon-trash"></span></a>
</span>
{% endverbatim %}
<tr>
<td>
<button type="button" class='btn btn-info' ng-click="addAlert()">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button type="reset" ng-click="reset()" class="btn btn-danger">
<span class="glyphicon glyphicon-repeat"></span>
Reset All</button>
</td>
</tr>
</table>
</div>
<table class="table">
<!--IMPORT FILE-->
<tr>
<td>
<div style="position:relative;">
<a class='btn btn-primary' href='javascript:;' disabled>
</td>
</tr>
<!--ADD COMMENTS-->
<tr>
<td>
Add Comments*<div class="span5"><textarea name="bugnote_text" placeholder="Add comments here (max=600 characters)" rows="3" class="span10 ng-pristine
ng-valid ng-valid-maxlength" ng-maxlength="600"></textarea></div>
</td>
<td>
Add ftt*<input type="text" class="form-control" placeholder="Add ftthere">
</td>
</tr>
<form ng-submit="submit()" ng-controller="ExampleController">
<tr>
<td>
<button type="submit" id="submit" ngClick="Submit" class="btn btn-small btn-success"><span class="glyphicon glyphicon-pencil"></span> Submit</button>
<button class="btn btn-small btn-grey"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</td>
</tr>
</form>
</table>
</div>
{% endblock %}
{% block extrascript %}
{{ ngapp }}.controller("LayerCtrl", function ($scope, $http, $resource){
var layerresource_url = $resource("{% url 'api_list' 'v1' 'layer' %}");
console.log('initializing....')
$scope.$watch('yy', function () {
<!--alert($scope.yy);-->
$scope.update_layer();
});
$scope.update_layer = function(){;
console.log('Stage1: Initializing Primary Data... ');
layerresource_url.get({techtype__contains: $scope.selected, limit:1500},
function(data){
$scope.list = data['objects'][0]['layer'];
console.log($scope.layerlist);
},function(data, status){
console.log('Stage1: Internal error while loading initial data:'+status );
<!--alert('internal error');-->
}
);
};
});
{{ ngapp }}.controller("AlertDemoCtrl", function ($scope, $http, $resource){
$scope.alerts = [];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!', props : 0, input : ""});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
$scope.reset = function() {
angular.forEach($scope.alerts, function(v){
v.input = "";
v.props = 0;
});
};
$scope.remove = function(v){
v.hide = 1;
}
$scope.reset();
});
{% endblock %}
You can use AJAX if you don't want to use forms. In AngularJS, it would look like this. Note your controller should have the needed arguments:
$scope.addsomething = function() {
token = $window.localStorage.token;
//data to be submitted
$scope.data = {"name": $scope.name,"project": project_id,"some_url": someURL,"status": "1","type": 1};
$http.defaults.headers.common.Authorization = 'token '+$window.localStorage.token;
req = $http({
method: "POST",
url:"your_url/",
data:$scope.data,
headers: {
'Content-Type': 'application/json'
},
});
req.success(function(data,status) {
//do something on success
});
req.error(function(data, status, headers, config) {
//do something on error
});
}
On your backend you just have to point this URL to a view which will save it in the database. Hope this helps.