I have a link whose title should change from "Add Comment" to "Edit Comment" only if a child has a class of .has-comment. What complicates the matter is that I also toggle icons which are also in a .
So if the div.additional-comments has class of .has-comment then I'd like the text to read "Edit Comment" otherwise it should read "Add Comment".
See working code here: JSFiddle
HTML
<table>
<tr>
<td>
<a class="toggle-comments">
<span class="add-comment" style="display:none;">Add</span>
<span class="edit-comment">Edit</span> Comments
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true" style="display: inline-block;"></span>
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true" style="display: none;"></span>
</a>
<div class="additional-comments has-comment" style="display:none;">
<textarea>Comment is here...</textarea>
</div>
</td>
</tr>
<tr>
<td>
<a class="toggle-comments">
<span class="add-comment">Add</span>
<span class="edit-comment" style="display:none;">Edit</span> Comments
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true" style="display: inline-block;"></span>
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true" style="display: none;"></span>
</a>
<div class="additional-comments" style="display:none;">
<textarea></textarea>
</div>
</td>
</tr>
</table>
Script
// Toggle Comments
$(document).ready(function() {
$('.toggle-comments').click(function() {
$(this).next('.additional-comments').toggle("fast");
$(this).find('span').fadeToggle(0);
});
});
I'm not really sure if I understand what you want to achieve so I updated your fiddle, tell me if its what you aimed : http://jsfiddle.net/benjaminb/mgdaf5ar/3/
I only changed this
$(this).find('span.glyphicon').fadeToggle(0);
You can ignore all your glyphicons by changing your find to:
$(this).find('span:not(.glyphicon)')
Related
I am trying to toggle popover element if it is clicked outside of the div element containing the popover and if clicked on any other div containing popover.
I went through other post that did not help or I could not figure out how do I implement in my scenario.
My html
<div id="myTableDiv">
<table id="myTable">
<tr>
<td>Product</td>
<td>Qty</td>
</tr>
<tr>
<td>
<div class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is factory damage">
<span style="margin-right:5px">shirt</span>
<i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i>
</div>
</td>
<td>5</td>
</tr>
<tr>
<td>
<div class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is size mis match">
<span style="margin-right:5px">shoes</span>
<i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i>
</div>
</td>
<td>15</td>
</tr>
</table>
</div>
$('#myTableDiv').on('click', '.popUpClass', function(e) {
$(this).popover({
content: $(this).data('reason'),
container: 'body'
})
})
Hello as the documentarion says here you should add a tabindex attribute so your <div> will be:
<div tabindex="0" class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is factory damage">
<span style="margin-right:5px">shirt</span>
<i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i>
</div>
And in the configuration of your popover you have to add the trigger:
trigger: 'focus'
I hide all the popovers and then show only the clicked element
Finally your code could be:
$('#myTableDiv').on('click', '.popUpClass', function(e) {
$(this).popover({
trigger: 'focus',
content: $(this).data('reason'),
container: 'body'
})
$('.popUpClass').popover('hide');
$(this).popover('toggle');
})
Here you can find the complete example
I Have the following code cshtml
<div class="container-fluid" id="dvUserData">
<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
#Html.Partial("Documentos")
<div class="col-md-3">
<button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
</div>
</div>
and the following binding
ko.applyBindings(model, document.getElementById("dvUserData"));
But my data-bind="click: editData" does not work, the click is not performed. But if i put the div class="col-md-3" before the #Html.Partial("Documentos") the bindings work.
I have no idea why, I looked for posts here but could not find anything similar.
Thanks in advance for any help.
---EDITED
The Partial
<div class="row" id="dvDocument">
<form role="form">
<div class="row">
<div class="col-12">
<table class="table tabela-documentos">
<tbody data-bind="foreach: documentsReturn().documentTypes">
<tr class="bg-cinza">
<td>
<div class="aviso-sucesso" data-bind="visible : hasAllDocuments()"></div>
<div class="aviso-critica" data-bind="visible : !hasAllDocuments()"></div> <span data-bind="text: Description"></span>
</td>
<td>
<span class="d-none" data-bind="value: IdTypeDocument"></span>
<a class="btn btn-secondary" data-bind="click: function () { $parent.saveTypeDocument(IdTypeDocument); $('.alerta-form2').hide();}" data-toggle="modal" data-target="#modalDocumento">
ADICIONAR
</a>
</td>
</tr>
<!-- ko foreach: DocumentsArray() -->
<tr>
<td><i class="fa fa-file-text-o" aria-hidden="true"></i> Inclusão: <span data-bind="text: NewDate"></span></td>
<td>
<i class="fa fa-times pointer" data-toggle="modal" data-target="#modal-confirmation" aria-hidden="true" data-bind="visible : !frombase(),
, click: function(){ #*if (confirm('Deseja realmente deletar o documento?')) {*# $parent.savePath(Path); #*}*# }"></i>
</td>
</tr>
<!-- /ko-->
</tbody>
</table>
</div>
</div>
<div class="alert-button">
</div>
</form>
</div>
I forgot to mention that i have another javascript file that bindings the div document with a different model.
Press the F12 and check for any knockout js init (ko.applyBindings) error.
If there is any, fix it and try.
If no error exist, then make sure you have set a value to the model.Name() property by debugging the code.
and check your partial view and see whether you have narrow down the scope/ binding context to another complex property of you model which also has the Name property.
It would be better if you could give more info about partial view binding declaration and the how you are setting / loading the initial values to your model.
After looking for the solution and talk with some friends i found out what was the problem. I was binding the major div, that had the div id "documentos", and another information, and this was the problem.
I remove the binding of dvUserData, and put the binding in all the div that i had, including creating a new div just for the button.
This is how my div "documentos" is now.
<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
#Html.Partial("Documentos")
<div class="alert-button mb-3">
<div id="dvDocumentValidate">
<button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
</div>
</div>
</div>
And my bindings
ko.applyBindings(model, document.getElementById("dvLoading"));
ko.applyBindings(model, document.getElementById("personaldata"));
ko.applyBindings(model, document.getElementById("address"));
ko.applyBindings(model, document.getElementById("databank"));
ko.applyBindings(model, document.getElementById("dvDocumentValidate"));
ko.applyBindings(model, document.getElementById("corporatedata"));
What need is in script in panel body text to be shown in rows for every data in ng-repeat. On left to be data.name and right to be icon. With current code data is not showing on separate rows, it is messy.
<script type="text/ng-template" id="field_renderer.html">
<div class="col-md-6" ng-repeat-start="data in data.children">
<div class="row">
<label>
<input type="checkbox" value="{{data.name}}" ng-model="data.isSelected">
{{data.name}}
</label>
<span ng-if="data.children.length > 0">
<i class="pull-right glyphicon" data-ng-click="data.showDetails = !data.showDetails"
ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</span>
</div>
</div>
<div ng-repeat-end ng-if="data.showDetails" ng-include="'field_renderer.html'"></div>
</script>
<div class="panel-group">
<div ng-repeat-start="data in reportsvm.filters" class="panel panel-default">
<div class="panel-heading clickable" data-ng-click="reportsvm.showDetails(data)">
<h4 class="panel-title">
{{data.name}}
<i ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</h4>
</div>
</div>
<div class="panel-body small" ng-if="data.showDetails" ng-repeat-end ng-include="'field_renderer.html'"></div>
</div>
Here is screnshot of how it is looking.
As you can see for location that two checkboxes I need to be one after another in separate rows. Also in Program i need to be in separate rows and in each row that icon to be on right.
UPDATE - CURRENT SOLUTION
<table class="table">
<tbody>
<tr ng-if="data.name === 'Location'">
<td class="noBorder" colspan="2">
<button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
Regions</button>
<button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
State/Territory</button>
</td>
</tr>
<tr ng-repeat-start="data in data.children">
<td class="noBorder">
<label>
<input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data)" ng-model="data.isSelected">
{{data.name}}
</label>
</td>
<td class="noBorder">
<span ng-if="data.children.length > 0">
<i class="pull-right glyphicon" data-ng-click="data.showDetails = !data.showDetails"
ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</span>
</td>
</tr>
<tr ng-repeat-end ng-if="data.showDetails">
<td class="noBorder" ng-include="'field_renderer.html'"></td>
</tr>
</tbody>
</table>
It makes sense. You try to create a new checkbox for every column.
Bootstrap tries to fill in the space for col-md-6 (2-column layout).
<div class="col-md-6" ng-repeat-start="data in data.children">
One solution would be to put the ng-repeat in the row element:
<div class="col-md-6">
<div class="row" ng-repeat-start="data in children>
<!--rest of the code ....-->
</div>
</div>
I use Foundation 6 and the close button http://foundation.zurb.com/sites/docs/close-button.html
inside jQuery Reveal Modal Plugin http://foundation.zurb.com/sites/docs/reveal.html .
When i click on the close button of the table row, the whole modal will close, too.
How can i make the close button remove only the table row without closing the modal?
My HTML:
[![<div class="reveal" id="wishlist" data-reveal>
<p class="lead">Ihre Wunschliste</p>
<div class="wishlist">
<div data-hook="cart_container">
<table class="stack articles">
<thead></thead>
<tbody>
<tr class="callout" data-closable>
<td>CHF 199.00
<div class="nile-close-button">
<span class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×
<div class="close-button-text">entfernen</div>
</span>
</span>
</div>
</td>
</tr>
<tr class="callout" data-closable>
<td>CHF 179.00
<div class="nile-close-button">
<span class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×
<div class="close-button-text">entfernen</div>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>][1]][1]
It doesn't seem possible to override data-close handling in Foundation. So I ended up with removing Foundation's Close Button and make one myself.
I have a table of data consisting of 3 columns. In the third column is a button to click which should add data to the external div with the id of routeList from the first p in the second column. Here is my html. As well I have added a click event to change the class of the button and change the button text.
.html
<tr>
<td class="col1"><img src="http://placehold.it/200x200" alt="..." class="img-responsive tableImage"></td>
<td class="col2">
<p class="address">
<i class="fa fa-home fa-lg"></i> Address
</p>
<p>
<i class="fa fa-calendar fa-lg"></i> Dates
</p>
<p>
<i class="fa fa-map-marker fa-lg"></i> Distance
</p>
</td>
<td class="col3">
<button type="button" class="btn btn-sm routeAdd btn-success" data-toggle="addToRoute"><i class="fa fa-check"></i> Added</button>
</td>
</tr>
.js
$('[data-toggle=addToRoute]').click(function() {
if($(this).children().hasClass('fa-plus')) {
$(this).removeClass('btn-custom').addClass('btn-success').empty().html('<i class="fa fa-check"></i> Added');
} else {
$(this).removeClass('btn-success').addClass('btn-custom').empty().html('<i class="fa fa-plus"></i> Add');
}
});
I was trying to add this to the first section of the if statement
$(this).closest('p.address').appendTo('#routeList');
I think I am missing something simple. As well on the flip side of the else statement the p should be removed if the button is clicked. Am I not selecting the element correctly. Or I am attacking this completely wrong.
Try
$(this).closest('tr').find('p.address').appendTo('#routeList');
Find p.address in closest tr.
.find()