First off, forgive the hard coded table data. I am doing a simple add row type of thing. I'm wondering how to get at the data in the sibling TDs. Should I be using a form? Or something else? basically I just need access to the data that is already in there and move it to another table.
<tbody data-bind="foreach: Resources">
<tr>
<td data-bind="text: name">
</td>
<td data-bind="text: type">
</td>
<td data-bind="text: contact">
</td>
<td data-bind="text: status">
</td>
<td>
<input type="button" data-bind="click: addResourceToList" value="Add Resource" />
</td>
</tr>
</tbody>
Here is the start of the code in the model.
addResourceToList = function () {
self.ResourcesInPlan.push(new ResourceListModel({ name: this.title }));
};
Thanks for any advice.
Update: The data was there, but I missed it. I changed to this line.
self.ResourcesInPlan.push(new ResourceListModel(this.name));
Because I was referencing the model wrong as you can see.
See this example:
http://knockoutjs.com/documentation/click-binding.html#note_1_passing_a_current_item_as_a_parameter_to_your_handler_function
KO will send the item as the first parameter to the function too.
Related
I have this HTML code in my JSP
<table>
<tr>
<td width="50%" > type your article :
</td>
<td width="50%">
<input type="text" name="article" size="50"/>
</td>
</tr>
</table>
I have in MYSQL database a table 'article' in which i have a column 'designation' , I want to propose a choice of 'designation' to the user according to what is being written.
note: i can not use a dropdownlist because i have more than 1000 designations
Thanks in Advance.
I think you can solve the problem using JQuery Lookup.
I am writing a web application that dynamically creates and names table elements, and I need to retrieve and parse a thoroughly nested id (not the value). The structure (and my latest attempt) are as such:
<table>
<tr onclick="alert(this.firstChild.firstChild.firstChild.id);">
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
It keeps returning 'undefined', which confirms my suspicion that I do not know JavaScript as well as I should. I am also using jQuery, so those solutions would work.
If you need the exact one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr onclick="alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));">
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
This being an inline JavaScript, it is better to use unobtrusive JavaScript by delegating the events and make your code and presentation split, so that it will be clear. A fiddle of unobtrusive JavaScript is below.
$(function () {
$("table").on("click", "tr", function () {
alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
You don't need to keep on adding code for each <tr>.
I am using X-Editable with AngularJS for Form
<form editable-form name="userform" onaftersave="submitUser()">
<table class="user_table">
<tr class="userrow name">
<td class="info">First Name</td>
<td class="desc">
<span editable-text="curuser.firstName" e-name="firstName" e-maxlength="25">{{curuser.firstName}}</span>
</td>
</tr>
<tr class="userrow email">
<td class="info">E-Mail</td>
<td class="desc">
<span editable-email="curuser.email" e-name="email" e-maxlength="48">{{curuser.email}}</span>
</td>
</tr>
<tr class="userrow authority">
<td class="info">Role</td>
<td class="desc user-roles">
<span editable-select="roleUpdated" e-name="roles" e-ng-options="role as role.name for role in roles" onaftersave="updateRole(curuser, roleUpdated)">{{ showRoles() }}</span>
{{ showRoles() }}
</span>
</td>
</tr>
<tr ng-if="curuser.id == null" class="userrow command">
<td class="info"></td>
<td class="desc">
<button type="submit" class="submit_button btn btn-primary" ng-show="!readonly && !amanager">Submit</button>
</td>
</tr>
</table>
</form>
There are two criteria, one wherein user should be allowed to update all fields and other where in user will be allowed only to edit role i.e. Select Role.
My actual problem is that how can form elements be made editable/non-editable based on a specific condition.
If I remove editable-text manually from all fields it satisfies second criteria. Is there any way I can add editable-text based on condition.
Anyone have any helpful ideas?
Thanks in Advance
I know that's late but I've faced the same myself
for example let's say you don't want to allow modification of e-mail unless the e-mail is the default one
<span editable-email="curuser.email" e-name="email" e-maxlength="48" ng-if="curuser.email=='Enter an e-mail'">
{{curuser.email}}
</span>
<span e-name="email" e-maxlength="48" ng-if="curuser.email != 'Enter an e-mail'">
{{curuser.email}}
</span>
that's just an example but i'm sure you can inspire yourself
It is not a good practice to mix jquery and angularjs unless they are cleanly separated. I am guessing you want to look at this - http://vitalets.github.io/angular-xeditable/
Writing a new directive would be the right way to do it I believe. You would possibly run into all sorts of issues using ng-if, if combined with ng-repeat for instance.
In knockout i have a foreach data-binding to populate a table:
...
<tbody data-bind="foreach: people">
<tr>
<td>
<span data-bind="text: $data.Name"></span>
</td>
<td>
<span data-bind="text: $data.Description"></span>
</td>
</tr>
</tbody>
...
In the script section:
self.people= ko.observableArray();
$.getJSON('/api/apipeople', self.people);
With this code i'm able to see a table with the people name and description.
Now i want make the table fields editable so i've changed the
<span data-bind="text: $data.Name">
to
<span data-bind="value: $data.Name">
Why i don't see anything with data-bind = value? The object self.people contains all the data so why with 'text' binding i'm able to see the values and with 'value' binding i don't see anything?
The "value" attribute is not defined for "span" elements.
It is defined for elements such as "input" or "textarea".
For editable table you can follow this example - link
I found a website last night that is simply awesome. Here's the URL:
http://yourworldoftext.com/
WARNING: Site may be NSFW.
And it got me thinking straight away how this site is constructed. Taking a look at the page source doesn't reveal much, but if I look at it in Firebug I see a lot of tables like this:
<div class="tilecont" style="top: 994px; left: 1320px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>A</td>
<td>L</td>
<td>L</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>Y</td>
<td>O</td>
<td>U</td>
<td>R</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>B</td>
<td>A</td>
<td>S</td>
<td>E</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
</table>
</div>
the tilecont DIV is repeated and tiled along the entire page, and the table inside occupies the entire width and height of that DIV. Then, each <tr> inside the table is one row with 16 <td>'s inside that row to make up each character.
It's hard to explain, if you have Firebug installed you can simply drag it to the page and see for yourself.
I thought this was pretty damn clever, but I can't work my head around how it would be stored in a database or something? I have tried looking through the JS files but to be honest there's a lot of stuff in there I either don't know or not related to how it's stored etc. I assume it's making an AJAX request to a database on every keyUp event storing the new data for that particular "cell"?
Anyone have any input on how they think this is done?
You're probably roughly correct. The site knows where your viewport is and only loads the part that is visible, in 16 char "chunks". The DB just saves 16 char strings with an x and y coord. You can see it updating in 1x16 blocks if you drag quickly.
As for sending, if it were me I would cache the text and only send one 16 char "chunk" at a time. Each time an edit occurs check if its in the same chunk as the last one. If not send the last chunk and start caching the new one.
To keep the view up to date you could have it check for changes in your view area by sending an ajax request every couple seconds with window.setInterval(). It could send back some JSON or something with just the chunks that have changes, maybe encoded with their location in the grid in the first few chars.
I'm just hand waving here, I haven't looked at the code, but you're right. Its a fascinating site.
EDIT: More detail...
Check out the init() function (line 906 in yourworld.js). That's the best point of entry if you want to study the code. You can see how editing works at line 953. On keydown the script focuses a hidden input element which catches the text. Then he uses a callback on setInterval to get the first character from the input field every 10ms and then blank the field. If there's a char then it gets cached in an array and put in the active cell on the grid. He says in a comment this is to prevent pasting.
The array of edits is sent every two seconds (line 1017). Each character of input is sent with a position and timestamp.
fetchUpdates() handles getting newly updated cells from the server (line line 383). It contains a jQuery.ajax request with a callback on success to a function that makes the necessary changes and calls fetchUpdates() again after a 1 second setTimeout().