Dzięki za materiały, bardzo pomocne. Tylko mam mały problem. W tej chwili wygląda u mnie to tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>EsCapE_teaM</title>
<!-- Bootstrap -->
<link href="http://localhost/boid/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/boid/css/cookie.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!-- Custom styles for this template -->
<link href="http://localhost/boid/css/starter-template.css" rel="stylesheet">
<link rel="stylesheet" href="http://localhost/boid/css/jquery-ui.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost/boid/Products">-E T-</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<form class="navbar-form navbar-center" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Wyszukaj produkt...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://localhost/boid/Products/showcat/">Lista produktów</a></li>
<li><a href="http://localhost/boid/Access/admin/promanager/">Panel Administratora</a></li>
<li><a href="http://localhost/boid/Access/settings"> <span class="glyphicon glyphicon-user"></span> Administrator</a></li>
<li><a href="http://localhost/boid/Access/logout">Wyloguj</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="panel-heading" style="text-align: center;" >
<br />
<h3> <font color="red"> Panel administratora </font> </h3> </div>
<ul class="nav nav-tabs ">
<li role="presentation" class="active"><a href="http://localhost/boid/Access/admin/promanager/">Menadżer produktów</a></li>
<li role="presentation"><a href="http://localhost/boid/Access/admin/employees/">Pracownicy</a></li>
<li role="presentation"><a href="http://localhost/boid/Access/admin/statistic/">Statystyki</a></li>
<li role="presentation"><a href="http://localhost/boid/Access/admin/free/">Wolna zakładka</a></li>
</ul>
<div class="container">
<div style="padding-top:25px"></div>
<div class="page-header">
<h1>Lista kategorii</h1>
</div>
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<span class="name-edit" id="name1" value="pieczywo">PIECZYWO</span>
<span class="input-edit"><input type="text" name="categoryname" id="input1" /></span>
<div class="btn-group btn-group-xs pull-right" role="group" aria-label="...">
<a type="button" id="1" class="btn btn-info" class="test"> Edycja </a>
<span class="ok-edit">
<a type="button" class="btn btn-info">
<span class="glyphicon glyphicon-ok"></span></a>
</span>
<a type="button" class="btn btn-success" href="http://localhost/boid/Products/showcat/1">
pokaż produkty <span class="badge">2</span>
</a>
<a type="button" class="btn btn-danger" href="http://localhost/boid/Categories/delete/1">usuń</a> </div>
</li>
<li class="list-group-item">
<span class="name-edit" id="name2" value="chemia">CHEMIA</span>
<span class="input-edit"><input type="text" name="categoryname" id="input2" /></span>
<div class="btn-group btn-group-xs pull-right" role="group" aria-label="...">
<a type="button" id="2" class="btn btn-info" class="test"> Edycja </a>
<span class="ok-edit">
<a type="button" class="btn btn-info">
<span class="glyphicon glyphicon-ok"></span></a>
</span>
<a type="button" class="btn btn-success" href="http://localhost/boid/Products/showcat/2">
pokaż produkty <span class="badge">2</span>
</a>
<a type="button" class="btn btn-danger" href="http://localhost/boid/Categories/delete/2">usuń</a> </div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<span class="name-edit" id="name4" value="wędliny">WĘDLINY</span>
<span class="input-edit"><input type="text" name="categoryname" id="input4" /></span>
<div class="btn-group btn-group-xs pull-right" role="group" aria-label="...">
<a type="button" id="4" class="btn btn-info" class="test"> Edycja </a>
<span class="ok-edit">
<a type="button" class="btn btn-info">
<span class="glyphicon glyphicon-ok"></span></a>
</span>
<a type="button" class="btn btn-success" href="http://localhost/boid/Products/showcat/4">
pokaż produkty <span class="badge">2</span>
</a>
<a type="button" class="btn btn-danger" href="http://localhost/boid/Categories/delete/4">usuń</a> </div>
</li>
<li class="list-group-item">
<span class="name-edit" id="name5" value="mięso">MIĘSO</span>
<span class="input-edit"><input type="text" name="categoryname" id="input5" /></span>
<div class="btn-group btn-group-xs pull-right" role="group" aria-label="...">
<a type="button" id="5" class="btn btn-info" class="test"> Edycja </a>
<span class="ok-edit">
<a type="button" class="btn btn-info">
<span class="glyphicon glyphicon-ok"></span></a>
</span>
<a type="button" class="btn btn-success" href="http://localhost/boid/Products/showcat/5">
pokaż produkty <span class="badge">2</span>
</a>
<a type="button" class="btn btn-danger" href="http://localhost/boid/Categories/delete/5">usuń</a> </div>
</li>
</ul>
</div>
</div>
<a type="button" class="btn btn-default" href="http://localhost/boid/Categories/add">Dodaj kategorię</a>
</div>
</div>
</div>
<script>
$("span.input-edit").hide();
$("span.ok-edit").hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
var id = $(this).attr('id');
var value = $( "#name" +id).text();
$('#input'+id).val(value);
$("span.name-edit").hide();
$("span.input-edit").show();
$("span.ok-edit").show();
});
</script>
<div class="container">
<!-- Site footer -->
<footer class="footer">
<p>© EsCapE_teaM 2016</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://localhost/boid/js/jquery.min.js"></script>
<script src="http://localhost/boid/js/bootstrap.min.js"></script>
<script src="http://localhost/boid/js/jquery.cookie.js"></script>
<script src="http://localhost/boid/js/jquery.validate.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</body>
</html>
Problem polega na tym, że: jeżeli kliknę edytuj to znikają wszystkie pola SPAN class=name-edit i w ich miejsce pojawiają się SPAN class=input-edit, z tym, że chciałbym, że np. klikam Edytuj przy pieczywie - to zmienia się tylko przy pieczywie a nie wszędzie. Nie wiem również dlaczego, ten button z znakiem OK wyrzuca mi poza
, pomimo, iż jest dany po edytuj, lecz jest ukryty. Problemem jest dla mnie też to, iż guziki Pokaz produkty i usun straciły funkcionalność, tzn działają w tej chwilii jak edytuj, jeżeli kliknę na któryś z guzików on znika wraz z opisami na początku i pojawiają się inputy - wyglada to teraz tak:
. Miałby ktoś pomysł jak to rozwiązać?</p>