I'm using Django and the app Bootstrap-table to correctly format my tables.
I've got a lot of data so I'm using a server-side pagination. It's working great.
Now I'd like to implement some method like a nextPage method.
By combining the example jsfiddle of server-side pagination + method nextPage, it doesn't work : Clicking on the button nextPage does nothing even if it's bound to nextPage method:
http://jsfiddle.net/ThePhi/msj2apLb/1/
<button id="button2" class="btn btn-default">nextPage</button>
<table data-toggle="table"
data-url="http://issues.wenzhixin.net.cn/examples/bootstrap_table/data"
data-pagination="true"
data-side-pagination="server"
data-page-list="[5, 10, 20, 50, 100, 200]"
data-search="true"
data-height="300">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" data-align="right" data-sortable="true">Item ID</th>
<th data-field="name" data-align="center" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
<script>
var $table = $('#table'),
$button2 = $('#button2');
$(function () {
$button2.click(function () {
$table.bootstrapTable('nextPage');
});
});
</script>
I forgot to put id="table" ...
working jsFiddle: http://jsfiddle.net/ThePhi/msj2apLb/1/
Related
So basically, I am passing a context from views to my template.
In my template I am using 'for loop' to view the context in a tabular form and also attaching a button for every table row.
When that button is clicked, I want to call a javascript function(that has ajax call).
I need to get values of row elements for that particular row to use in my function.
My view function:
def asset_delivery(request):
deliverylist = Delivery.objects.filter(status='Added to Delivery List')
context = {'deliverylist': deliverylist}
return render(request, 'gecia_ass_del.html', context)
So far I tried passing those values as parameters in the following way.
My html template table:
<table class="table">
<thead style="background-color:DodgerBlue;color:White;">
<tr>
<th scope="col">Barcode</th>
<th scope="col">Owner</th>
<th scope="col">Mobile</th>
<th scope="col">Address</th>
<th scope="col">Asset Type</th>
<th scope="col">Approve Asset Request</th>
</tr>
</thead>
<tbody>
{% for i in deliverylist %}
<tr>
<td id="barcode">{{i.barcode}}</td>
<td id="owner">{{i.owner}}</td>
<td id="mobile">{{i.mobile}}</td>
<td id="address">{{i.address}}</td>
<td id="atype">{{i.atype}}</td>
<td><button id="approvebutton" onclick="approve({{i.barcode}},{{i.owner}},{{i.mobile}},{{i.address}},{{i.atype}})" style="background-color:#288233; color:white;" class="btn btn-indigo btn-sm m-0">Approve Request</button></td>
</tr>
{% endfor %}
</tbody>
</table>
The table is displayed perfectly but the button or the onclick or the function call does not seem to work.
My javascript function:
<script>
function approve(barcode2, owner2, mobile2, address2, atype2){
console.log('entered approved');
var today = new Date().getFullYear()+'-'+("0"+(new Date().getMonth()+1)).slice(-2)+'-'+("0"+new Date().getDate()).slice(-2);
$.ajax({
type:'POST',
url: 'deliveryupdate/'+barcode+'/',
dataType: 'json',
data:{
barcode: barcode2,
owner: owner2,
mobile: mobile2,
address: address2,
atype: atype2,
status:'Authority Approved',
statusdate: today,
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
},
beforeSend: function() {
console.log('before send');
},
success: function(){
console.log("success log");
swal("Success!","Asset request has been approved","success");
},
error: function(){
console.log("error");
}
});
}
</script>
I checked the browser logs and it looks like the function is not getting executed, meaning the problem lies with the function call or the button. Please help.
The code is working on my end. I have reduced the function to:
function approve(){console.log('entered approved');}
without any parameters and 'entered approved' is logged to the console. Check if you are setting the correct parameters and if the console throws an error. Simplify your function and add the parameters one by one in order to troubleshoot this.
I can't seem to load the data information on the html table from the api via using vue and axios
I am adding vue as my frontend to my rest api and i have called the api correctly using axios the problem i am having is there is no data shown but the loop displays the number of lines cos i have 3 entries and the table shows 3 empty spaces but no meaningful data and there's no console error please what ami i doing wrong ?
<div class="body">
<table class="table table-bordered table-striped table-hover dataTable ">
<thead>
<tr>
<th>Article Id </th>
<th>Title</th>
<th>Body</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Article Id </th>
<th>Title</th>
<th>Body</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr v-for="article in articles" :key="article.article_id">
<td>{{ article.article_id }}</td>
<td>{{ article.article_title }}</td>
<td>{{ article.article_body }}</td>
<td><button #click="geArticle(article.article_id)" class="btn btn-round btn-primary">Edit</button></td>
<td><button #click="deleteArticle(article.article_id)" class="btn btn-round btn-danger">Delete</button></td>
<td></td>
</tr>
<script>
new Vue({
el: "#startapp",
data: {
articles: [],
// loading: false,
currentArticle: {},
message: null,
currentArticle: {},
newArticle: {'article_title': null, 'article_body': null}
},
mounted(){
this.getArticles();
},
methods: {
getArticles: function() {
axios({
method: 'get',
url: '/api/article'
}).then((response) => this.articles = response.data)
}
}
});
</script>
The data from the api is supposed to show the article_id, article_title and article_body but i get blank spaces and there is no error
One of the things that is likely to go wrong especially as there are no error messages showing is forgetting to run your json-server package. This should run simultaneously as your development tools.
First run:
npm run json
While the above is still running, open another terminal and run this:
npm run serve
after followed many tutorials about how to integrate Django rest in React i successed to fetch data from my api like this , but the header of my table repeat himself by the numbers of objects i fetch from my data , i have 3 products in my data so that is make the table 3 times .
When i try to move the {this.state.todos.map(item => ( just before my i get an error because that "break" my tag , so i can put {this.state.todos.map(item => ( just before my or just after , someone can help me plz ? i just want to repeat the for each item but not all the table , thanks you for help
Render of my table in the local server
import React, { Component } from 'react';
class Products extends Component {
state = {
todos: []
};
async componentDidMount() {
try {
const res = await fetch('http://127.0.0.1:8000/api/');
const todos = await res.json();
this.setState({
todos
});
} catch (e) {
console.log(e);
}
}
render() {
return (
<div>
{this.state.todos.map(item => (
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="bg-gray text-white">
<th>Id</th>
<th>Category</th>
<th>Name</th>
<th>Short Description</th>
<th>Price</th>
<th class="text-center">Image</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">{item.title}</td>,
<td scope="row"></td>,
<td></td>
<td></td>
<td></td>
<td></td>
<td>Delete</td>
</tr>
</tbody>
</table>
))}
</div>
);
}
}
export default Products;
You're mapping over the whole table. This will map each item to a row:
class Products extends Component {
state = {
todos: []
};
async componentDidMount() {
try {
const res = await fetch('http://127.0.0.1:8000/api/');
const todos = await res.json();
this.setState({
todos
});
} catch (e) {
console.log(e);
}
}
render() {
return (
<div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="bg-gray text-white">
<th>Id</th>
<th>Category</th>
<th>Name</th>
<th>Short Description</th>
<th>Price</th>
<th class="text-center">Image</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.todos.map(item => (
<tr>
<td scope="row">{item.title}</td>,
<td scope="row"></td>,
<td></td>
<td></td>
<td></td>
<td></td>
<td>Delete</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}
I am making a complete admin and invoice app in Django.
For the invoice app, as the user clicks on "Create Sales Invoice" the invoice screen appears.
Now I want the system to dynamically generate new bill as soon as this screen appears, but not saved. As the user starts entering item, I want a new item detail (i.e. each bill has one item detail which has the list of items, its quantity and price).
However, none of them shall be saved unless the user clicks on create bill button.
I need help in how to do this thing, ie create a bill and item detail as the user goes to a create bill, link these two with foreign key, but also have the option to discard them if the user does not end up on clicking "save" button.
Edit 1
My invoicing HTML:
{% extends "base.html" %}
{% block title %}
{% load static from staticfiles %}
<script src="{% static 'bill/script.js' %}"></script>
<link rel="stylesheet" href="{% static 'bill/style.css' %}">
<title>Sales Invoice</title>
{% endblock %}
{% block content%}
<invoice>
<div id="invoice">
<invoiceheader>
<!--
<h1>Invoice</h1>
<address>
<p>Jonathan Neal</p>
<p>101 E. Chapman Ave<br>Orange, CA 92866</p>
<p>(800) 555-1234</p>
</address>
<span><img alt="" src="logo.png"><input type="file" accept="image/*"></span>
-->
</invoiceheader>
<invoicearticle>
<!--<h1>Recipient</h1>-->
<code>
<p>Customer code:
<input id="customer-code" ></input></p>
</code>
<address>
<p></p>
<p id="companyname">Some Company</p>
<p id = "companyaddress">c/o Some Guy</p>
</address>
<table class="meta">
<tr>
<th><span>Invoice #</span></th>
<td><span>101138</span></td>
</tr>
<tr>
<th><span>Date</span></th>
<td><span></span></td>
</tr>
<tr>
<th><span>Amount Due</span></th>
<td><span id="prefix">Rs. </span><span>600.00</span></td>
</tr>
</table>
<table class="inventory" id="inventory_table">
<thead>
<tr>
<th colspan="1"><span>Item Code</span></th>
<th colspan="2"><span>Item Name</span></th>
<th colspan="1"><span>Unit Rate</span></th>
<th colspan="1"><span>Discount 1</span></th>
<th colspan="1"><span>Quantity</span></th>
<th colspan="1"><span>Discount 2</span></th>
<th colspan="1"><span>Free Quantity</span></th>
<th colspan="1"><span>VAT Type</span></th>
<th colspan="1"><span>VAT</span></th>
<th colspan="1"><span>Net Rate</span></th>
</tr>
</thead>
<form>
<tbody>
<tr>
<td colspan="1"><a class="cut">-</a><span class="itemcode" contenteditable></span></td>
<td colspan="2"><span contenteditable></span></td>
<td colspan="1"><span contenteditable>150.00</span></td>
<td colspan="1"><span contenteditable></span></td>
<td colspan="1"><span contenteditable>4</span></td>
<td colspan="1"><span contenteditable></span></td>
<td colspan="1"><span contenteditable></span></td>
<td colspan="1"><span contenteditable></span></td>
<td colspan="1"><span contenteditable></span></td>
<td colspan="1"><span contenteditable></span></td>
</tr>
</tbody>
</form>
</table>
<a class="add">+</a>
<table class="balance">
<tr>
<th><span>Total</span></th>
<td><span data-prefix></span><span>600.00</span></td>
</tr>
<tr>
<th><span>Amount Paid</span></th>
<td><span data-prefix></span><span>0.00</span></td>
</tr>
<tr>
<th><span>Balance Due</span></th>
<td><span data-prefix></span><span>600.00</span></td>
</tr>
</table>
</article>
</div>
</invoice>
<script type="text/javascript">
/* url_sellbill = '{% url "billbrain:sellbill" %}' */
csrf_token='{{csrf_token}}'
</script>
{% endblock %}
My related jquery file (only the necessary part):
Generating Table:
function generateTableRow() {
var emptyColumn = document.createElement('tr');
emptyColumn.innerHTML = '<td><a class="cut">-</a><span class="itemcode" contenteditable></span></td>' +
'<td colspan="2"><span contenteditable></span></td>' +
'<td><span contenteditable>100.00</span></td>' +
'<td><span contenteditable></span></td>' +
'<td><span contenteditable></span></td>'+
'<td><span contenteditable></span></td>' +
'<td><span contenteditable></span></td>'+
'<td><span contenteditable></span></td>' +
'<td><span contenteditable></span></td>' +
'<td><span contenteditable></span></td>' ;
return emptyColumn;
}
Adding customer details on user entering customer code:
$( "#customer-code" ).change(function() {
/*alert( "Handler for .change() called." );*/
var input = $("#customer-code").val();
(function() {
$.ajax({
url : "",
type : "POST",
data : { customer_code: input,
datatype: 'customer',
'csrfmiddlewaretoken': csrf_token}, // data sent with the post request
dataType: 'json',
// handle a successful response
success : function(jsondata) {
$('#companyname').html(jsondata['name'])
$('#companyaddress').html(jsondata['address'])
console.log(jsondata); // log the returned json to the console
console.log("success"); // another sanity check
},
});
}());
});
Similarly, for products, on user entering product id, the other details are auto-generated:
$("#inventory_table").on("focus", ".itemcode", function(){
$(this).data("initialText", $(this).html());
/*alert( "On focus for table inventory called." );*/
});
$("#inventory_table").on("blur", ".itemcode", function(){
/*alert( "On blur for table inventory called." );*/
var input = $(this).html();
if ($(this).data("initialText") !== $(this).html()) {
var el = this;
/*valueis='Hi 5'
alert($(this).closest('tr').find('td:nth-child(4) span').html());*/
(function() {
$.ajax({
url : "",
type : "POST",
data : { item_code: input,
datatype: 'item',
'csrfmiddlewaretoken': csrf_token}, // data sent with the post request
dataType: 'json',
// handle a successful response
success : function(jsondata) {
$(el).closest('tr').find('td:nth-child(2) span').html(jsondata['name'])
$(el).closest('tr').find('td:nth-child(2) span').html(jsondata['name'])
$(el).closest('tr').find('td:nth-child(3) span').html(jsondata['sellingprice'])
console.log(jsondata); // log the returned json to the console
alert(jsondata['name']);
console.log("success"); // another sanity check
},
});
}());
}
});
Finally, this is my views.py file's relevant function:
def bill(request):
if request.method == 'POST':
datatype = request.POST.get('datatype')
if (datatype == 'customer'):
customerkey = request.POST.get('customer_code')
response_data = {}
response_data['name'] = Customer.object.get(customer_key__iexact=customerkey).name
response_data['address'] = Customer.object.get(customer_key__iexact=customerkey).address
jsondata = json.dumps(response_data)
return HttpResponse(jsondata)
if (datatype == 'item'):
productkey = request.POST.get('item_code')
response_data = {}
response_data['name'] = Product.object.get(prodkey__iexact=productkey).name
response_data['sellingprice'] = float(Product.object.get(prodkey__iexact=productkey).selling_price)
#response_data['address'] = Product.object.get(prodkey__iexact=productkey).address
jsondata = json.dumps(response_data)
return HttpResponse(jsondata)
return render(request, 'bill/invoicing.html')
You should use Model Forms to output to the user a form to fill and create an object after submit. You can also use some context data if you need to pre-fill some informations in the form.
Another way is to just create an object and flag it as "CANCELLED" if you want to remember some user's tries (what can be useful sometimes) or just remove it (what can cause performance issues if it is very common situation to not fill started bill).
I am trying to load page in two parts.
second part is only render when user click on 'show more details'
<script>
$(document).ready(function(){
$('#toggle_details').click(function(e){
e.preventDefault();
if ($(this).hasClass('up')){
$(this).removeClass('up').addClass('down');
$('#toggle_text').html('Show More Details');
}
else {
$(this).removeClass('down').addClass('up');
$.ajax({
url: 'some_url_returning_json',
data: $(this).serialize(),
processData: false,
dataType: "json",
success: function(data) {
$( '.name' ).html(data.name);
$( '.lname' ).html(data.lname);
alert(data.name);
}
})
$('#toggle_text').html('Hide Details');
}
$('#details').slideToggle("slow");
return false;
});
$('#details').hide();
});
</script>
and my html is :
<div class="ad-grp-tbl creative-tbl custom-tbl">
<table width="100%">
<tr>
<th>Status:</th>
<td id='status'>{{ status }}</td>
</tr>
</table>
<table width="100%" id="details">
<tr>
<th>Name:</th>
<td id="name" >{{data.name}}</td>
</tr>
<tr>
<th>Last Name:</th>
<td id ="lname">{{ data.lname}}</td>
</tr>
</table>
<table>
<tr>
<th class="tog">
<span id="toggle_text" style="color:blue;font-weight:bold">Show More Details</span>
<span class="down" id="toggle_details"></span>
</th>
<td></td>
</tr>
</table>
</div>
So Basically I am not able to load the json return value in the template.
hw can i fix it. or my approach for solving the problem is wrong.
Thanks.
I show you an example:
def post_ajax(request):
TOTLE = 5
OFFSET = int(request.GET.get('offset', 0))
END = OFFSET + TOTLE
if OFFSET + 1 >= Post.objects.count():
LOADED = "已经全部加载完毕"
return HttpResponse(LOADED)
posts = Post.objects.filter(pub_time__lte=timezone.now())[OFFSET:END]
json_list = []
for post in posts:
t = get_template('blog/ajax_post.html')
html = t.render(Context({'post': post}))
# print(html)
json_list.append({
'html': html,
})
data = json.dumps(json_list)
return HttpResponse(data, content_type="application/json")
Is this you need?
Ajax + JQuery will get response and should put data appropriately in the page. Template of original page doesn't have much role to play.
However, you have to implement separate url+view+template that will handle the ajax request. You can use existing view but need to handle for ajax request (i.e. just to send part of html, likely using another template).
The template for ajax response should send only the relevant part of html and not the entire html page.
In the HTML you have ids set but you are using the class selector.
It should be:
$( '#name' ).html(data.name);
$( '#lname' ).html(data.lname);
instead of:
$( '.name' ).html(data.name);
$( '.lname' ).html(data.lname);
. is the class selector and # is the id selector.
You can try using Firebug or Chrome Dev Tools to see that the above returns the items.