Passing object values in vue button event - javascript

In my Vue template, I'm currently setting response data to an object called dateEvents which is structured like this:
<tbody v-for="dateEvent in dateEvents">
<tr>
<td>{{ dateEvent.id }}</td>
<td>{{ dateEvent.status }}</td>
<td><button v-on:click="changeStatus" type="button" class=" taskButton btn-default"><a style="color:white;">Accept</a></button></td>
</tr>
</tbody>
My data shows properly, and I'm calling a method/function with button click, and I can get the click to fire an event but not getting the value properly. I want to have access to the id and status of the clicked row's button within the method but can't figure out how to get it. dateEvent is being set in another function in my vue code so using this.dateEvents gets the base object but I need the specific data sent from the row that is clicked. Here's the vue code:
//vue code
methods: {
changeStatus: function(event) {
alert(this.dateEvents.status)
},

You can pass arguments to the method. In the template:
<button #click="changeStatus(dateEvent)">
And in your method:
changeStatus: function(dateEvent) {
console.log(dateEvent.status, dateEvent.id);
},

Related

Passing Variable as parameter in onclick method in Angular

I am writing a html in where the html will display a list of records with three fields - id, name and an icon. When the icon will be clicked by user, a method will be called where the id will be passed as parameter and details of that record will be returned. The code snipped I am following is as below -
<tr *ngFor="let userDetail of userDetails">
<td>{{ userDetail.id }}</td>
<td>{{ userDetail.firstname }} {{userDetail.lastname}}</td>
<td><a href="javascript:void(0);" (click) = "showUserDetails()" ><img src="/assets/user_details.png" width="20" height="20" /></a></td>
</tr>
Here I need to pass the userDetail.id when the showUserDetails() function will be created. But still unable to pass the parameter.
What will be best way to pass that parameter?
Thanks in advance.
You have to make sure:
You are passing the value into the method:(click) = "showUserDetails(userDetails.id)"
The method should be declared in the same component otherwise you have to bind e.g. the service it's implented in within a public variable in the components constructor.
I created a simple stackblitz project. that may can help you.

Creating a 'view' link in a grid listing that navigates to a detail route such as hero/:id in Angular

In my template I am doing the following:
<tbody>
<tr *ngFor="let h of heroes">
<td>{{ h.id}}</td>
<td>{{ h.name}}</td>
<td>{{ h.description}}</td>
<td>View</td>
</tr>
</tbody>
How can I make it so View is a link that navigates to /heroes/:id? I have this setup in my route config. I verified that it works by going to http://localhost:4200/heroes/1
Am I better off using the (click) event and calling a function such as viewHero(id). If I did this I wouldn't be sure how to pass the id. Also, if it can be done directly inside of the html template within the href tag or routerLink I would like to know how to do that too. My main problem seems to be accessing h.id inside of a string such as href="".
Update: I got the following to work, but still not happy with it:
<td><a (click)="viewHero(h)">View</a></td>
viewHero(hero) {
this.router.navigate(['/heroes', hero.id]);
}
There has to be a way to simply do this inside of the anchor tag directly. I am not getting a pointer finger when hovering the link.
Try this:
<tbody>
<tr *ngFor="let h of heroes">
<td>{{ h.id}}</td>
<td>{{ h.name}}</td>
<td>{{ h.description}}</td>
<td><a routerLink="/heroes/{{h.id}}">View</a></td>
</tr>
</tbody>

Is there a way to get the value inside the table by clicking an HREF Link?

I am reading a JSON file, accessed via Python. The values from JSON file will be then displayed on a table. Per row, I have a button. What I want is to see the value when I click the button.
What algorithm I could use in such a way that i could store the ALL values so when I click the button, I can get its corresponding ROW value.
Iteration of my JSON file below:
<tr>
<td align="center">{{ entryIteration.sha1 }}</td>
<td align="center">{{ entryIteration.requestedStatus }}</td>
<td align="center">{{ entryIteration.detectionName }}</td>
<td>{{ entryIteration.userRemarks }}</td>
<td>
Approve
Reject
View
</td>
</tr>
{% endfor %}
$('.btn btn-default').click(function(){
var tdtext1 = $(this).closest('tr').find('.tdclass1')
var tdtext2 = $(this).closest('tr').find('.tdclass2')
})
Use .closest() to get the value of data in the row where the button is
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Datatable hide and show rows based on a button click event

So I have this datatable that is generated by php dynamically once. But once it's loaded, I don't want to reload the whole table since there's only a small javascript if statement that I am doing. When you press the button, I compare a data attribute that is on my tr. If it doesn't fit, I'd like to hide them, else, I'd like to show them. So here is what I tried so far.
HTML
<div style="margin: 30px 0;">
<button class="btn btn-primary" id="myClientButton">Voir mes clients seulements</button>
</div>
<table id="advancedSearchTable">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Subject</th>
<th>Date</th>
<th>Profile</th>
</tr>
</thead>
<tbody>
{% for entity in entities %}
<tr data-user="{{ entity.user.id }}" class="values">
<td>{{ entity }}</td>
<td>{{ entity.mainphone }}</td>
<td>{{ entity.email }}</td>
<td>{{ entity.tagline }}</td>
<td>{{ entity.createdDate|date('d-m-Y') }}</td>
<td><span class="glyphicon glyphicon-eye-open"></span></td>
</tr>
{% endfor %}
</tbody>
</table>
The Loop is made in Symfony 2 (Using Twig Template, if you don't understand it it doesn't really matter) all you have to understand is that the attribute on "data-user" is created by PHP and that every entry of my database is going in this loop.
Then, in jQuery I have this:
<script>
$('#advancedSearchTable').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug- ins/9dcbecd42ad/i18n/French.json"
},
responsive: true
});
$('#myClientButton').on('click', function(){
if ($(this).hasClass('active')){
$(this).removeClass('active');
$('tr.values').show();
}
else{
$(this).addClass('active');
$('tr.values').each(function(){
if ($(this).attr('data-user') != 5){
$(this).hide();
}
});
}
});
</script>
It works very well. The only problem is that the DataTable then is not "replacing itself". So, for example, if it has 25 pages, it keeps 25 pages and when you press on the "next table page" button, it refreshes the "table page" and things are not hidden anymore. I searched alot but I couldn't find a way. I really don't want to use ajax for this, since it only need to be filled once with value and then it will only have to hide or show depending on the button being active or not... Is it even possible using this jQuery plugin ?
Thanks in advance.
Yes, it is indeed possible, but you will need a different approach. Hiding rows with jQuery and not through dataTables itself is generally a bad idea, since dataTables is not aware of changes made to the original <table> element in DOM. There is no "somewhere-in-code-another-script-has-hidden-a-row"-event dataTables can hook into. That is why dataTables seems to "forget" changes, it is simply not aware of those changes, and the dataTables internals stay untouched.
So use a custom filter instead. The following small piece of code does what you want - hiding all rows having a data-user attribute different than 5. It works across sorting and pagination. The last piece of code is an example of a reset-button.
$("#hide").click(function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(table.row(dataIndex).node()).attr('data-user') == 5;
}
);
table.draw();
});
$("#reset").click(function() {
$.fn.dataTable.ext.search.pop();
table.draw();
});
demo -> http://jsfiddle.net/d5hre2ux/
According to this https://datatables.net/examples/plug-ins/range_filtering.html it is possible to use data parameter to filter by any value shown on the table.
$("button").click(function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return data[3] != "63";
}
);
table.draw();
});

