Develop Reference

Ko Bindings after #Html.Partial do not work

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"));

Clickable link inside UI Sortable field

I am making a custom field for the Advanced Custom Fields plugin for wordpress.
Now I have been able to allow javascript to be used inside of the field but the field has UI-sortable active which makes my anchor tag not firering but instead clicks the sortable anchor.
Is there a way to make sure that my click event gets fired inside a sortable element?
So I created this link, to be placed inside a element :
<a id="addTable" href="#">Voeg tabel toe</a>
Which gets turned into an element like this :
<div id="normal-sortables" class="meta-box-sortables ui-sortable">
<div id="acf-group_5a93d53605864" class="postbox acf-postbox seamless">
<button type="button" class="handlediv" aria-expanded="true">
<span class="screen-reader-text">paneel Bridge verbergen</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<h2 class="hndle ui-sortable-handle">
<span>Bridge</span>
<a href="{link}/wp-admin/post.php?post=12695&action=edit"
class="dashicons dashicons-admin-generic acf-hndle-cog acf-js-tooltip"
title="Bewerk groep">
</a>
</h2>
<div class="inside acf-fields -top">
<div class="acf-field acf-field-Bridge acf-field-5a93d538671c7"
data-name="bridge"
data-type="Bridge" data-key="field_5a93d538671c7">
<div class="acf-label">
<label for="acf-field_5a93d538671c7">Bridge</label>
</div>
<div class="acf-input">
<!-- Here is the anchor tag -->
<a id="addTable" href="#">Voeg tabel toe</a>
<div id="ContentWrapper">
<div id="North"></div>
<div id="East"></div>
<div id="Middle">
<table bgcolor="#c0c0c0">
<tbody>
<tr>
<td colspan="3" align="center"><strong>N</strong></td>
</tr>
<tr>
<td align="left"><strong>W</strong></td>
<td> </td>
<td align="right"><strong>O</strong></td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Z</strong></td>
</tr>
</tbody>
</table>
</div>
<div id="South"></div>
<div id="West"></div>
</div>
</div>
</div>
<script type="text/javascript">
if ( typeof acf !== 'undefined' ) {
acf.postbox.render({
"id": "acf-group_5a93d53605864",
"key": "group_5a93d53605864",
"style": "seamless",
"label": "top",
"edit_url": "http:\/\/{link}\/wp-admin\/post.php?post=12695&action=edit",
"edit_title": "Bewerk groep",
"visibility": true
});
}
</script>
</div>
</div>
</div>
(function($) {
$("#addTable").click(function () {
alert( "Click" );
});
})(jQuery);

I am building a survey application using bootstrap,in that i have two image buttons thumbs up(likeq1()) and thumbs down(unlikeq1()) button

I am building a survey application using bootstrap,in that i have two image buttons thumbs up and thumbs down on my page , when i click thumbs up button it should be selected and when i click on thumbs down button it should select this button but deselect the thumbs up button.and also want to validate that the user must select a button without selecting it should not process or navigate to other page.
My code for the button :
<div class="row">
<div class="col-md-10" align="left">
<h5> My products solve real world problems.</h5>
</div>
<div class="col-md-1">
<h4><button type="button" class="btn-link" value="0" id="like1" onclick="likeq1()" >
<span class="fa fa-thumbs-up" ></span>
</button></h4>
</div>
<div class="col-md-1">
<h4> <button type="button" class="btn-link" value="0" id="unlike1" align="right" onclick="unlikeq1()">
<span class="fa fa-thumbs-down" ></span>
</button></h4>
</div>
</div>

How to open two semantic-ui modals using AngularJS?

I have an Angular Application. Created using SemanticUI (http://semantic-ui.com/). I use one modal to view some data and also there's a button in that modal to open another modal. When i open the second modal, it goes behind the first modal. I want to keep both modals. And I want to take the second modal to front. How can I do this ?
This is the code of first modal.
<div class="ui modal" id="viewMoreModal">
<i class="close icon"></i>
<div class="header">
Episodes of {{series.description}}
</div>
<div class="content">
<div class="ui grid">
<div class="floated right pointing west">
<button ng-click="openAddNewEpisodeModal()" class="ui purple button ">Add New Episode</button>
</div>
<div class="sixteen wide column">
<table class="ui very compact celled table">
<tr>
<th>Season</th>
<th>Episode</th>
<th>Alt. Episode Nr.</th>
<th>Title</th>
<th>Part</th>
<th>Duration</th>
<th>Release Date</th>
<th>Series</th>
<th>SubSeries</th>
<th>Tags</th>
</tr>
<tr ng-repeat="episode in episodes" onClick="HighLightTR(this,'#c9cc99','cc3333');">
<td>{{episode.data.season}}</td>
<td>{{episode.data.episode}}</td>
<td>{{episode.data["episode-alt"]}}</td>
<td>{{episode.data.title}}</td>
<td>{{episode.data.part}}</td>
<td>{{episode.data.duration | secondsToDateTime | date:'HH:mm:ss' }}</td>
<td>{{episode.data.date}}</td>
<td>{{episode.data.series}}</td>
<td>{{episode.data.subseries}}</td>
<td>
<a ng-repeat="sub_tag in episode.data.tags" class="ui mini orange tag label"><span>{{sub_tag}}</span></a>
</td>
</tr>
</table>
</div>
<div class="floated right pointing west">
<button ng-click="openAddNewEpisodeModal()" class="ui purple button ">Add New Episode</button>
</div>
</div>
</div>
</div>
And this is my second modal. This opens when user click on the "Add New Episode" button in first modal.
<div class="ui united modal" id="addNewEpisodeModal">
<i class="close icon"></i>
<div class="header">
Add New Episode
</div>
<div class="content">
</div>
</div>
Please tell me how to fix this issue.
This is how I open those models.
$scope.openAddNewEpisodeModal = function () {
$('#addNewEpisodeModal').modal('show');
};

Toggle <spans> selectivly

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)')