Multiple collapse using CSS - javascript

I would like to have a table which some of rows include another tables. My html file is as:
HTML: Updated after answers
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two tables:</h2>
<table>
<tr>
<th>Name:</th>
<td>Rows including tables</td>
</tr>
<tr>
<th rowspan="4">Telephone:</th>
<td>row1 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>row3 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr class="red">
<td>
<div class='redTable'>
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS:
#mouse { cursor: pointer; }
.fieldsetContainer { height: 0;overflow: hidden;transition: height 400ms linear; }
#toggle { display: none; }
#toggle:checked~.fieldsetContainer { height: auto; }
label .arrow-dn { display: inline-block; }
label .arrow-up { display: none; }
#toggle:checked~label .arrow-dn { display: none; }
#toggle:checked~label .arrow-up { display: inline-block; }
But the problem is that the second collapsing does not work, it makes collapse the second first row rather than the second one.
I searched through the Internet about the problem, but I failed. How I could handle the problem?
By the way, I have added the complete code here in jsfiddle.
Update:
thanks a lot for your great answers. Well as you mentioned I should change the id's and for attribute of <label> which they should be unique. But not problem for is that I have thousands of such a tables and then I could not do it manually. I wonder if you please let me know if I could do systematically via CSS or JS. I will add them to the XSLT file. I can Thanks a lot again for your comments!
here is some lines from xslt file, related to the main point.
<tr class="yellow">
<td>
<div id="yellowTable">
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
<tr class="red">
<td>
<div id="redTable">
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
(I have deleted end tags because of saving long question.)
Update2:
I am attaching JavaScript code for assigning id's and attribute for as I've mentioned above.
JS:
function assignIdAndForAttribute()
{
var redTable= document.getElementById("redTable");
var redInputTag = redTable.getElementsByTagName("input");
var redLabelTag = redTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableError.length; i++) {
redInputTag [i].setAttribute("id", 'toggleRed' + i);
redLabelTag [i].setAttribute("for", 'toggleRed' + i);
}
//]]>
var yellowTable = document.getElementById("detailedTable");
var yellowInputTag = yellowTable.getElementsByTagName("input");
var yellowLabelTag = yellowTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableWarning.length; i++) {
yellowInputTag [i].setAttribute("id", 'toggleyellow' + i);
yellowLabelTag [i].setAttribute("for", 'toggleyellow' + i);
}
//]]>
}

The error stems from the fact that you are using ids which are supposed to be unique. If you change toggle to a class instead of id, and update your css from #toggle to .toggle you'll almost have it.
If you don't hide the input.toggle elements at that point, you'll see it working fine.
The labels' for attribute will also need to be updated so you can interact with the label when you hine the input. Just use a unique id on each toggle to place in the for attribute of the label and use a class for styling and functionality.

You have set two ids that are "toggle" and both labels for "toggle". Change them to something else:
<input type="checkbox" class="toggle" id="toggle2"/>
DEMO

To achieve expected result, use below option
Use same class instead of same id for toggle (as id has to be unique)
Use Opacity:0 instead of display:none (as it will be not available on DOM for events)
HTML:
<input type="checkbox" class="toggle" />
CSS:
.toggle {
opacity:0
}
.toggle:checked~.fieldsetContainer {
height: auto;
}
.toggle:checked~label .arrow-dn {
display: none;
}
.toggle:checked~label .arrow-up {
display: inline-block;
}
https://jsfiddle.net/Nagasai_Aytha/juoy75rg/84/

Related

read array and display html div

how do I display my array "employee" to this table?
the idea is to display each name with on button on the side.
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<tr class="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-list" width="70%">{employees}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01"
data-clear-btn="false"
style="background: #006b54; color:white !important ;"
id="{id}-inspectSelected">
</button>
</td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closePopup()">Close</button>
</div>
</div>
js
var employees = ['usera', 'userb', 'userc'];
Check out these lessons by W3 Schools:
Creating elements: https://www.w3schools.com/jsref/met_document_createelement.asp
Changing Inner Html: https://www.w3schools.com/jsref/prop_html_innerhtml.asp

