I am working on an application using meteorjs. I am totally new to meteor. In my application I am using dataTables with meteor for shorting , pagination and searching.
This is my template code
<template name="questions">
<div class="col-md-3">
{{#constant}}
<table class="table table-striped table-bordered table-condensed table-hover listing"
id="content_listing-table">
<thead>
<tr>
<th>Questions</th>
</tr>
</thead>
<tbody>
{{#each questions}}
<tr>
<td>
{{questionSubString question_text}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/constant}}
</div>
</template>
and my meteor code is
Template.questions.rendered = function () {
$("#content_listing-table").dataTable();
}
Template.questions.questions = function () {
return Meteor.questions.find({topic_id: Session.get("currentTopicId")})
}
my problem is when i add a question to the database it doesn't seem on template. and generate an exception. I know this is because of datatables . and datatable is not update when document updated. i tried many examples from stackoverflow but couldn't get rid of this problem .I tried by appending row dynamically but it always give me a warning . and it doen't seems to do a right way. can i remove the datatables from the element dynamically? help will be appreciated
EDIT:
$('#content_listing-table').dataTable().fnClearTable();
$('#content_listing-table').dataTable().fnAddData(Meteor.questions.find().fetch());
I am trying to do this first empty the table and then again add the data to it. But here it is emptying the table for not adding the data again.
You are using a {{constant}} region. This disables reactivity for that part of the template.
Try getting rid of your constant region and run meteor using meteor --release template-engine-preview-5.5. This will run meteor using the new, in progress template engine Meteor UI. There are no constants or preserves in Meteor UI - it's smart enough to make DOM changes at a fine-grained level, so it should work out of the box with things like jQuery plugins.
Related
I have a list of employees (around 500). In a component I want to display this list. I display the list as a table. Each individual row is defined in a component. The user can edit a data row inline on demand. For that purpose I insert an input field when the user wants to edit the data. The following exemplifies my current solution:
<!--Parent Component-->
<table>
<thead>[...]</thead>
<tbody>
<Virtualize Items="employeeData">
<TableRow rowModel="context" />
</Virtualize>
</tbody>
</table>
<!--Child Component-->
#if(IsInEditMode)
{
<tr>
<td><input #bind="#employee.name" /></td>
<td>...</td>
<td><button #onclick="SaveData">Save</button>
</tr>
}
else
{
<tr>
<td>#employee.name</td>
<td>...</td>
<td><button #onclick="EnableEditing">Edit</button>
</tr>
}
I introduced virtualization as I noticed a big delay while typing in the input fields. Using virtualization the typing is working perfectly fine again.
As a result I noticed the following issue though:
When I scroll out of sight, the rows get reset - the inserted data gets lost and the editing mode is turned off. My guess is that is happening because the row gets rerendered and by default
editing is turned off.
How do I keep the state of specific components while using the virtualization feature?
The issue seemed to be that virtualisation had problems rendering the child components. Integrating the child component into the parent component resolved the problems.
I'll try to investigate further whether this was a problem with my component or a problem of blazor's virtualisation.
My aspx file has lot's of components and has become difficult to work with when eg. adding new items because I can't see the start and end tags of where the new control must go (especially when adding containers).
I was wondering if there is a way to arrange the code with some kind of placeholder (all within the same file is fine) - something along the lines of the mockup below?
<abc:container>
<abc:pages>
<abc:page>
[Page1CodeGoesHere]
</abc:page>
<abc:page>
[Page2CodeGoesHere]
</abc:page>
</abc:pages>
</abc:container>
<Page1CodeGoesHere>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</Page1CodeGoesHere>
<Page2CodeGoesHere>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</Page2CodeGoesHere>
Use ASP.NET User Controls. It allow you to use code from separate files.
It seems you are looking for code-folding a-la #region support.
If yes, then Visual Studio 2013 Update 4 added support for #regions in HTML editor. You would use it like this:
<!-- #region Page1Code -->
..
<!-- #endregion -->
This will allow you to collapse-expand the regions as convenient to you.
Ref: http://blogs.msdn.com/b/webdev/archive/2014/10/16/announcing-new-web-features-in-visual-studio-2013-update-4-rc.aspx
Note 1:
This was voted against for in VS 2015, but was declined. So, #region support for HTML editor is here to stay it seems. Ref: https://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/6571662-do-not-introduce-the-curse-of-regions-to-html
Note 2:
Nothing beats modular approach. Keep your pages small, clean and simple.
I'm currently using dojox.grid.DataGrid for displaying data, in which a second request is sent to the server for the data. I'm using spring MVC, and hence I could fill data (from markup) using the model data in the view (using JSTL, to be exact). And I'm no where getting near in achieving this, since I cant find a way to get the data inside the grid via html markup. Does dojo grid supports filling data only via script (store)?
I found dojox.data.HtmlStore which could be made use of. But just making sure that there's no better solution.
Yes, dojox.grid.DataGrid can be defined using HTML markup.
Sample code:
<table data-dojo-type="dojox.grid.DataGrid" >
<thead>
<tr>
<th field="fieldName" >Col1</th>
<th field="fieldName" >Col2</th>
</tr>
</thead>
</table>
So in your jsp have the logic to generate the above structure.
More info can be found here
And for the data part you can do this:
<table data-dojo-type="dojox.grid.DataGrid" >
<thead>
<tr>
<th field="fieldName" get="myData.getCol1">Col1</th>
<th field="fieldName" get="myData.getCol2">Col2</th>
</tr>
</thead>
</table>
Javascript Function:
myData.getCol1 = function(colIndex,item){
return "<place the actual content from your jstl variables here>";
};
While
the above solution works its not a smarter way, please use the store and return a constructed json object from server.
dojox.data.HtmlStore could made use of. It's not a simple solution, but it is the simplest one.
Documentation with example can be found here: http://dojotoolkit.org/reference-guide/1.10/dojox/data/HtmlStore.html
How do i remove a new line from the start of a string?
what's happening is that i've been controlling and debugging someone else's php code, and converting it into asp. what he did was put html tags in a db table, and simply echoing them. ex, a field contains html table tags like <thead>,<tbody>,<tr>, etc. i didn't want to continue the wrong doing so what i did was to control them by first turning <tr>s into <br />s, and removing everything else. but problem is that the first <tr> makes a new line in the very start of the string. i want to remove it. another problem is that not all fields has htmlt tags inside, so i have to put something like if text.substring(0,1)="(idk what to put here)" then (maybe the replace or trim functions here). any help please?
here's a sample field content. pretty nasty indeed:
<table width="705" height="323" id="gradient-style" summary="Meeting Results">
<thead>
<tr>
<td width="238">Product</td>
<td width="610">TS2360 Tape<br />
Drive Express</td>
</tr>
</thead>
<tbody>
<tr>
<td>Machine/model, HVEC</td>
<td>3580<br />
S63, 3580S6X</td>
</tr>
<tr>
<td>Product strengths</td>
<td>Multi O/S<br />
Encryption & media<br />
partition capable<br />
LTFS support</td>
</tr>
</tbody>
</table>
so after making <tr>s into <br>s and removing other html tags, output beacame:
Product TS2360 Tape Drive Express
Give background color to the table cells to achieve seamless transition
Machine/model, HVEC 3580 S63, 3580S6X
Product strengths Multi O/S Encryption & media partition capable LTFS support
(supposedly skipping a line before "Product" because it has <tr> before it, but didn't show in the block quote)
Thanks in advance.
var cleanedFieldValue = someValueWithLineBreaks.TrimStart( '\n' );
The VB.NET version might look like:
Dim cleanedFieldValue = someValueWithLineBreaks.TrimStart(ControlChars.Lf)
Edit
It sounds as if you are trying to parse some Html and then do work on it. I would recommend using the Html Agility Pack for that and read about the evils of attempting to use RegEx to parse your Html.
I am trying to get the dojo button that is within the data grid to use styling. Currently it does not use the styling.
HTML:
<table dojoType="dojox.grid.DataGrid" class="soria" id="grid1" jsId="grid1" elasticView="2" store="theStore" selectionMode="single" query="{grid1:'*'}">
<thead>
<TR>
<th field="0" formatter="getButton">Show value</th>
</tr>
</thead>
javascript:
function getButton(item){
return "<button class=/"soria/" dojoType=\"dijit.form.Button\" onClick=\"\">Button</button>";
}
You need to provide more info as suggested - like is this being utilized within the custom dijit framework or are you jsut trying to produce a button didjit on the fly?
Im going to assume the later for now so...
1.) You need to reparse the element if you want dynamically added elements created outside the dijit infrastructure to be turned into dijits.
2.) #1 doesnt make sense because if you are doing it on the fly you should be using the javascript programmiatc creation and adding it to the DOM instead of just returning html, ie:
return new dijit.Form.Button()