Generate delete confirmation box

In my application results are displaying as a table format.
Part of my code is,
{% for device in devices %}
<tr>
<td>{{ device.operator}}</td>
<td>{{ device.state }}</td>
<td>{{ device.tstampgps }}</td>
<td><button id='rec_delete'>Delete</button></td>
</tr>
{% endfor %}
Even if we press the delete button, I need to delete the particular record from the database. before that I want to prompt a confirmation box for that.
Can anyone help me?
Add a unique record Identifier that you can associate to DB to the button. Once confirmed you send this identifier to server with AJAX and sever code does the DB delete. Also change ID to class on repeating elements since ID's must be unique
HTML
<tr>
<td>{{ device.operator}}</td>
<td>{{ device.state }}</td>
<td>{{ device.tstampgps }}</td>
<td><button class='rec_delete' data-record_id="{{ device.DB_ID }}">Delete</button></td>
</tr>
JS
$('button.rec_delete').click(function(){
/* data() method reads the html5 data attribute from html */
var record_id=$(this).data('record_id');
if( confirm( 'Are you sure') ){
$.post( 'serverPage.php', { id: record_id}, function(){
/* code to run on ajax success*/
$(this).closest('tr').remove();
})
}
})
Server will receive the post key id as you would with any other form element name
Since I don't know Django, this doesn't include the delete part, which I assume you will AJAXify that (do an asynchronous request to delete). I'm also showing the $devices and $deletes variables as local variables here separately, more or less so you can see how you can store references and then work from those references (which I believe is a better practice than reselecting over and over).
Note also the use of:
jQuery(document).ready(function r($){
I'm using jQuery() in the global scope, which in a larger app you should always do to keep from conflicting with other libraries/frameworks which may use $(). This is also a best practice, and you can use $() within that anonymous function (closure). It's best to get used to doing it this way, IMO.
<table>
<thead>
<tr>
<th>Operator</th>
<th>State</th>
<th>T-Stamp GPS</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="device">
<td>Verizon</td>
<td>OK</td>
<td>033830928</td>
<td>
<button type="button" id="d001" class="delete">Delete</button>
</td>
</tr>
...
</tbody>
</table>
NOTE
I made a slight but important change, with reference to the $self, since the AJAX will run the success handler after this is out of scope:
jQuery(document).ready(function r($){
var $devices = $('tr.device'),
$deletes = $devices.find('button.delete');
$deletes.click(function d(){
var $self = $(this).parents('tr.device'),
del = confirm('Delete device?');
if (del) {
// Do $.ajax() request, maybe using the
// clicked button's ID. Or you could put
// the row to delete ID on the TR element.
// And then on success of the AJAX, run:
$self.fadeOut(500, function f(){
$self.remove();
});
}
});
});​
http://jsfiddle.net/wMqr8/2
You can add a click event to your JavaScript, and if the user chooses the "ok" button, you can send a request to the view that takes care of removing the record or whatever
Try this:
<button id='rec_delete' onclick="return confirm('Are you sure?')">Delete</button>

Categories