I am trying to trigger an event when I click on a td with class toggle. When I click on a td with class toggle, I want to show all the next tr with class hidethis.
But I cant seem to trigger an event on the td. Here's what I have got so far.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$(' td .toggle ').on('click',function(ev){
$(this).closest('tr').nextAll('tr .hidethis').show();
});
});
</script>
</head>
<body>
<table border="1">
<tr >
<td class="toggle">First Toggle</td>
</tr>
<tr class = "hidethis" style="display:none">
<td>Value 1</td>
<td>Value 2 </td>
<td>Value 3</td>
</tr>
<tr >
<td class="toggle">Second Toggle</td>
</tr>
<tr class = "hidethis" style="display:none">
<td>Value 4</td>
<td>Value 5 </td>
<td>Value 6</td>
</tr>
</table>
</body>
</html>
The problem is when I click on the td with class toggle the event is not firing.
Please help me. May be I am not seeing something obvious.
Thanks in advance.
Remove the space between the selectors, it has a specific meaning:
Selects all elements that are descendants of a given ancestor.
It should be:
$('td.toggle')
Remove space between td and toggle
$(' td .toggle ').on('click',function(ev){
to
$('td.toggle').on('click',function(ev){
^
and also same problem with your below code:-
$(this).closest('tr').nextAll('tr .hidethis').show();
to
$(this).closest('tr').nextAll('tr.hidethis').show();
^
Working Demo
Simply try like
$(document).ready(function () {
$('.toggle').on('click',function(ev){
$(this).closest('tr').nextAll('tr .hidethis').show();
});
});
Or remove the space between the td and its classname
$('td.toggle').on('click',function(ev){
Related
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();
}
I am new to wicket ,Please someone help me with a thought. I have a logic around a checkbox to display or not to display.
Problem:
when the logic of not to display a checkbox is on , which is by adding a display:none to the checkbox element dynamcially in code , there is a white space because of td surronding the checkbox.
my html looks like
<span wicket:id="checkgroup">
<table>
<tr wicket:id="srow" >
<td><input type="checkbox" wicket:id="scheck"/></td>
<td><img wicket:id="sicon"></img></td>
</tr>
</table>
</span>
so in code I have if else logic for adding a display:none to check box element which removes the checkbox from the view which looks like the below
<span wicket:id="checkgroup">
<table>
<tr wicket:id="srow" >
<td><input type="checkbox" wicket:id="scheck" style="display:none"/></td>
<td><img wicket:id="sicon"></img></td>
</tr>
</table>
</span>
final CheckGroup<Scope> checkGroup = new CheckGroup<>("checkGroup",
new ArrayList<> ());
ListView<Scope> listView = new ListView<Scope>
("srow", sList);
#Override
protected void populateItem(final ListItem<S> item)
{
Check<S> check = new Check<>("scheck", item.getModel(), checkGroup);
if(defaultscope)
{
check.add(new AttributeModifier("style","display:none"));
}
item.add(check);
}
so now my checkbox disappears but the surrounding td stays and causing a white space in display.
Any ideas on how to approach this issue.
Thanks.
You can use <wicket:enclosure> to remove html if the referenced child is not present. wicket enclosure.
Your code in populateItem could look like this:
Check<S> check = new Check<>("scheck", item.getModel(), checkGroup);
if(defaultscope)
{
check.setVisible(false);
}
item.add(check);
Your markup would look like this:
<tr wicket:id="srow" >
<wicket:enclosure>
<td><input type="checkbox" wicket:id="scheck"/></td>
</wicket:enclosure>
<td><img wicket:id="sicon"></img></td>
</tr>
I have strange issue in my email when it is viewed in outlook 2010.
The source for the email is as follows,
<html>
<head>
<title>Testing</title>
</head>
<body style="background:green;border:100px solid red">
<table style="border:20px solid blue; width:600px;" align="center">
<tr>
<td>
</td>
</tr>
<tr>
<td style="background:#DDD;">
<span>0</span><br /><span>1</span><br /><span>2</span><br /><span>3</span><br /><span>4</span><br /><span>5</span><br /><span>6</span><br /><span>7</span><br /><span>8</span><br /><span>9</span><br /><span>10</span><br
/><span>11</span><br /><span>12</span><br /><span>13</span><br /><span>14</span><br /><span>15</span><br /><span>16</span><br /><span>17</span><br /><span>18</span><br /><span>19</span><br /><span>20</span><br /><span>21</span><br /><span>22</span><br /><span>23</span><br /><span>24</span><br
/><span>25</span><br /><span>26</span><br /><span>27</span><br /><span>28</span><br /><span>29</span><br /><span>30</span><br /><span>31</span><br /><span>32</span><br /><span>33</span><br /><span>34</span><br /><span>35</span><br /><span>36</span><br /><span>37</span><br /><span>38</span><br
/><span>39</span><br /><span>40</span><br /><span>41</span><br /><span>42</span><br /><span>43</span><br /><span>44</span><br /><span>45</span><br /><span>46</span><br /><span>47</span><br /><span>48</span><br /><span>49</span><br /><span>50</span><br /><span>51</span><br /><span>52</span><br
/><span>53</span><br /><span>54</span><br /><span>55</span><br /><span>56</span><br /><span>57</span><br /><span>58</span><br /><span>59</span><br /><span>60</span><br /><span>61</span><br /><span>62</span><br /><span>63</span><br /><span>64</span><br /><span>65</span><br /><span>66</span><br
/><span>67</span><br /><span>68</span><br /><span>69</span><br /><span>70</span><br /><span>71</span><br /><span>72</span><br /><span>73</span><br /><span>74</span><br /><span>75</span><br /><span>76</span><br /><span>77</span><br /><span>78</span><br /><span>79</span><br /><span>80</span><br
/><span>81</span><br /><span>82</span><span>85</span><br /><span>86</span><br /><span>87</span><br /><span>88</span><br /><span>89</span><br /><span>90</span><br /><span>91</span><br /><span>92</span><br /><span>93</span><br /><span>94</span><br /><span>95</span><br /><span>96</span><br
/><span>97</span><br /><span>98</span><br /><span>99</span><br /><span>100</span>
</td>
</tr>
</table>
</body>
</html>
And the email looks in outlook 2010 is as follows,
http://postimg.org/image/dpinwd9l7
In the image, you can see there is breaking of table and also border is breaked. I don't know why it is happening.
Please help me to get rid of this issue.
I think what is happening it that you are over 1800px in a single column.
You can read more about it here:
The best answer is to break it up into two tables stacked on top of each other.
Need help in clicking an image that is with a td inside a table. The table is defined as
html is below:
`<html class=" myapp>
<head id="head1">
<body id="body1">
<div id = "container" class>
<div id = "Header" class="header">..</div>
<div id = "navbar" class="topnavbar">..</div>
<form name = "form1"....>
.
.
.
<div id = "Layout container" class>
<div id="appcontectinfo">...</div>
<div class="tabcontent">
<div id="allinfo">
<table id="tablename"> </table>
<table>
<tbody>
<tr>
<td>
<table id style = "height 100%">
<tbody>
<tr style ="height : 16">
<td class = "clsClassname1">
<table cellpadding = "0" cellspacing = "0">
<tbody>
<tr>
<td class = "clsMyexpClass1>
<input src = "https://www.mylinkhere.com/lookup.gif" name = "myimage1" type = "image" id = "imgLookup1">
</td>`
I tried the below:
image(:lookup1, :id => 'imgLookup1')
lookup1_element.click
I get the error message- >"Watir::Exception::UnknownObjectException: unable to locate element, using {:id=>"imgLookup1", :tag_name=>"img"}
I then tried
table(:lookuptab1) {div_element(:id =>'allinfo' ).table_element(:style => 'height: 100%; text-align: left;')}
and again the same error message. Please help!
The page-object-gem and watir treat input elements of type "image" (ie <input type="image">) as buttons.
The element should be located if you change your page object accessor to use button:
button(:lookup1, :id => 'imgLookup1')
Note that then you can click the input using lookup1 instead lookup1_element.click.
Here is a working example:
class MyPage
include PageObject
button(:lookup1, :id => 'imgLookup1')
end
browser = Watir::Browser.new
browser.goto("data:text/html,#{DATA.read}")
page = MyPage.new(browser)
page.lookup1
browser.close
__END__
<html>
<body>
<input src = "https://www.mylinkhere.com/lookup.gif" name = "myimage1" type = "image" id = "imgLookup1" onclick="alert();">
</body>
</html>
I would like to display an HTML table clicking on a button.
This is what I've tried so far:
My SCALA code:
object Snippet {
def render = {
def showTable() = {
val table = <table border="1">
<caption>My Table</caption>
<thead>
<tr>
<td>Entry</td>
<td>Value1</td>
<td>Value2</td>
</tr>
</thead>
<tbody>
<tr>
<td>PREV</td>
<td>1</td>
<td>10</td>
</tr>
<tr>
<td>CURR</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>NEXT</td>
<td>3</td>
<td>30</td>
</tr>
</tbody>
</table>
SetHtml("table_div",table)
}
"#getTable" #> SHtml.button("Get Table", () => null, "onclick" -> "$('#msg_div').html('<span>Getting table...</span>')") &
"name=proc" #> SHtml.hidden(showTable)
}
}
And my HTML:
<div class="lift:Snippet.render">
<form>
<input type="hidden" name="proc"/>
<button id="getTable" value="Get Table" class="btn btn-inverse">Get Table</button>
</form>
<div id="msg_div"></div>
<div id="table_div"></div>
</div>
Nothing is displayed clicking the button.. Do you see what is the problem?
Or someone could tell me another way to do that?
I am not sure what you are looking to accomplish with the hidden input. Why not just do something like:
"#getTable" #> SHtml.ajaxButton("Get Table", showTable)
If you are looking to display a waiting indicator, Lift has a mechanism for setting the ajax loading animation. In Boot.scala:
//Show the spinny image when an Ajax call starts
LiftRules.ajaxStart =
Full(() => LiftRules.jsArtifacts.show("ajax-loader").cmd)
// Make the spinny image go away when it ends
LiftRules.ajaxEnd =
Full(() => LiftRules.jsArtifacts.hide("ajax-loader").cmd)
You can use any JsCmd instead to call your own function. I'd probably opt for that.
Totally agree with jcern. A slightly different way could also be:
"#getTable [onclick]" #> SHtml.ajaxInvoke(showTable)
(this way you won't override the original button name)
Also note that you don't even need to use the <form> tag -- you can delete it.