I have a simple view:
<div id="purchases">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Manager</th>
</tr>
</thead>
<tbody>
<tr v-for="purchase in purchases">
<td>{{ purchase.created_at }}</td>
<td>{{ purchase.weeks }}</td>
<td>{{ purchase.weekly_cost }}</td>
</tr>
</tbody>
</table>
</div>
and a simple vue component in its own js file:
$(document).ready(function() {
var purchases = new Vue({
el: '#purchases',
data: {
purchases: []
},
ready: function() {
var that;
that = this;
$.ajax({
url: '/purchases.json',
success: function(res) {
console.log(res)
that.purchases = res;
}
});
}
});
});
...but no data is loading in the view and when I look at the network tab in my devtools, the ajax call is never made. Why would this happen?
Related
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).
Router.map(function() {
this.resource('users', { path: '/stores/'+store_id+'/users' });
this.route('user', { path: '/stores/'+store_id+'/users/:user_id'}, function() {
this.resource('devices', { path: '/devices' });
});
});
On devices page I want to go back to /users/:user_id.
Here is my template/devices.hbs
<table>
<tr>
<th>model</th>
<th>user_id</th>
</tr>
{{#each model as |device|}}
<tr>
<td>{{device.model}}</td>
<td>{{#link-to "???" ?? ???}}{{device.user_id}}{{/link-to}}</td>
</tr>
{{/each}}
</table>
I don't how to go back to the specific resource.
Use user.index, because it's fully qualified route name with URL: /users/:user_id.
{{#link-to 'user.index'}}Go back to /users/:user_id{{/link-to}}
<table>
<tr>
<th>model</th>
<th>user_id</th>
</tr>
{{#each model as |device|}}
<tr>
<td>{{device.model}}</td>
<td>{{#link-to "???" ?? ???}}{{device.user_id}}{{/link-to}}</td>
</tr>
{{/each}}
</table>
Thanks to #daniel-kmak for the tips. The route is fully qualified at user.index
<table>
<tr>
<th>model</th>
<th>user_id</th>
</tr>
{{#each model as |device|}}
<tr>
<td>{{device.model}}</td>
<td>{{#link-to 'user.index'}}{{device.user_id}}{{/link-to}}</td>
</tr>
{{/each}}
</table>
I have in my Ember App, a route displaying a list of offers;
the model is loaded by jquery ajax (I don't use Ember-data):
Ember.$.ajax({
type: 'GET',
url: App.restAPIpath + '/offers/',
headers: {
"tokens": localStorage.tokens
},
async: false
}).then(function(res) {
data = res.offers;
});
return data;
The offers are shown in the template using a datatable and in each row there's a delete button that sends an ajax delete request to the server and correctly deletes the right offer:
{{#view App.dataTableView}}
<thead>
<tr>
<th>Created</th>
<th>Name</th>
<th>Deadline</th>
<th>Duration</th>
<th>Delete?</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Created</th>
<th>Name</th>
<th>Deadline</th>
<th>Duration</th>
<th>Delete?</th>
</tr>
</tfoot>
<tbody>
{{#each offer in model}}
<tr>
<td>
{{offer.createdAt}}
</td>
<td>
{{#link-to 'eng.offers.edit' offer}}{{offer.name}}{{/link-to}}
</td>
<td>
{{offer.deadline}}
</td>
<td>
{{offer.optionDuration}}
</td>
<td>
<button class="form-button-red" {{action "deleteOffer" offer}}>Delete</button>
</td>
</tr>
{{/each}}
</tbody>
{{/view}}
but then I need to update the model (and refresh the view?) because if not the deleted offer is still shown until you refresh the page...
I'd recommend switching your ajax to async, you'll block the router from doing other important things. You should be able to accomplish the same results doing this:
return Ember.$.ajax({
type: 'GET',
url: App.restAPIpath + '/offers/',
headers: {
"tokens": localStorage.tokens
},
}).then(function(res) {
return res.offers;
});
Then I'd do something like this for your delete (I'm going to guess a bit of your code) in your controller's delete action:
actions:{
delete: function(item){
var self = this;
Ember.$.ajax({
type: 'DELETE',
url: App.restAPIpath + '/delete/' + item.get('id'),
headers: {
"tokens": localStorage.tokens
},
}).then(function(){
//manually remove the item from your collection
self.removeObject(item);
});
}
}
BTW I think delete is a reserved key word and jslint and some minimizers are total haters, so you might do something like deleteItem