Develop Reference

Select next "visible" sibling from the current row

A small selector with .next() jquery method is driving me crazy.
The story is like that, I am using Bootstrap filter with jquery on table rows. When the filter executes, it changes the display style attribute to table-row, like this:
<tr class="activated" style="display: table-row;">
Now what all I want from Jquery is, select the next available TR, from the current TR, that has display = table-row.
I have tried with the following:
$(getSelectedRow()).next(":not(:hidden)") returns []
$(getSelectedRow()).next(":visible") returns[]
$(getSelectedRow()).next("tr[display==visible]") returns []
I want to use next because I want next first sibling.
Here is the HTML
<table class="table table-hover navigateable focused" id="bookmarkTable">
<thead>
<tr>
<th class="text-center">Bookmarks</th>
</tr>
</thead>
<tbody class="searchable" id="bookMarkResultGridView">
<tr class="activated" style="display: none;">
<td class="word-wrap" data-rowindex="0" data-tabid="0"
data-url="http://gitready.com/" style="cursor: pointer;">git
ready » learn git one commit at a time<br>
<small class=
"text-muted word-wrap">http://gitready.com/</small></td>
</tr>
<tr class="activated" style="display: none;">
<td class="word-wrap" data-rowindex="1" data-tabid="0"
data-url="http://inthecheesefactory.com/blog/android-design-support-library-codelab/en"
style="cursor: pointer;">Codelab for Android Design Support
Library used in I/O Rewind Bangkok session :: The Cheese
Factory<br>
<small class=
"text-muted word-wrap">http://inthecheesefactory.com/blog/android-design-support-library-codelab/en</small></td>
</tr>
<tr class="activated" style="display: none;">
<td class="word-wrap" data-rowindex="2" data-tabid="0"
data-url="https://github.com/rogerta/secrets-for-android"
style="cursor: pointer;">Store your all Password in Android
App<br>
<small class=
"text-muted word-wrap">https://github.com/rogerta/secrets-for-android</small></td>
</tr>
<tr class="activated" style="display: table-row;">
<td class="word-wrap" data-rowindex="3" data-tabid="0"
data-url="https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library"
style="cursor: pointer;">Google Play Style Tabs using TabLayout
| CodePath Android Cliffnotes<br>
<small class=
"text-muted word-wrap">https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library</small></td>
</tr>
</tbody>
</table>

I'm not sure I understand your getSelectedRow() but if it can be swapped with some class selector (in this case i used .selected) and you would need only first next sibling that's not hidden this would be your solution:
$(".selected~tr:not(':hidden')").first();
https://jsfiddle.net/r3f22uzn/
I'm not sure why this isn't working:
$(getSelectedRow()).find("~tr:not(':hidden')").first();
but this should work:
$(getSelectedRow()).find("~tr:not(':hidden')").each(function(){
// first element
$(this).css("background", "black")
return false;
});
https://jsfiddle.net/r3f22uzn/3/

Get html with remove specific element on javascript/jquery

if my HTML is like this :
<tbody id="hasil-pencarian">
<tr>
<td align="center">1</td>
<td>TMS/IT/06/001</td>
<td>Erika Julia Widiyanti</td>
<td>Marketing</td>
<td>14-06-2015 13:59</td>
<td>14-06-2015 14:00</td>
<td>Erika test 1</td>
<td id="action" class="center" width="10px">
<a class="btn btn-success">
</td>
</tr>
</tbody>
I got all the html above like this :
var result = $("#hasil-pencarian").html();
But, How can I get all the HTML without the <td> with id='action' ?
Little confused. Any help will be so appreciated.

I think you could create clone then remove the element then get the content like
var result = $("#hasil-pencarian").clone().find('#action').remove().end().html();

How to print a string array which is part of a JSON consists of other attributes

in the client side, I have a json object which I receive from REST service somewhere. This object has more that one attribute, one of them is a String array. I want some assistance on how to print this array using angular JS code embedded within html.
this is my JSON object:
[
"title": "Developing a System for Information Management in Disaster Relief",
"url": "http://scholar.google.com/scholar",
"relatedTitles":
[
"Distributed robotic sensor networks",
"Improving information access for emergency",
"Tangible and wearable user interfaces for",
"Non-parametric inferenc",
"Airborne near-real-time monitoring of assembly"
]
]
and here is how the html ng-repeat looks like.
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>{{publication.relatedTitles}} </tr>
Note:"publications" is the JSON object name

