We Keep Coding

Modal window for several products

I have a problem. I need to make a modal window for each product, but in the modal window, all products only display the last product. I tried to assign id identifiers, but then only the modal window of the first product works.
window.onload = function() {
$('.img-for-modal').click(function() {
$('.modal').css('display', 'block');
});
$('.close').click(function() {
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>

I suggest you change to this which will show the nearest modal and close the nearest modal. Your current code selects all items with class modal
Note I use jQuery $(function() { ... }); instead of window.onload = function() { ... }
$(function() {
$('.img-for-modal').click(function() {
$(this).next(".modal").show();
});
$('.close').click(function() {
$(this).closest(".modal").hide();
});
});
.modal { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>

Because you are selecting all the modals on the page and showing them all.
$('.modal').css('display', 'block');
You are not selecting the modal that corresponds with what you picked. In your case the modal is beside the image so grab the next element and display it.
$(this).next('.modal').css('display', 'block');
Other option people tend to do is data attributes and ids. You add a data attribute that has the id of the item you want to show. So you read the attribute, and than show that item.
<img class="img-for-modal" src="media/products-image/1.jpg" data-toggles="#modal1">
<div class="modal" id="modal1">
and than the JavaScript would look at the attribute
var selector = $(this).data("toggles")
$(selector).css('display', 'block');

If you are in need of your modals to display dynamic content, and you are not using a framework like Angular or React to update the components for you - then you will want to use a dedicated modal library. This will help you manage multiple modal instances, as well as all of your display bindings.
I have used Bootbox.js in the past for this purpose - if you are using Bootstrap, check it out. If you are not using Bootstrap, there are other plugins that will help you accomplish the same task.
The trouble with modals is that by design there can only be a single instance at any one time (think Singleton). So each time you call it, you are calling the same instance. So...if you try to populate multiple instances - it wont happen. Only or last data set will be applied.
The problem with using
http://bootboxjs.com/

Edit items by clicking a button. Angular.js

I currently have a directive to dynamically edit a field. I have in the header of the accordion a field to edit and another field in the content of the accordion. If I click the edit button, the fields in the respective row can be edited, and this works fine. My problem is when I save or when I cancel it (when I click on the save or cancel button) immediately disappears the text field of both the header and the contents of the header. I need the text field ONLY disappear for the item in which I am going to save or cancel. When you click on the edit button, the 2 text fields should appear in both the header and the content (this works). And when clicking save or cancel, the text field in the selected element should disappear / appear.
<div ng-controller="AccordionDemoCtrl">
<uib-accordion close-others="true">
<div ng-repeat="faq in faqs">
<div class="col-sm-11" >
<div uib-accordion-group class="panel-default" is-open="faq.open">
<uib-accordion-heading >
<span ng-click="ignoreClick($event);" ><a href='' click-to-edit edit-state='faq.editState' ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i>
</uib-accordion-heading>
<span click-to-edit edit-state='faq.editState' ng-model="faq.respuesta" >{{faq.respuesta}}</span>
</div>
</div>
<div class="col-sm-1" >
<button type="button" ng-click="toggleEditState($index)" class="btn btn-default">
<span class="glyphicon glyphicon glyphicon-edit"></span>
</button>
</div>
</div>
</uib-accordion>
</div>
https://plnkr.co/edit/S4OllJV64EYFNo6WIjVH?p=preview

use one-way (one-directional) binding for editState
scope: {
model: '=ngModel',
editState: '<'
},
https://plnkr.co/edit/dNehOxAIRHsRqgK9wXJx?p=preview

I believe you'll need to manage two separate booleans at the controller level so one directive doesn't overwrite the status of the other and then you have to set both booleans with your open button. I kept the master state so your glyph button will open or close both and the save/cancel should operate independently of each other.
$scope.editState = false;
$scope.editHeader = false;
$scope.editBody = false;
$scope.toggleEditState = function(index, val) {
debugger;
$scope.editState = !$scope.editState;
$scope.faqs[index].editHeader = $scope.editState;
$scope.faqs[index].editBody = $scope.editState;
}
<div ng-repeat="faq in faqs">
<div class="col-sm-11" >
<div uib-accordion-group class="panel-default" is-open="faq.open">
<uib-accordion-heading >
<span ng-click="ignoreClick($event);" ><a href='' click-to-edit edit-state='faq.editHeader' ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i>
</uib-accordion-heading>
<span click-to-edit edit-state='faq.editBody' ng-model="faq.respuesta" >{{faq.respuesta}}</span>
</div>
</div>
<div class="col-sm-1" >
<button type="button" ng-click="toggleEditState($index)" class="btn btn-default">
<span class="glyphicon glyphicon glyphicon-edit"></span>
</button>
</div>
https://plnkr.co/edit/91cGWoTKyJsZQKxYapiT?p=preview
You could also communicate the master status with the directives if you wanted their input fields to open and close both.

Bootstrap tooltip does not allow table rows to be clicked

On my page, I have clickable table rows that open a specific link. This functionality has worked just as planned, that is, until I tried converting the traditional tooltips into Bootstrap ones. Now, I can't seem to get the clickable functionality back (even though the tooltips work normally).
HTML:
<tr class="activity" data-href="./activity/13" data-container="body" data-toggle="tooltip" data-placement="auto left" title="Click on a row to view the activity">
<td style="vertical-align:middle;text-align:center"><b>1</b></td>
<td>
Attended seminar!<br /><div style="text-align:right"><i class="fa fa-lock fa-fw" style="color:rgb(217,83,79)" data-container="body" data-toggle="tooltip" data-placement="auto bottom" title="Locked for editing"></i></div>
</td>
<td style="vertical-align:middle;color:rgb(217,83,79);font-weight:bold;text-align:right">1</td>
</tr>
JavaScript:
<script type="text/javascript">
$(document).ready(function($) {
$(".activity").click(function() {
window.document.location = $(this).data("href");
});
});
$("[data-toggle=tooltip]").tooltip();
</script>

Solved, for whatever reason I needed to remove the $(document).ready() part of the JavaScript code:
<script type="text/javascript">
$(".activity").click(function() {
window.document.location = $(this).data("href");
});
$("[data-toggle=tooltip]").tooltip();
</script>
More details as to why this solved the issue would be appreciated!

Changing link href and triggering it with Javascript when its child (span) is clicked

I am using Pjax my mvc application like below
$(document).pjax('a', '#pjaxContainer');
I have a kendo grid that has a custom command which will open details page of the row entry
command.Custom("Details").Text("<i class='fa fa-pencil'></i>").Click("ProductDetailView")); });
and it looks like this
javascript funcion :
function ProductDetailView(e)
{
var dataItem = this.dataItem($(e.target).closest("tr"));
var PK = dataItem.PKProduct;
e.target.href = "/Product/Details/" + PK;
}
the problem is when I click the link EXACTLY on the pencil icon it only adds # to url and nothing happens, but when I click green space it works correctly.
I need to somehow trigger pjax request on click of the link.
and this is the rendered HTML of table row
<tr data-uid="c3ddb2d3-5847-4cf7-b892-e2ce49d1db38" role="row">
<td role="gridcell">
<a class="k-button k-button-icontext k-grid-Details Maintenance" href="#">
<span class=" "></span>
<i class="fa fa-pencil"></i>
</a>
</td>
<td role="gridcell">2</td>
<td role="gridcell">Brandie</td>
<td role="gridcell">3</td><td role="gridcell">British Product</td>
<td data-value-primitive="True" role="gridcell"></td><td role="gridcell">No</td>
</tr>

I didn't find exact solution for this, but I found another way to do it.
Instead of using Custom command I used column template as below:
Columns.Template(x => { }).ClientTemplate(
"<a class='k-button' href='" +
Url.Action("Details", "Product") +
"?id=#= PKProduct #'" +
"><i class='fa fa-pencil'></i></a>"
).Hidden(false).Width(100);
and it worked like a charm.

Show/Hide H4's isn't working

I am having an issue trying to show/hide some h4s. The goal is to click an information li link and show the corresponding h4's text in the next table over (one at a time), but this is not working.
I have tried using .css("display","none/block"), .style("display","none/block"), and a few others in my JQuery.
JSFiddle Demo
The li links code
<table>
<tr>
<th><h2>Quick Facts</h2></th>
</tr>
<tr>
<th>
<ul style="font-size:15px">
<li id="_Join">How to join</li>
<li id="_Who">Who we are</li>
<li id="_Officers">Officers</li>
<li id="_Other1">Other</li>
<li id="_Other2">Other</li>
<li id="_Other3">Other</li>
</ul>
</th>
</tr>
</table>
The h4 text I want to display
<table style="word-wrap: break-word">
<tr>
<th>
<h4 class="informational" id="Join">How to join</h4>
<h4 class="informational" id="Who">Who</h4>
<h4 class="informational" id="Officers">Officers</h4>
<h4 class="informational" id="Other1">Other1</h4>
<h4 class="informational" id="Other2">Other2</h4>
<h4 class="informational" id="Other3">Other3</h4>
</th>
</tr>
</table>
The JQuery
$(document).ready(function () {
$('.informational').hide();
});
$('[id^=_]').click(function () {
$('.informational').hide();
var naming = $(this).attr('id').replace('_', '');
alert("selected ID is: " + naming);
document.getElementById(naming).show();
});
Any help appreciated!
P.S. If there is a better way of doing this please let me know. Thanks!
Using Bootstrap 3 / MVC 5

Replace document.getElementById(naming).show(); with $('#'+naming).show();.
.show() is a jQuery function and you're attempting to use it on a DOM node.
jsFiddle example

Try this, replace document.getElementById(naming).show(); with document.getElementById("naming").style.display = "none";