How can I edit specific div's using Angular? I have a upset of div's at my page, containing tablerows with data. When I click on a edit-button on a specific div, I want that to bed editable.
How can I bind the click event to that particular div? I have done something like this now:
<div ng-show="summary.abbData.service_type == 'NaoLan'" class="col-md-6" style="background-color: #ffffff; width: 325px; margin-left: 15px;">
<h5 class="bg-primary rmpad15" style="margin-top: 1px; padding: 5px;">{{summary.abbData.service_type}}<button type="button" ng-click="editAbb(customer.id)" class="btn btn-default btn-xs" style="float: right; margin-top: -3px;"><span class="glyphicon glyphicon-pencil"></span></button></h5>
<table class="table table-condensed pad1">
<tbody>
<tr>
<td><strong>Hastighet</strong></td><td>{{summary.abbData.service}}</td>
</tr>
<tr>
<td><strong>Läghenhetsnr</strong></td><td>{{summary.abbData.apartment}}</td>
</tr>
<tr>
<td><strong>Månadsavgift</strong></td><td>{{summary.abbData.month_fee}}kr</td>
</tr>
<tr>
<td><strong>Anslutningsavgift</strong></td><td>{{summary.abbData.conn_fee}}kr</td>
</tr>
<tr>
<td><strong>Bindningstid</strong></td><td>{{summary.abbData.fixation}}mån</td>
</tr>
<tr>
<td><strong>Registreringsdatum</strong></td><td>{{summary.abbData.reg_date}}</td>
</tr>
</tbody>
</table>
</div>
As you can see, I have ng-click, but I don't know how to bind the div to the click event. ANyone?
please see here jsbin.com/zataro/2/edit?html,output
<tr>
<td><strong>Läghenhetsnr</strong>
</td>
<td>
<span ng-hide="edit.apartment">{{summary.abbData.apartment}}</span>
<input ng-model="summary.abbData.apartment" type="text" ng-show="edit.apartment" />
</td>
<td>
<button ng-click="edit.apartment=!edit.apartment">
<span ng-show="!edit.apartment">Edit</span>
<span ng-show="edit.apartment">Save</span>
</button>
</tr>
Related
I'm working on a Survey and on the system that I work I don't have access to change the HTML directly but I can add CSS or JavaScript to the existing code.
I have the following HTML and I would like the input field to be right underneath the first name. I can only use the ID's as the classes are the same in many other fields that I don't want changing them. I'm a bit stack so if anyone has an idea I would really appreciate..Thanks!
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
Please check if this helps you to achieve the desired style
td.pd_label ~ td {
float: left;
position: absolute;
left: 7px;
margin-top: 1em;
}
The same selector (td.pd_label ~ td) works in JavaScript also.
You can use the + selector
#pnlPersonalDetails2 + .surveyquestions td {
display:block;
}
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
I have a table with rows that can be collapsed, when I click the button to toggle collapse I see the font awesome icon update immediately but the collapse doesnt happen for almost half a second. When the collapse does happen it just jumps instantly to its final position rather than using an animation. Its almost as if it is running an animation that inst being displayed. Even when changing the .collapsing selector to have no transition this delay exists.
Here is the HTML
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.funcName)
</th>
<th></th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td class="hiddenField funcID">
#Model.ElementAt(i).funcID
</td>
<td class="funcName col-md-1">
#Html.DisplayFor(modelItem => Model.ElementAt(i).funcName)
</td>
<td class="row-actions col-md-1">
<div class="btn-group">
<button type="button" class="btn btn-default editFuncButton">Edit</button>
<button type="button" class="btn btn-default deleteFuncButton">Delete</button>
</div>
<i class="btn btn-toolbar fa fa-chevron-right expandFuncButton" data-target="#extraInfo_#i"></i>
</td>
</tr>
<tr id="extraInfo_#i" class="collapse out">
<td colspan="5">
<div class="argsList">
#Html.Action("Index", "Args", new { funcID = Model.ElementAt(i).funcID })
</div>
</td>
</tr>
}
</tbody>
Here is the JS that happens on toggle (I moved the collapse from the HTML to the JS while testing, but it occurs with both methods of triggering)
$(function ()
{
$(document).on("click", '.expandFuncButton', function ()
{
if ($(this).hasClass('fa-chevron-right'))
{
$(this).removeClass('fa-chevron-right');
$(this).addClass('fa-chevron-down');
}
else
{
$(this).removeClass('fa-chevron-down');
$(this).addClass('fa-chevron-right');
}
$($(this).attr("data-target")).collapse("toggle");
});
});
Here is the CSS I tried to apply to .collapsing to remove the transition
.collapsing
{
-webkit-transition: none;
transition: none;
display: none;
}
All of the data and such on the page works, and the collapse almost works except for this minor but annoying issue.
Your issue is in this line:
transition: none;
The default value must be unset and in order to change it you need to set important:
.collapsing {
transition: unset !important;
}
In any case, I suggest to handle directly the events: show.bs.collapse & hide.bs.collapse. In this way you overcome the transition at all:
$('[id^=extraInfo_]').on('show.bs.collapse hide.bs.collapse', function(e) {
$(this).toggle();
})
$('[id^=extraInfo_]').on('show.bs.collapse hide.bs.collapse', function(e) {
$(this).toggle();
})
$(document).on("click", '.expandFuncButton', function ()
{
$(this).toggleClass('fa-chevron-right fa-chevron-down')
$($(this).attr("data-target")).collapse("toggle");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.js"></script>
<table class="table">
<thead>
<tr>
<th>
funcName)
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="hiddenField funcID">
funcID
</td>
<td class="funcName col-md-1">
funcName)
</td>
<td class="row-actions col-md-1">
<div class="btn-group">
<button type="button" class="btn btn-default editFuncButton">Edit</button>
<button type="button" class="btn btn-default deleteFuncButton">Delete</button>
</div>
<i class="btn btn-toolbar fa fa-chevron-right expandFuncButton" data-target="#extraInfo_1"></i>
</td>
</tr>
<tr id="extraInfo_1" class="collapse out">
<td colspan="5">
<div class="argsList">
1<br/>
1<br/>
1<br/>
</div>
</td>
</tr>
<tr>
<td class="hiddenField funcID">
funcID
</td>
<td class="funcName col-md-1">
funcName)
</td>
<td class="row-actions col-md-1">
<div class="btn-group">
<button type="button" class="btn btn-default editFuncButton">Edit</button>
<button type="button" class="btn btn-default deleteFuncButton">Delete</button>
</div>
<i class="btn btn-toolbar fa fa-chevron-right expandFuncButton" data-target="#extraInfo_2"></i>
</td>
</tr>
<tr id="extraInfo_2" class="collapse out">
<td colspan="5">
<div class="argsList">
1<br/>
1<br/>
1<br/>
</div>
</td>
</tr>
</tbody>
</table>
When mouse hovers on a cell, suppose effect X takes place. How can I remove the hover effect?
JS Fiddle
HTML code:
<table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
Update
I tried this CSS:
tbody tr:hover td.hasRowSpan {
background-color: none; /* or whatever color you want */
}
It doesn't work, unfortunately.
Remove the class "table-hover" from the table tag.
http://jsfiddle.net/ozr598jb/6/
You would have take Bootstrap hover rules and cancel background color with inherit (default, which is none):
.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
background-color: inherit;
}
Of course it makes more sense to set some other hover style, other color, or border, etc. Otherwise don't use table-hover class on the table in the first place.
Demo: http://jsfiddle.net/ozr598jb/3/
I'm attempting to refresh a div and am ending up with a duplication of the div ie; one inside of the other. I'm currently using jQuery, Struts2, and the Struts2 jQuery plugin for my view.
what it is currently doing:
<div id="nameVolumeWrapper....>
<div id="nameVolumeWrapper....>
</div>
</div>
refresh script
<script>
function reloadContent() {
$('#nameVolumeWrapper').load('${jsonAction} #nameVolumeWrapper');
}
</script>
Element that calls the refresh script
<sj:select href="%{jsonURL}"
id="utility"
name="selectedUtility"
list="utilityList"
headerKey="-1"
headerValue="Please Select A Utility"
onchange="reloadContent()"
onChangeTopics="reloadSecondList"/>
div that I'm attempting to reload
<sj:div id="nameVolumeWrapper" listenTopics="reloadSecondList"
effect="pulsate" effectDuration="1000"
cssStyle="height:250px; overflow-y: scroll; width:910px;
margin-left:auto; margin-right:auto;">
<table id="pricingInput" class="footable" style="width: 800px;
table-layout: fixed; margin-left: auto; margin-right: auto;
margin-bottom:50px;">
<thead>
<tr>
<th style="text-align: center;">Account Name</th>
<th style="text-align: center;">Annual kWh Volume</th>
<th style="text-align: center">Rate Class</th>
<th style="text-align: center;">Add Another?</th>
</tr>
</thead>
<tbody>
<tr>
<td><s:textfield name="nameHolder" /></td>
<td><s:textfield name="volumeHolder" /></td>
<s:url id="jsonURL" action="jsonAction" namespace="/"/>
<td>
<sj:select href="%{jsonURL}"
id="rate_class" name="rateHolder"
list="rateClassList"
headerKey="-1"
headerValue="Please Select a RateClass"
reloadTopics="reloadSecondList"/>
</td>
<td>
<input type="button" class="addButton" value="Add" />
<input type="button" value="Delete" onclick="deleteRow(this)">
</td>
</tr>
</tbody>
</table>
long story short, how do I modify my javascript or div definition to make it so that the div doesn't duplicate when the javascript is called?
you could do something like this:
$.get("${jsonAction} #nameVolumeWrapper", function(data) {
$('#nameVolumeWrapper').html($(data).html());
});
Or if that doesn't work you could do:
var wrapper = $('#nameVolumeWrapper');
wrapper.load('${jsonAction} #nameVolumeWrapper', function() {
wrapper.children('#nameVolumeWrapper').unwrap();
});
I've the following code:
<table class="table">
<tr>
<th>Name___</th>
</tr>
<tr ng-repeat="app in apps"
ng-click="go('/editApp/' + plugin.name);">
<td>
<span>{{app.name}}</span>
</td>
<td style="width: 100px;">
<i class="glyphicon glyphicon-pencil"
ng-click="openPopup(app)"></i>
</td>
</tr>
</table>
When I click on the OpenPopup, also the go() method firing, how can I do that, If I click on popup just the popup will fire?
This executing because your <td> nested in <tr>, and click firstly fired openPopup()
then fired go(). You can use $event.stopPropagation() for stop event propagation to <tr>.
Try
<table class="table">
<tr>
<th>Name___</th>
</tr>
<tr ng-repeat="app in apps"
ng-click="go('/editApp/' + plugin.name);">
<td>
<span>{{app.name}}</span>
</td>
<td style="width: 100px;">
<i class="glyphicon glyphicon-pencil"
ng-click="openPopup(app);$event.stopPropagation()"></i>
</td>
</tr>
</table>