It depends on how you want to print it. If you want it like and array, joined with commas for example use this html code:
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>{{publication.relatedTitles.join(', ')}}
</tr>
Else, if you want with a <span> tag each for example, you can do another ng-repeat:
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>
<span ng-repeat="relatedTitle in publication.relatedTitles">
{{publication.relatedTitles}}
</span>
</td>
</tr>

You can nest ng-repeat's
So you should be able to do something like this:
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>
<table>
<tr ng-repeat="title in publication.relatedTitles">
<td>{{title}}</td>
</tr>
</table>
</td>
</tr>

<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>
<span ng-repeat="title in publication.relatedTitles">
{{title}}<br>
</span>
</td>
</tr>

HTML + Hiding element from table based on value from another column

I am trying to hide a button in a table column based on another column value, there's a table column field call "Archive" and if that value is true, I want to hide a button from another column. The code below I have however only hides the button in the first row and ignore subsequent rows. Please kindly assist. Thanks.
<table class="table table-striped table-bordered">
<tr>
<td width="8%" class="table_pink" style="background-color:#ED4085">Name</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Email</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Country</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Time</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">WrongAtQuestion</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">Winner?</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">CreatedDateTime</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">Hidden</td>
<td width="20%" class="table_pink" style="background-color:#ED4085">Action</td>
</tr>
#foreach (var item in Model)
{
if (item.Archive)
{
<script type="text/javascript">
$('#hideButton').hide();
</script>
}
<tr>
<td>#item.Name</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#item.Time</td>
<td>#item.WrongAtQuestion</td>
<td>#item.IsWinner</td>
<td>#item.CreatedDateTime</td>
<td>#item.Archive</td>
<td><a class="btn btn-primary" href="#" id="hideButton" onclick="deleteEntry('#item.Id', '#item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a></td>
</tr>
}
</table>

Well the first problem is that you are creating invalid html. The id attribute is supposed be unique, but in every row you're outputting an anchor with id="hideButton".
When you then use $('#hideButton') it will find (in most browsers) the first element with that id, not all of them. But even if duplicate ids were allowed, there's nothing to tie the script with $('#hideButton').hide() to any particular row - just because the script block happens to precede the row doesn't make a connection between them.
I'd suggest instead that you get rid of that script block entirely, and then use a server-side if inside the td element with the link to only include the link if item.Archive is false. Then you wouldn't need any JS/jQuery/CSS. I'm not familiar with the server-side language you're using, but in pseudo code it might look something like this:
<td>
#if(!item.Archive){
<a class="btn btn-primary" href="#" onclick="deleteEntry('#item.Id', '#item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a>
}
</td>
Another alternative would be to use server-side code to add class="archive" to the relevant anchor elements, and then use this jQuery:
$(document).ready(function() {
$("a.archive").hide();
});
(Or if you need to do other operations depending on the archive status you might like to put the class on the tr element and use $("tr.archive a.btn").hide();.)

Repeat/Clone a <tr> element using jQuery's clone() function

I am trying to clone a template of a which will be populated with data and then inserted into a table. I'm currently able to use the same .clone() function with other elements on the same page but jQuery refuses to see and clone the template (I'm guessing because its not a block element).
Here is the template:
<tr id="search_result_temp" class="template">
<td class="logo">
<img class="logo" />
</td>
<td class="ratings">
<p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
<button id="request_info">Request Info</button>
<button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
Here is the javascript code:
for(var index in results){
var result = results[index];
$result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
$search_results.append($result_listing);
}
Thanks!

Found the answer. The clone() function works fine when the template <tr> is encapsulated within <table> and <div> elements. As stated below .innerHTML (which jQuery uses in clone()) does not work with table fragments. That means jQuery will not clone a <tr> if it is a root element (whose parent element is <body>). Therefore, the template should look like this(of course with an appropriate id on the <div> to be selected by jQuery):
<div>
<table>
<tr id="search_result_temp" class="template">
<td class="logo">
<img class="logo" />
</td>
<td class="ratings">
<p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
<button id="request_info">Request Info</button>
<button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
</table>
</div>

for(var index in results){
var result = results[index];
$result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
$search_results.append($result_listing);
}
correct me if I'm wrong, but why do you need to
var result = results[index];
index is already a single element of results

Alternatively you can wrap the template in a hidden DIV and access the content via jQueries HTML method. On a side note, you might bump heads cloning several items with the same ID. Try use a class approach and add an identifier (Try the new HMTL5 data-* tag attribute).