How to hide table column on submit inside a modal - javascript

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>

Related

Multiple collapse using CSS

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/

jqm flipswitch, float label left, switch right?

I am trying to get a bunch of flipswitches on a page in a mobile app.
I am using:
<div class="ui-content">
<form>
<fieldset>
<div data-role="fieldcontain">
<label for="checkbox-based-flipswitch">Checkbox-based:</label>
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
</div>
</fieldset>
</form>
</div>
It seems my "container" field is shortened. It does not stretch the entire width of the screen.
What am I missing?
I am looking to have the option fill the entire width of the screen. Label left, flipswitch right.
In this case a jQM grid might work better for you than a fieldcontain:
<div class="ui-grid-a flipContain">
<div class="ui-block-a">
<label for="chk1">Checkbox-based:</label>
</div>
<div class="ui-block-b">
<input type="checkbox" id="chk1" data-role="flipswitch" />
</div>
<div class="ui-block-a">
<label for="chk2">Checkbox-based:</label>
</div>
<div class="ui-block-b">
<input type="checkbox" id="chk2" data-role="flipswitch" />
</div>
</div>
Then with CSS, you can align the second column to the right and set the column widths as desired:
.flipContain .ui-block-a {
width: 70%;
line-height: 48px;
}
.flipContain .ui-block-b {
width: 30%;
text-align: right;
}
Apparently field-contain has been deprecated in 1.4 and will be removed in 1.5.
Can't you use a table width 100% and table cell ?
JsFiddle
<table width="100%">
<tr>
<td><label for="checkbox-based-flipswitch">Checkbox-based:</label></td>
<td><input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch"></td>
</tr>
</table>
And you can set the cell alignement as you want, as in the exemple both are centered.
td{
text-align:center;
}
You can set the alignment directly on the td JsFiddle :
<td align="right">

How to filter inputs by parent node, using JavaScript?

I have a problem with filtering inputs.
I have partial view which include sth like this:
<div class="editor">
<div class="demand-editor-label editor-label">#Html.LabelFor(m => m.WorkGroupID) #Model.WorkTypeD</div>
<div class="default-editor-field">
<div style="max-height:100px; overflow:auto;border-style:solid;border-width:1px;padding:3px; width: 98% !important; max-width:590px" id="#string.Format("uiDivWorkGroup{0}",Model.WorkTypeD)">
#Html.CheckBoxListFor(x => x.WorkGroupID, x => x.WorkGroupList, x => x.Key, x => x.Value, x => x.SelectedWorkGroups, new HtmlListInfo(HtmlTag.table, 2))
</div>
</div>
I execute it in my view like this:
<div id="uiDivWorkGroupMainNn" style="padding-top: 5px; clear: both">
#Html.PartialFor(model => model, MVC.Components.Views.Partial.WorkGroupView)
</div>
<div id="uiDivWorkGroupMainSn" style="padding-top: 5px; clear: both">
#Html.PartialFor(model => model, MVC.Components.Views.Partial.WorkGroupView)
</div>
<div id="uiDivWorkGroupMainWn" style="padding-top: 5px; clear: both">
#Html.PartialFor(model => model, MVC.Components.Views.Partial.WorkGroupView)
</div>
There is three different groups that using this partialview.
There is output:
<div id="uiDivWorkGroupMainNn" style="padding-top: 5px; clear: both;">
<div class="editor">
<div class="demand-editor-label editor-label"><label for="WorkGroupID">Work group</label> Nn</div>
<div class="default-editor-field">
<div id="uiDivWorkGroupNn" style="border-width: 1px; border-style: solid; padding: 3px; width: 98% !important; overflow: auto; max-height: 100px; max-width: 590px;">
<table cellSpacing="0">
<tbody>
<tr>
<td>
<input name="WorkGroupID" id="WorkGroupID12" type="checkbox" value="1034">
<label for="WorkGroupID12">Emergency [nN]</label>
</td>
<td>
<input name="WorkGroupID" id="WorkGroupID13" type="checkbox" value="1021">
<label for="WorkGroupID13">Cable nN</label>
</td>
</tr>
<tr>
</tr></tbody></table>
</div>
</div>
</div>
<br>
</div>
<div id="uiDivWorkGroupMainWn" style="padding-top: 5px; clear: both;">
<div class="editor">
<div class="demand-editor-label editor-label"><label for="WorkGroupID">Grupa prac</label> Wn</div>
<div class="default-editor-field">
<div id="uiDivWorkGroupWn" style="border-width: 1px; border-style: solid; padding: 3px; width: 98% !important; overflow: auto; max-height: 100px; max-width: 590px;">
<table cellSpacing="0">
<tbody>
<tr>
<td>
<input name="WorkGroupID" id="WorkGroupID12" type="checkbox" value="1014">
<label for="WorkGroupID15">Emergency [Wn]</label>
</td>
<td>
<input name="WorkGroupID" id="WorkGroupID13" type="checkbox" value="1029">
<label for="WorkGroupID16">Call Wn</label>
</td>
</tr>
<tr>
</tr></tbody></table>
</div>
</div>
</div>
<br>
</div>
Finally I want to use sth like this:
$('input[name|="WorkGroupID"]').change(some function1);
$('input[name|="WorkGroupID"]').change(some function2);
$('input[name|="WorkGroupID"]').change(some function3);
Unfortunately it collects all inputs and imposes on them 1-3function calls on change event but I want to collect them only from one group and apply them specific function. My first thought was to filter group of inputs by div parent which is for example uiDivWorkGroupMainWn but don't know how to do it. If it's even possible. I try sth like this but it doesn't work. I've read about .filter function but I don't know how to use it in this specific situation.
$('input[name|="WorkGroupID"]').parent("#uiDivWorkGroupMainNn").change(some function);
At this moment I'm not good at JS, so that's why I'm writing here.