How to hide table column on submit inside a modal

On a user profile page I have a table where the headings are not on the top but on the left side, and descriptions are on the right.
When user clicks 'edit profile' a modal opens up.
In the modal I want to hide table columns or I guess in this case rows by selecting the checkboxes and then hitting the 'save changes' button. When 'save changes' is clicked their choices should also be saved and updated on their profile.
I also want a few of the checkboxes to already be checked when they visit their profile page for the first time after registering. And then they should be able to change it there after.
My code is not working and I tried everything I could find on hiding columns... I have been looking for days. Any help is much appreciated!
TABLE
<div class="row">
<table class="table table-responsive-sm" id="profileTable" id="table-pagination" cellspacing="0" style="width:100%" >
<tbody>
<?php
$sql = "SELECT `dancing_since`, `dancer_dob`, `school`, `school_code`,`teacher_name`, `class_location`, `date_enrolled`, `date_firstdance`, `first_dance_name`, `current_lvl` FROM `dancers` WHERE name = '$name' AND dancer_name = '$dancerName'";
$res = mysqli_query($con,$sql);
//if($res==FALSE){
//die('there was an error running query [' . $con->error . ']');
// }
while($row=mysqli_fetch_array($res)){
echo '
<tr>
<th class="tcol1">Dancing Since:</th>
<td class="tcol1">'.$row["dancing_since"].'</td>
</tr>
<tr>
<th class="tcol2">D.O.B:</th>
<td class="tcol2">'.$row["dancer_dob"].'</td>
</tr>
<tr>
<th class="tcol3">School:</th>
<td class="tcol3">'.$row["school"].'</td>
</tr>
<tr>
<th class="tcol4">School Code:</th>
<td class="tcol4">'.$row["school_code"].'</td>
</tr>
<tr>
<th class="tcol5">Teachers Name:</th>
<td class="tcol5">'.$row["teacher_name"].'</td>
</tr>
<tr>
<th class="tcol6">Class Location:</th>
<td class="tcol6">'.$row["class_location"].'</td>
</tr>
<tr>
<th class="tcol7">Date Enrolled:</th>
<td class="tcol7">'.$row["date_enrolled"].'</td>
</tr>
<tr>
<th class="tcol8">First Feis</th>
<td class="tcol8">'.$row["first_dance_name"].'</td>
</tr>
<tr>
<th class="tcol9">Date of First Feis:</th>
<td class="tcol9">'.$row["date_firstdance"].'</td>
</tr>
<tr>
<th class="tcol10">Current Level:</th>
<td class="tcol10">'.$row["current_lvl"].'</td>
</tr>
';
}
?>
</tbody>
MODAL
<!--POPUP MODAL FORM-->
<div class="formModal">
<div class="formModal text-right">
<button type="button" class="btn btn-outline-primary editprofile-btn" data-toggle="modal" data-target=".bd-editprofile-modal-lg">Edit Profile</button>
</div>
<!-- Modal -->
<div class="modal fade bd-editprofile-modal-lg" id="editProfile" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<form id="updateForm" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<div class="controls">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel7" role="tab">Edit Profile Information</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel8" role="tab">Change visiblity</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 7-->
//some code for edit profile form
<!-- PANEL 8 -->
<div class="tab-pane fade" id="panel8" role="tabpanel">
<div class="modal-body">
<div class="container-fluid">
<div class="panel-8-heading text-center">
<b>Select up to 10 abilities you would like to appear on your profile.</b>
</div>
<br>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" name="col1" class="hidecol" id="col_1" data-column="0"/> Dancing Since
</div>
<div class="col-sm-4">
<input type="checkbox" name="col2" class="hidecol" id="col_2" checked="checked" data-column="1" /> D.O.B
</div>
<div class="col-sm-4">
<input type="checkbox" name="col3" class="hidecol" id="col_3" data-column="2"/> School
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" name="col4" class="hidecol" id="col_4" checked="checked" data-column="3"/> School Code
</div>
<div class="col-sm-4">
<input type="checkbox" name="col5" class="hidecol" id="col_5" checked="checked" data-column="4"/> Teacher's Name
</div>
<div class="col-sm-4">
<input type="checkbox" name="col6" class="hidecol" id="col_6" checked="checked" data-column="5"/> Class Location
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col7" id="col_7" checked="checked" data-column="6"/> Date Enrolled
</div>
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col8" id="col_8" data-column="7" /> First competition
</div>
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col9" id="col_9" checked="checked" data-column="8"/> Date of First dance
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col10" id="col_10" data-column="9" /> Current Level
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</div>
</div>
<!-- PANEL 8 END -->
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save">Save changes</button>
</div>
</div>
</form>
</div>
</div>
JQUERY
$(document).ready(function() {
//modal checkbox
$('#profileTable tr td:nth-child(3)').hide();
});
EDIT
Below are images of the user table and the modal with checkboxes. I want to be able to hide the entire row. so if user deselect location then on their profile they would no longer see "location: NJ"
PROFILE TABLE
MODAL
I would suggest a slightly different approach:
you write a modal form where user selects the content he or she wants to be visible in the profile page.
submit that data to the server.
reload the page
when creating a new page, return only the data that the user has selected in the form (from settings), use filter (or a set of if conditions as this seems to be homework) to select the data your user wants to see.
return only the necessary data
render it. (You will not need to hide the data)
This approach has several benefits:
you avoid the complexity of hiding / showing data
you avoid displaying data that should not be displayed: user can still view hidden columns if they edit html, and that is a huge no-no in web development.
it is easier to add new data to the profile
you can easily save the user preferences as per your requirement
If you want to go a step further, you can try improving the above by writing ajax code to update the rows dynamically, without reloading the entire page.
Will not be giving any specific code examples as its a lengthy task, and also it looks like a class or homework task. Good luck!
HTML
<table border="1" id="myTable">
<tbody>
<tr id='trow1'>
<th>Dancing Since:</th>
<td>2012</td>
</tr>
<tr id='trow2'>
<th>D.O.B:</th>
<td>1994</td>
</tr>
<tr id='trow3'>
<th>School:</th>
<td>ABC</td>
</tr>
<tr id='trow4'>
<th>School Code:</th>
<td>1001</td>
</tr>
<tr id='trow5'>
<th>Teachers Name:</th>
<td>Badai</td>
</tr>
</tbody>
</table>
<button id="myBtn_colSwitch" style="margin-left: 2%;" onClick="columnSwitchMODAL()">Row Filter</button> <!-- onclick opens MODAL -->
<!-- The Modal Column Switch -->
<div id="myModal_colSwitch" class="modal_colSwitch">
<div class="modal-content_colSwitch">
<span class="close_colSwitch">×</span>
<input id='1' type='checkbox' onClick='javascript:displayROW(1);' checked>Dancing Since<br>
<input id='2' type='checkbox' onClick='javascript:displayROW(2);' checked>D.O.B<br>
<input id='3' type='checkbox' onClick='javascript:displayROW(3);' checked>School<br>
<input id='4' type='checkbox' onClick='javascript:displayROW(4);' checked>School Code<br>
<input id='5' type='checkbox' onClick='javascript:displayROW(5);' checked>Teachers Name<br>
</div>
</div>
<!-- Column Switching ENDS -->
CSS
/* Column Switch */
.modal_colSwitch
{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content_colSwitch
{
background-color: #fefefe;
margin: 100px auto;
padding: 60px;
border: 1px solid #888;
width: 25%;
height: 25%;
overflow-y: scroll;
box-shadow: 5px 10px 18px #888888;
}
#myBtn_colSwitch
{
background-color: #6599FF;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
/* The Close Button */
.close_colSwitch {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_colSwitch:hover,
.close_colSwitch:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Column Switch ENDS */
/* Table Style */
#myTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 30%;
margin: 0 auto;
}
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
}
#myTable tr:nth-child(even){background-color: #f2f2f2;}
#myTable tr:hover {background-color: #ddd;}
JAVASCRIPT
function columnSwitchMODAL()
{
var modal_colSwitch = document.getElementById('myModal_colSwitch');
var btn_colSwitch = document.getElementById("myBtn_colSwitch");
var span_colSwitch = document.getElementsByClassName("close_colSwitch")[0];
btn_colSwitch.onclick = function()
{
modal_colSwitch.style.display = "block";
}
span_colSwitch.onclick = function()
{
modal_colSwitch.style.display = "none";
}
window.onclick = function(event)
{
if (event.target == modal_colSwitch)
{
modal_colSwitch.style.display = "none";
}
}
}
function displayROW(row_no)
{
var hideDisplay = '';
if(document.getElementById(row_no).checked)
hideDisplay = 'table-row';
else
hideDisplay = 'none';
if(row_no == 1) document.getElementById('trow1').style.display = hideDisplay;
else if(row_no == 2) document.getElementById('trow2').style.display = hideDisplay;
else if(row_no == 3) document.getElementById('trow3').style.display = hideDisplay;
else if(row_no == 4) document.getElementById('trow4').style.display = hideDisplay;
else if(row_no == 5) document.getElementById('trow5').style.display = hideDisplay;
}
Hope this helps!
I don’t know if this is only an extract of the code or a mistake, because I can’t find any <table> defined in the modal. And from your jquery code you need an element with id profileTable.
I suggest you to state what have you tried and what is not working. Also you can divide the problem in a smaller scale and to identify the root cause. E.g. try the hide/show mechanism outside the modal, or break down the jquery code (if $('#profileTable tr td:nth-child(3)') return nothing then .hide() would take no effect)
Update 1
I think you are trying to hide the table column(the vertical one). First, the table has 2 ids, profileTable and table-pagination. Remove either one so the table has exactly one id. Since # is a id selector, multiple id may mess up the css. Second, let's put "modal" aside. Browser has no knowledge about modal, it just know there are bunch of nested html elements with different styling. With or without modal, javascript should work the same way. It helps you to break down your through model and find the root cause easier.
I made a demo base on the snippet you provided. Two buttons at the bottom shows how to hide and show column.
https://codepen.io/anon/pen/oMpRbq
Update 2
Understand the requirement and update the demo. Hide/show the row instead of column. The concept is almost the same, the different is to select tr instead of td. I only make 2 checkbox since they are all the same.
$('#filter-panel').on('change', 'input', function(e) {
var rowIndex = $(e.currentTarget).val();
$('#profileTable tr:nth-child(' + rowIndex + ')').toggle();
});
table {
border: 1px solid black;
border-collapse: collapse;
}
table td,
table th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<table class="table table-responsive-sm" id="profileTable" cellspacing="0" style="width:100%">
<tbody>
<tr>
<th class="tcol1">Dancing Since:</th>
<td class="tcol1">'.$row["dancing_since"].'</td>
</tr>
<tr>
<th class="tcol2">D.O.B:</th>
<td class="tcol2">'.$row["dancer_dob"].'</td>
</tr>
<tr>
<th class="tcol3">School:</th>
<td class="tcol3">'.$row["school"].'</td>
</tr>
<tr>
<th class="tcol4">School Code:</th>
<td class="tcol4">'.$row["school_code"].'</td>
</tr>
<tr>
<th class="tcol5">Teachers Name:</th>
<td class="tcol5">'.$row["teacher_name"].'</td>
</tr>
<tr>
<th class="tcol6">Class Location:</th>
<td class="tcol6">'.$row["class_location"].'</td>
</tr>
<tr>
<th class="tcol7">Date Enrolled:</th>
<td class="tcol7">'.$row["date_enrolled"].'</td>
</tr>
<tr>
<th class="tcol8">First Feis</th>
<td class="tcol8">'.$row["first_dance_name"].'</td>
</tr>
<tr>
<th class="tcol9">Date of First Feis:</th>
<td class="tcol9">'.$row["date_firstdance"].'</td>
</tr>
<tr>
<th class="tcol10">Current Level:</th>
<td class="tcol10">'.$row["current_lvl"].'</td>
</tr>
</tbody>
</table>
<br /><br />
<div id="filter-panel">
<input type="checkbox" name="vehicle" value="1" checked/> dancing since
<input type="checkbox" name="vehicle" value="2" checked/> d.o.b
</div>

Showing/Hiding Fields on checkbox event using jQuery

I tried to use this issue as a guide, but I'm not sure what I'm doing wrong with my below code. I'd appreciate it if someone could help out.
A little background: I have limited ability to change the HTML as it's in Confluence using an add-on called Confiforms. I can hide/show fields using Confiforms, but I generally find that it takes a performance hit when I configure it that way.
HTML:
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"/>
</span>
</span>
</p>
</td>
</tr>
Relevant jQuery:
$('input[type="checkbox"]').change(() => {
if ($(this).is(':checked')) {
$(this).closest('tr').next('tr').show();
}
else {
$(this).closest('tr').next('tr').hide();
}
});
Thanks!
You should be very careful when using jquery with arrow functions:
$('input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
$(this).closest('tr').next('tr').show();
} else {
$(this).closest('tr').next('tr').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
</span>
</span>
</p>
</td>
</tr>
</table>
The arrow-function preserve the context of this, thus it's no longer the relevant element you attached the event to.
In case you do want to use arrow function, you can use the following:
$('input[type="checkbox"]').change((evt) => {
el = evt.currentTarget;
if ($(el).is(':checked')) {
$(el).closest('tr').next('tr').show();
} else {
$(el).closest('tr').next('tr').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
</span>
</span>
</p>
</td>
</tr>
</table>

How to refresh a particular div in a page that contains a dashboard?

I work with OpenEprp 7.0 and i want to refresh a particular div in a page that contains a dashboard. the code of the first part of the dashboard is the following:
<t t-if="number === 2">
<table style="margin-left:360px;margin-top:0px;margin-bottom:0px;">
<tr>
<td style="text-align:left;font-size:12px;"><b>Jusqu'au mois courant:</b></td>
<td>
<input type="radio" id="radio_budget_cumulee_jusque_mois_courant" value="courant" name="radio_budget_cumulee" />
</td>
</tr>
<tr>
<td style="text-align:left;font-size:12px;"><b>Jusqu'au fin d'année:</b></td>
<td>
<input type="radio" id="radio_budget_cumulee_jusque_fin_anneee" value="fin" name="radio_budget_cumulee"/>
</td>
</tr>
</table>
<div id="budg">
<div t-attf-id="#{view.element_id}_action_#{column_index}_#{action_index}" class="oe_content" t-att-style="action.attrs.fold ? 'display: none;' : 'height: 220px;overflow-x: hidden;overflow-y: auto;padding: 0 12px 1px;'"></div>
</div>
</t>
I want to refresh the div with the id budg in my js i write the following code:
$('#budg').load(document.URL + ' #budg');
the div is loaded but there is no content. Any help please

check to see a child div has certain link in a parent DIV

<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
How can i use jQuery/Javacript to find link with "abc" inside #name div of #posts table.
and after locating it (the link with abc). jQuery will add html content to #post-content #load div of that table that has link with "abc" inside ,using the html(); function in jQuery.
that means after adding my code will look like this :
<div id="posts">
<table>
<tr>
<td>
<div id="name" class="enabled">User1</div>
</td>
<td>
<div id="post-content">
Hello
<div id="load">
Some stuff is added here using html()
</div>
</div>
</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td>
<div id="name" class="enabled">User2</div>
</td>
<td>
<div id="post-content">
Hello too
<div id="load"></div>
</div>
</td>
</tr>
</table>
</div>
while the #name with no link with "abc" which is the link with "user2" will not be affected or modifeid.
How can i do this?
I hope you understand.
Assuming you fix the html and use classes:
$('.name a[href*="abc"]').closest('tr').find('.load').html('Some stuff is added here using html()');
Find a tag with href containing 'abc'
Get parent tr
Find #postcontent >#load within this element
var x = $('a[href*="abc"]');
var b = x.parents('tr');
var c = b.find('#post-content > #load');
alert(c.html());

Categories