I am doing something wrong in my Meteor app but simply cannot find out what it is. I'm not receiving any data in the UI. Here's the code.
lib/common.js
Data = new Meteor.Collection('data2');
'data2' is a collection I created and responds fine in mongo shell
server/app.js
Meteor.publish("Data", function() {
return Data.find({});
});
client/app.js
Meteor.subscribe("Data");
client/helpers.js
Template.home.helpers({
results: function(){
return Data.find();
}
});
I've even tried with specifying the two columns-field1, 2 in find() to no avail.
client/home.html
<template name="home">
<table class="table table-striped tablesorter z-depth-5">
<thead>
<tr>
<th width="15%">field1</th>
<th width="15%">field2</th>
</tr>
</thead>
<tbody>
{{#each results}}
<tr>
<td>{{field1}}</td>
<td>{{field2}}</td>
</tr>
{{/each}}
</tbody>
</table>
Inspection findings -
Data.find().fetch()
[]
Solved:
The mistake I was making was that I was calling the 'local' DB from the c:\data\db directory created when I installed mongodb on my system. But the meteor db is not located there but resides in /.meteor. Upon correction, it works.
Related
I have some tabular data with the headers ('Type', 'Name'). I would like to select all items in column 'name', to check if they contain a search string. Each item in that column has the role 'gridcell', and the description 'Name'. See attached image1.
getByRole('gridcell', {description: /name/i}) doesn't work. I've looked through the typescript declarations of the queries and nothing seems helpful. How can one accomplish this?
Use getAllByRole('cell', {description: /name/i}) to retrieve an array containing the cells in column Name.
Check the array contains a certain value using toContain(item).
https://jestjs.io/docs/expect#tocontainitem
An example (using React):
'App.js'
function App() {
return (
<div className='App'>
<table>
<thead>
<tr>
<td id='name'>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td aria-describedby='name'>J Blogs</td>
</tr>
<tr>
<td aria-describedby='name'>J Doe</td>
</tr>
<tr>
<td aria-describedby='name'>J Hancock</td>
</tr>
</tbody>
</table>
</div>
);
}
export default App;
'App.test.js'
import { render, screen } from '#testing-library/react';
import App from './App';
test('retrieves all cells described by name', () => {
render(<App />);
const cells = screen.getAllByRole('cell', {description: /name/i});
const cellValues = cells.map(cell => cell.textContent);
expect(cellValues).toContain('J Doe');
});
I have seen questions pertaining to accordion but not entirely to my specific need. My table is populated using spacebars, more specific a nested each loop like this:
<tbody>
{{#each piece in pieces}}
<tr id="{{piece._id}}" class="itemList table-warning">
<th class="name tText">{{piece.name}} {{piece._id}}</th>
<td class="pdf tText" style="text-align: center"><a class ="pdf" href="{{piece.pdf}}" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></td>
<td class="audio tText" style="text-align: center"><a class="audio" href="{{piece.audio}}" target="_blank"><i class="fa fa-volume-up" aria-hidden="true"></i></a></td>
<td class="format tText">{{piece.instrumentation}}</td>
<th class="price tText" >${{piece.price}}</th>
<td><input class ="qty" type ="number" name ="quantity" value="0" min="0"></td>
</tr>
<!-- Row that is being clicked-->
<tr class="partsList">
<td colspan="3"></td>
<th class="partName tText">{{piece.name}} Parts</th>
<td colspan="2"></td>
</tr>
{{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
<tr class="partList">
<td colspan="3"></td>
<td class="pname tText">{{piece.name}}: {{part.pname}}</td>
<td class="price tText">${{part.pprice}}</td>
<td><input class="qty" type="number" name="quantity" value="0" min="0"></td>
</tr>
{{/each}}
{{/each}}
</tbody>
I have a click function like so:
'click .partsList': function(e){
e.preventDefault();
$('.partList').nextUntil('tr.itemList').toggle();
}
The accordion function works, however it works with every instance of the each loop. i.e. every tr class ="partsList" will accordion at the same time on click.
To my understanding of the each loop, I can access the _id of a document using {{piece._id}}. If I set the table row id to equal that however, it only reads the _id of the FIRST document in the collection.
What I need is on click for the <tr class="partList"> to accordion based on _id. Or perhaps you would go about this a different way than bootstrap tables?
Please let me know if my question needs clarification.
You could filter the clicked .partslist using a data-* attribute. This causes jQuery to select only this specific items. Note that you need to attach the data-* attribute to the row that is clicked and to the rows that should collapse:
<tbody>
{{#each piece in pieces}}
...
<!-- Row that is being clicked-->
<!-- use the _id value of the piece context as data attribute -->
<tr class="partsList" data-id="{{piece._id}}">
<td colspan="3"></td>
<th class="partName tText">{{piece.name}} Parts</th>
<td colspan="2"></td>
</tr>
{{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
<!-- use the _id value of the piece context as data attribute -->
<tr class="partList" data-target="{{piece._id}}">
...
</tr>
{{/each}}
{{/each}}
</tbody>
'click .partsList': function(e, templateInstance){
e.preventDefault();
// get the data-id attribute of the clicked row
const targetId = templateInstance.$(e.currentTarget).data('id')
// skip if this row is not intended to toggle
if (!targetId) return
// toggle based on data-target attribute
templateInstance.$(`.partList[data-target="${targetId}"]`).nextUntil('tr.itemList').toggle();
}
Just starting to learn Coffeescript, and I'm working with React.js. I'm trying to determine which was clicked, and I've been advised not to use data-attributes on each header. I have some ideas how to handle this under the handleHeaderClick function, but I'm not exactly sure how they should be implemented. I'm also thinking about splitting up the ContactsTable component into a ContactsTableHeader component and a ContactsTableRow component, but I should still have the same issue in ContactsTableHeader - determining which header was clicked.
#Application.cjsx
handleHeaderClick: ->
# childComponent.props
# childComponent.refs
# React.findDOMNode(childComponent.refs.firstName)
# React.findDOMNode(childComponent.refs.lastName)
# React.findDOMNode(childComponent.refs.age)
render: ->
<div>
<ContactsTable contactList={#state.contacts} onClick={#handleHeaderClick} />
</div>
#ContactsTable.cjsx
render: ->
if #props.contactList
contactsList = #props.contactList.map (contact) ->
<tr><td>{"#{contact.firstName}"}</td><td>{"#{contact.lastName}"}</td><td>{contact.age}</td></tr>
<table style={tableStyle}>
<thead style={headerStyle} onClick=#props.onClick>
<tr>
<th>FirstName</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{contactsList}
</tbody>
</table>
You can do something like this.
#Application.cjsx
handleHeaderClick: (header) ->
#setState({clickedHeader: header})
#do something else
render: ->
<div>
<ContactsTable contactList={#state.contacts} onClick={#handleHeaderClick} />
</div>
#ContactsTable.cjsx
render: ->
if #props.contactList
contactsList = #props.contactList.map (contact) ->
<tr><td>{"#{contact.firstName}"}</td><td>{"#{contact.lastName}"}</td><td>{contact.age}</td></tr>
<table style={tableStyle}>
<thead style={headerStyle}>
<tr>
<th onClick={#props.onClick('FirstName')}>FirstName</th>
<th onClick={#props.onClick('LastName')}>Last Name</th>
<th onClick={#props.onClick('Age')}>Age</th>
</tr>
</thead>
<tbody>
{contactsList}
</tbody>
</table>
Here the clickedHeader is preserved inside the component which is present in Application.cjsx. You can also preserve it inside ContactsTableHeader which should look something like similar.
I'm trying to dynamically update a HTML table via Comet. I've got something like the following:
class EventsComet extends CometClient[Event] {
def server = Event
def render = {
println("Binding on: " + defaultHtml)
data.flatMap( event =>
bind("event", "name" -> event.name.toString, "date" -> event.startDate.toString)
)
}
}
And:
<lift:comet type = "EventsComet">
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
</tbody>
</table>
</lift:comet>
This prints out the entire table over and over again, one for each event rendered by EventsComet. The println statement outputs the entire table node.
So I tried variations:
<table>
<thead>
<tr>
<th>Race</th>
<th>Track</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<lift:comet type = "EventsComet">
<tr>
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
</lift:comet>
</tbody>
</table>
As expected, the HTML5 parser strips out the [lift:comet] tags and no binding occurs.
So I tried switching the rows to:
<tr lift:comet = "EventsComet">
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
...as is shown in a snippet example here, but with this syntax my CometClient is not being instantiated at all.
Can anyone advise on the proper syntax?
EventsComet itself works fine; it can keep lists of events up to date without problem. I only run into issue using tables (and presumably other highly-nested structures I've not tried yet?).
Thank you. This is all rather frustrating for such a simple problem, and makes me want to just start implementing my templates in a strongly-typed templating language instead of using bindings.
The proper syntax seems to be:
<tr class="lift:comet?type=EventsComet">
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
From this thread:
https://groups.google.com/forum/?fromgroups=#!topic/liftweb/NUDU1_7PwmM
Sometimes I'm getting duplicate rows (inserted above the table header at that), but I'd imagine this is related to my comet actor itself.
I have a table structure as follows. Now I need to sort these nested tables separately. Forexample: sorting chapter's row will only update chapters order in a separate table. Whereas, sorting items will update their order in another table.
I managed to setup the code and sorting. However, when I drag the items from chapter 4, it pass on the order of the items in from chapter 1 since they come before chapter 4???
Could someone help me with sorting only relevant items??
NOTE: This list is dynamic coming from database. So I am interested in one jquery code covering all the ordering bits.
<table id=subsortsortable>
<tbody class=content>
<tr id="chapter_1"><td>Chapter one</td></tr>
<tr id="chapter_2"><td>Chapter two</td></tr>
<tr id="chapter_3">
<td>
<table>
<tbody class=subcontent>
<tr id="item_31"><td>three.one</td></tr>
<tr id="item_32"><td>three.two</td></tr>
</tbody>
</table>
</td>
</tr>
<tr id="chapter_4">
<td>
<table>
<tbody class=subcontent>
<tr id="item_41"><td>four.one</td></tr>
<tr id="item_42"><td>four.two</td></tr>
<tr id="item_43"><td>four.three</td></tr>
<tr id="item_44"><td>four.four</td></tr>
<tr id="item_45"><td>four.five</td></tr>
</tbody>
</table>
</td>
</tr>
<tr id="chapter_4"><td>Chapter Four</td></tr>
</tbody>
</table>
The code I am using is as follows:
//for sorting chapters - which is outer table
$("#subsortable tbody.content").sortable({
opacity: 0.7,
cursor: 'move',
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
update: function(){
var order = $('#subsortable tbody.content').sortable('serialize') + '&action=updateChaptersOrder';
$.post("/admin/ajax/ajax_calls.php", order, function(theResponse){
});
}
});
// For sorting and updating items within a specific chapter - which is nested tbody
$("tbody.sortItems").subcontent({
opacity: 0.7,
cursor: 'move',
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
update: function(){
var order = $('tbody.subcontent').sortable('serialize');// + '&action=updateListings';
$.post("/admin/ajax/ajax_calls.php", order, function(theResponse){
});
}
});
I have got the answer to my own question.. In case someone else encounter the same problem. I have changed the following code inside the internal table:
var order = $('tbody.subcontent').sortable('serialize');
to
var order = $(this).sortable('serialize');