i am trying to get the Bootstrap Tooltip to work within a vue v-for loop.
i am using vue 3 and bootstrap 5.20
my code:
<script>
....
$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip();
});
export default {
.....
}
</script>
<template>
<div id="listForm" style="">
<table class="table table-striped table-bordered">
<thead >
<tr>
.....
</tr>
</thead>
<tbody>
<tr v-for="userEntry in userEntrys">
<td class="text-center">{{ userEntry.date }}</td>
<td class="text-center">{{ userEntry.place }}</td>
<td class="text-center">{{ userEntry.hours }}</td>
<td class="text-center"><a data-bs-toggle="tooltip" data-bs-placement="left" data-bs-container="body" :title="userEntry.hash">Log</a></td>
</tr>
</tbody>
</table>
</div>
</template>
i tried the tooltip outside of the v-for loop and it worked fine..
everytime i change something on the file and the vue live view in the browser updates, the tooltip within the loop works too.. but if i refresh the browser it never works again.
i hope someone can help me.
best regards Tom!
Related
I would love to change the background color on a row in a table when i click on the tr.
That's the code of the table:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th><small class="text-muted">#</small></th>
<th>Name</th>
<th>Heading</th>
<th>Productor</th>
</tr>
</thead>
<tbody>
<tr
v-for="company in allCompanies"
:key="company.id"
role="button"
#click="selectCompany(company)"
>
<td class="text-primary">
<small>#{{ company.id }}</small>
</td>
<td class="fw-bold">{{ company.name }}</td>
<td>{{ company.heading }}</td>
<td>
{{ company.productor }}
</td>
</tr>
</tbody>
</table>
</div>
And here the code of the method I call on the click event:
selectCompany(company) {
this.storeSelectedCompamy(company);
this.fetchShows(company.id);
console.log("change css");
}
Any help would be appreciated.
Thank you in advance
Valerio
Have a look here:
https://v2.vuejs.org/v2/guide/class-and-style.html
It looks like each <tr> corresponds to a company, so my approach would be to attach each row's state to its corresponding company as a property, and then toggle that property in selectCompany. Something like:
selectCompany(company) {
allCompanies.forEach(_company => _company.isSelected = false);
company.isSelected = true;
}
<tr
v-for="company in allCompanies"
:key="company.id"
:class="company.isSelected ? 'selected' : ''"
role="button"
#click="selectCompany(company)"
>
I have a simple table styled with bootstrap I am trying to display in the Popup of a chrome extension. The on-hover styling that should be applied to each row stops working towards the bottom of the list.
I can load up the popup.html in its own window (via chrome-extension://<my_extension_id>/popup.html and the styling renders just fine.
Here's a pared down version of what my popup.html looks like:
<html>
<head></head>
<body style="width: 200px;">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<table class="table table-sm table-hover">
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test (hover styling breaks here)</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</tbody>
</table>
</body>
I would expect there to be no difference between what chrome's popup window renders and what renders when viewing the popup in its own page. I have experienced similar other anomalies trying to build the styling for my popup. I'm hoping that if I can find an answer to this question, I can apply it to the other issues I've seen.
EDIT: here are some .gifs demonstrating the difference in behavior:
In Popup
In Page
I should also note that I can use chrome DevTools to manually set the :hover property, the table row's styling updates correctly.
I have a is-fullwidth Bulma table in my angular7 app which works fine. But now I need to add a angular component inside each row, and td tags lies inside that component. But when I do that, table rows not spans to its full width.
<table class="table is-fullwidth">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<app-table-row [details]="row">
</app-table-row>
</tr>
</tbody>
</table>
table-row.component.html
<td>
<div *ngIf="!showField"> {{ details.name }} </div>
<div *ngIf="showField" class="field">
<div class="control">
<input [value]="details.name" class="input" type="text">
</div>
</div>
</td>
<td>{{ details.address }}</td>
This outputs the following
if I remove the angular component and add tds normally, it spans correctly. Like this.
Why is it not work when angular component added? And how should I fix it?
The reason this is happening is probably because the td elements are not direct children of the tr, but children of the app-table-row component.
Not sure that it would make sense in your case, but you can change the selector property in the app-table-row component to select the tr itself, like so:
#Component({
selector: 'tr[app-table-row]',
...
})
export class AppTableRowComponent {}
And use it like this:
<table class="table is-fullwidth">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows" app-table-row [details]="row">
</tr>
</tbody>
</table>
This way the app-table-row is not a separate node in the DOM.
Page rendering is not working with iron:router please help me.Rendering is not working with code.Please find the bellow attached code.And we are users meteor add iron:router 0.9.4.And we used meteor 0.9.3.1. Page rendering is not working
<head>
</head>
<body >
<div>
{{> players}}
</div>
</body>
<template name ="editform">
<div class="container">
<div class="row" style="border-bottom: 5px solid gray;">
<h2>Profile</h2>
</div>
<div id="wrapper">
<table>
<tr>
<td>First name:</td>
<td><input type="text" name="pff_name"/></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="pfl_name"/></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="email" name="pfemail"/></td>
</tr>
<tr>
<td>Phone number:</td>
<td><input type="text" name="pfname"/></td>
</tr>
<tr>
<td>Company or Organization:</td>
<td><input type="url" name="pfname"/></td>
</tr>
</table>
</div>
</div>
</template>
<template name="players">
<div>
<table class="table table-condensed table-striped table-bordered table-hover no-margin">
<tr>
<th>IP</th>
<th></th>
</tr>
{{#each scorers}}
<tr>
<td><a href="{{ pathFor 'editform' }}" >{{ ip }}</a></td>
<td></td>
</tr>
{{/each}}
</table>
</div>
</template>
This router.js
Router.route("/", function() {
this.render("route");
});
It is unclear what you are trying to achieve.
May I suggest you to start by reading the Meteor Docs for starters.
For a simple app like this one you can use a structure like this:
/client (client side code files)
/server (server side code files)
collections.js
Check out a good way of structuring your app here.
First, you don't need the <head> and <body> tags here.
Then, you can create a layout template in client folder in which you can set the players template to render, also to add header, footer, etc to your page.
layout.html
<template name="layout">
{{>players}}
</template>
Then you need a players template in client folder as well.
I'm gonna go ahead and produce an simple example here to get you going. The user input value is collected, inserted into Players collection and for each player in that collection a new table row is created in div.result using a {{players}} helper.
players.html
<template name="players">
<div class="container">
<div class="row" style="border-bottom: 5px solid gray;">
<h2>Profile</h2>
</div>
<div id="wrapper">
<table>
<tr>
<td>First name:</td>
<td><input type="text" id="pff_name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" id="pfl_name" /></td>
</tr>
</table>
<button class="insert">Submit</button>
</div><br/>
<div id="result">
<table class="table table-condensed table-striped table-bordered table-hover no-margin">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
{{#each players}}
<tr>
<td>{{firstname}}</td>
<td>{{lastname}}</td>
</tr>
{{/each}}
</table>
</div>
</div>
</template>
collections.js
Create a new Meteor Collection called Players, which will store all the added documents.
Players = new Meteor.Collection("players");
players.js
Here, the players helper will return a cursor and a created Meteor method named addPlayer is called.
Template.players.helpers({
players: function() {
return Players.find();
}
});
Template.players.events({
'click .insert': function(event, template) {
var first = $('#pff_name').val();
var last = $('#pfl_name').val();
if(first !== "" && last !== "") {
Meteor.call("addPlayer", first, last);
}
$('#pff_name').val("");
$('#pfl_name').val("");
}
});
server.js
Adding the player to Players collection
Meteor.startup(function () {
Meteor.methods({
addPlayer: function(fname, lname) {
Players.insert({firstname: fname, lastname: lname});
}
})
});
routrer.js
Tell Iron Router to render the players template
Router.map(function () {
this.route('players', {
path: '/',
template: 'players',
layoutTemplate: 'layout'
})
});
EDIT:
You are using IronRouter version 0.9.4, but your route is defined for the new version.
Either update IronRouter to iron:router#1.0.0-pre3 or follow the notation I gave for this version.
Sorry to be blunt, but you really need to read this.
At the very, very top it says:
Router.route('/', function () {
this.render('Home');
});
When the user navigates to the url "/", the route above will render the template named "Home" onto the page.
You have the line this.render("route"); in your router, but no template named "route".
I am trying to find a way to revert a jQuery UI dialog's dialog() call.
What I am doing in my app first is calling dialog on a div as such:
$('#dialog').dialog({
...options
});
Then once the user presses the close button, I would like the div tag and its content to reappear again at the same place it was before calling dialog() but not in the jQuery dialog.
I've tried this :
$('#dialog').dialog('close');
$('#dialog').show();
but it doesn't work. It seems that the #dialog's content is emptied when dialog('destroy') is called.
Any ideas?
Thanks,
Jimmy
Perhaps what you can do is to duplicate #dialog to an new div, and dialog() that one, leaving the original untouched.
In fact it was a bit more difficult than a straight html() or append() since in my div I had a jQuery datatables component + a bunch of other custom events. So I first had to deeply clone its children with all the events then call fadeIn() fadeOut() in the right place. So here I go:
The HTML (the #dialog children get cloned Inside the #dialog2 div):
<div id="main">
<div id='dialog'>
<input id='input1' type="text"></input>
<input id='input2' type="text"></input>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div id='dialog2' style='display:block;'>
</div>
<button id="open">Detach Me</button>
The JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").children().clone(true, true).appendTo($("#dialog2"));
$('#dialog2').hide();
$('#open').click(function(){
$('#dialog2').fadeOut();
$("#dialog").dialog({
width: 1000,
height:800,
close : function(){
$('#dialog2').fadeIn();
return true;
}
});
});
this.datatable = $('table').dataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).on('click', function(){
$(this).addClass('selected', true);
});
}
});
});
</script>