How to remove an object using handlebars and backbone

I've poked around google for awhile now, but am having trouble implementing a delete, and soon editing functionality, on a personal, experimental project.
So I have a table populated by a list of 'resources' in my handlebars template:
<tbody id="resourceList">
{{#each models}}
<tr id="info_{{this.attributes.id}}" style="border-top: solid 1px black;">
<td width="3%"><button style="background: none; border: none;"><i id="icon" class="glyphicon glyphicon-plus-sign"></i></button></td>
<td id="title" width="67%">{{this.attributes.title}}</td>
<td width="10%">{{this.attributes.Type}}</td>
<td width="10%">{{this.attributes.itemsNeeded}}</td>
<td width="10%">04/05/2014</td>
</tr>
<tr id="expand_{{this.attributes.id}}" style="border-bottom: solid 1px black;">
<td colspan="5">
<div id="expand" class="jumbotron" style="margin-left: 1%; margin-right: 1%;">
<div>{{this.attributes.orgName}}</div>
<div>{{this.attributes.email}}</div>
<div>{{this.attributes.phoneNumber}}</div>
<div>{{this.attributes.address}}</div><br>
<div>{{this.attributes.description}}</div>
<div style="margin-top: 5%; margin-right: 5px;">
<input type="button" class="btn btn-danger" style="margin-left: 5px;" id="delete_post" value="Delete" />
</div>
</div>
</td>
</tr>
{{/each}}
</tbody>
This delete button button triggers an event in the view
events: {
"click #submit_post": "create",
"click #delete_post": "remove"
},
The remove function is where I'm lost. I don't know how I can 'know' which row was selected and pass it over to the view. I tried making the button class="{{this.attributes.id}} so that each one selected would have a class 1,2,3,4....But I don't understand how I can get the class of the selected element. I'm sure this is something really basic, so again, sorry :/
remove: function() {
this.model.destroy();
}

Why is my JQuery DIV transparent?

My Jquery ajax page loads and shows up in the DIV that lays itself over the other page elements but the DIV is transparent or it is in fact behind the other components and just looking like it is transparent and neds to render on top. How do I achieve a normal DIV over the other pages with a white background? Why is it difficult making an element not transparent? How can this be deafult behavior for a page element?
Javascript
function popup() {
alert('opening popup');
var popup = $('.newpopup');
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html(data);
popup.show('fast');
}
}
);
/*
popup.html("test");
popup.show('fast');
*/
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
I tried creating a jsfiddle to reproduce the problem but it seems jsfiddle can't do .getor .ajaxsince it couldn't load a page from the internet to the DIV.
What can you propose? There should be a clear solution to this and transparancy really should not be a default state for an element so how come the element renders with transparency?
The HTML is trivial
<div class="newpopup">
</div>
<button id="mypopup">popup</button>
My CSS which is like it is never reached is this
.newpopup {
z-index:100;
position: absolute;
top:50%;
left:50%;
background-color:#ffffff; //not working
}
And the HTML that is the actual popup / div is this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><link href="css_js/styles.css" rel="stylesheet" type="text/css">
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
</td>
<td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="sokF">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend>
<div class="fl30"> Förnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend>
<div class="fl30"> Företag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>
<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->
<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>
<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
-->
<div class="fl50"> </div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value=" Sök " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td><h3>Sökresultat:</h3></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span> </td>
</tr>
<tr>
<td><input type="button" value="Visa alla"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 527</td>
<td> </td>
<td>Visa ärenden: << 1-200 201-400 401-527 >> </td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
<th class="thkant">Förnamn</th>
<th class="thkant">Efternamn</th>
<th class="thkant">Adress</th>
<th class="thkant">Postnr</th>
<th class="thkant">Postort</th>
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>
</tr>
</table>
<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>
<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="Ändra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>
</body>
</html>
There should be a clear solution to this and transparancy really
should not be a default state for an element so how come the element
renders with transparency?
Actually, unless you specify an explicit background colour for an element the default is that they are transparent. This is so that the real page background can show through.
Just putting a background colour (and a z-Index if appropriate) on the popup div should then make it appear as an overlay as expected.
If it's not working then something is preventing the (correct) CSS you've supplied from being used.
Perhaps you should remove the extra HTML body etc from the loaded page? You shouldn't have two <body> tags present in the page at once. If you can't change the loaded page (e.g. if it's also used as a standalone page) then try something like:
popup.empty().append($('body', data).children());
instead of:
popup.html(data);
use following code to apply the background color to the div
$(".newpopup ").css('background-color', 'white');
So, if I'm reading this right, your jQuery script is reading a .jsp file, which has the full header setion, body etc...
You should either place the contents of the popup into an iFrame or strip out all the tags before (and including) the <body> and after (and including) </body>
you will try this attributes in .newpopup class
'overlayShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'opacity' : '0.80';
or
#popup {
margin: 0 auto;
height:100%;
width: 100%;
z-index:501;
background: #effeef;
position: absolute;
padding:0;
top: 0;
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
filter:alpha(opacity=100);
}
#window {
padding:0;
width: 200px;
height: 200px;
margin: 0 auto;
border: 3px solid #d3d4d3;
background:url(sign_in_bg.gif) repeat-x;
position: absolute;
top: 200px;
left: 45%;
}
<div id="popup" align="center" style="display:none">
<div id="window" align="center">
content....
</div>

Categories