I have a problem with backbone event.
// The DOM events //
events: {
'click table.table-sorter th[data-column]' : 'sort'
},
<thead>
<tr>
<th data-column="name">name <i class="icon-sort"></i></th>
<th>description</th>
</tr>
</thead>
The event is well trigger when I click on the th but not on the i.
But if I use the on function of jQuery in the render view function it works:
$("table.table-sorter th[data-column]").click(function(){
<i> is trigger
})
Thanks
Related
I am using Laravel & Vuejs & want to create invoice using barcode scanner.everything is working fine except barcode scan. in this stage how to insert row using barcode scanner?
below my code examples.
addNewLine(){
this.form.items.push({
barcode:null,
name:null,
price:0,
qty:0,
subtotal:0
})
}
<div<input type="search" v-model="barcode"></div>
<table>
<thead>
<tr>
<th>SL</th>
<th>Barcode</th>
<th>Item Name</th>
<th>Sale Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in form.items">
<td>{{index + 1}}</td>
<td><input type="text"v-model="item.barcode"/></td>
<td><input type="text"v-model="item.name"/></td>
<td><input type="text"v-model="item.price"/></td>
<td><input type="text"v-model="item.qty"/></td>
<td><input type="text"v-model="item.subtotal"/></td>
</tr>
</tbody>
</table>
<button class="btn btn-sm " #click="addNewLine">Add New Line</button>
I have implemented a barcode scanner with vuejs.
Requisite: Set the barcode scanner machine to send "enter" at the end of scan (commonly there are several options)
Step 1: In the Vue App, set the focus in the input "barcode"
Step 2: Listen the event #keyup:enter of your input and bind with a method of your component like "addNewItem". Something like <input #keyup:enter="addNewItem" />
Step 3: In the method "addNewItem" do what is necessary, such as autocomplete the name, price of the item and other stuff. Finally, push your new item to your array "form.items"
So, when the scanner machine scan a barcode and send an enter, your input is filled with the barcode and dispatch the keyup enter event so then the method addNewItem is called.
I've created an web app that searches for online car ads and populates the page with a few tables after a post request.It looks like this:
After Search:
Every table element has a save button which should save those values to the database but my problem is that the page gets refreshed after submitting a post request. How can I do this without refreshing the page?
Table:
<form th:action="#{/saveAd}" method="POST">
<table class="table table-sm table-hover">
<thead class="thead-dark">
<tr>
<th>Imagine</th>
<th>Titlu Anunt</th>
<!-- <th style="width: 16.66%">Link</th> -->
<th>Pret</th>
<th>Oras</th>
</tr>
</thead>
<tbody id="myTable">
<th:block th:each="element : ${lista}">
<trth:onclick="'javascript:rowClicked(\'' + ${element.url} + '\');'">
<td><img th:src="#{${element.img}}" class="size" /></td>
<td th:text="${element.title}"></td>
<td th:text="${element.pret}"></td>
<td th:text="${element.oras}"></td>
<td><input class="btn btn-danger" type="submit"value="Save"></td>
</tr>
</th:block>
</tbody>
Controller:
#RequestMapping(path = "/saveAd", method = RequestMethod.POST)
public String saveAd(#ModelAttribute("adValue") AdValue adValue) {
System.out.println(adValue.getImg());
System.out.println(adValue.getLink());
System.out.println(adValue.getOras());
System.out.println(adValue.getPret());
System.out.println(adValue.getTitle());
return "home";
}
And also, how could I bind the list to a model object after pressing the save button?
I guess you may like this project. It is similar with what you need :
https://github.com/adinafometescu/tutorials/tree/master/spring-elasticsearch
You can use .bootstrapTable(). It a very method to update dynamically your table.
<table id="car-table" class="table table-striped">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="title">Title</th>
<th data-field="price">Price</th>
<th data-field="city">City</th>
<th data-width="10" data-formatter="saveButtonFormatter"/>
</tr>
</thead>
</table>
The beauty is that it will map the data-field to a java object.
js stuff:
function saveButtonFormatter(value, row, index){
var adId = row.id;
return "<button class=\"btn btn-danger \" data-title=\"Save\"
data-toggle=\"modal\" onclick=\"saveAd(\'"+adId+"\')\"
</button>"
}
The function saveAd(adId) will call the rest endpoint and will update the bootstrap table on success.
I see that in your thymeleaf you don't have inputs. I suggest to not post your entire object if you don't need user input, just the id.
// anotate the controller class with #RestController
#Autowired
AdService adService;
#PostMapping(path = "/ad/{id}")
public ResponseEntity<?> saveAd(#PathVariable("id") String id) {
adService.saveAd(id);
return new ResponseEntity<>(HttpStatus.ACCEPTED);
}
P.S : don't write code in Romanian :D
just a very new to Vue 2.0, i actually use if for Laravel 5.4, now you can see from below link that i created one component which name is "canvas-chart", what actually i want show is a filterable table, and then to get more Json data from next steps, but now it always show me "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." , can not understand that i follow the official documentation to use it why it's not work?
new Vue({
el:'#filterTest',
data:{
keywords:[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}]
},
computed: {
filterM: function () {
var self = this
return self.filter(function (word) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
});
Vue.component('canvas-chat',{
template:'#canvasChart',
props:['keywordsData']
})
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<th v-for="key.id in keywordsData">
<span class="arrow" ></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="key.name in keywordsData">
<td v-for="key.phone in keywordsData"> {{key.name}}</td>
</tr>
</tbody>
</table>
</script>
<div id="filterTest">
<canvas-chat keywordsData="keywords" ></canvas-chat>
</div>
You have a few issues:
You must register the canvas-chat component first before you use it in the main component (put Vue.component('canvas-chat', ... before new Vue(...)).
Your v-for loops are wrong. They should be like v-for="key in keywordsData", not v-for="key.id in keywordsData".
The v-fors on the tr and td elements don't make sense; you will have to process the keywordsData first (perhaps in a computed property) to get it into the correct format you want, then loop over that.
You must bind the keywordsData prop in the template like this: :keywords-data="keywords".
I'm working on a project using codeigniter. I'm trying to use datatables to view data fetched by ajax. the network tab shows that the ajax returned values correctly but the function is marked as 404 and I get this error
"DataTables warning: table id=data - Ajax error. For more information about this error, please see http://datatables.net/tn/7"
Here's the ajax in the network tab
I checked the response and it's correct. I've opened the ajax function like this: domain.com/module/controller/merchantsTable and I got correct data
{ "merchantsdata":[{"id":"6","email":"user#mail.com"},{"id":"7","email":"user2#mail.com"}]}
datatables code [updated: added 'processing' and 'serverSide']
<table id="data">
<thead>
<tr>
<th>id</th>
<th>email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>email</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
//base_url refers to https://www.domain.com/
$(function () {
$('#data').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?=base_url()?>merchants/admin_merchants/merchantsTable",
"columns": [
{ "merchantsdata": "id" },
{ "merchantsdata": "email"}
],
"order":[0 , 'desc'],
"lengthMenu": [[20, 50, -1], [20, 50, "All"]]
} );
});
So how to fix this issue and make it work?
change to
<table id="data">
<thead>
<tr>
<th>id</th>
<th>email</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>email</th>
</tr>
</tfoot>
</table>
Worked without modifying the code. My mistake, there was another folder in the root named 'merchants' so ajax didn't fetch data from the codeigniter route path (merchants module) but from the folder in the root which is wrong so I renamed the folder in the root and it worked.
I don't know how to render datatable in view, here is the code in my controller.
public function getTable()
{
$tasks = Todo::select(array('todos.id','todos.task','todos.deadline','todos.status'));
return Datatables::of($tasks)->make();
}
Any help will be appreciated.
You need to create the datatable structure in your view and call the controller method with jQuery.
For example in your view you can set the following html:
<table id="tasks" class="table table-striped table-hover">
<thead>
<tr>
<th class="col-md-3">ID</th>
<th class="col-md-3">Task</th>
<th class="col-md-3">Deadline</th>
<th class="col-md-3">Status</th>
</tr>
</thead>
</table>
And then add the following jQuery that calls your controller action
<script type="text/javascript">
var oTable;
$(document).ready(function() {
oTable = $('#tasks').dataTable( {
"sPaginationType": "bootstrap",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{{ URL::to('tasks/getTable') }}"
});
});
</script>
You also need to reference the following files in your page
http://code.jquery.com/jquery-1.10.2.min.js
and
http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js
and also add the Controller/getTable method to your routes file (in the example above I wrote it as tasks/getTable
If you need features like filters, sorting, etc., try Nayjest/Grids package for Laravel. If you need just simple table -- previous response is preferred.