Dynamiczny formularz edycji danych

noVak

2016-05-04T17:29:51+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 31

0

Witam,
piszę stronę, jako zaliczenie na projekt do szkoły, mam problem, z którym nie wiem jak sobie poradzić, do pisania strony, obecnie wykorzystuje MVC, BOOSTRAP, SMARTY i JS.

Obecnie mój panel zarządzania kategoriami wygląda tak: user image

Chciałbym, żeby po kliknieciu w guzik edycja - zamiast nazwy kategorii pojawiło się pole typu input z wpisaną wartością, a zamiast Edycja znaczek V - w sensie ten ptaszek, potwierdzający edycje.

W czym to w ogóle napisać - JavaScript? Czy są może jakieś rozwiązania w html/php?? Dziękuje bardzo za udzielenie pomocy!

Tumeg

2016-05-04T19:40:53+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 687

1

W samym JS można zrobić szybciutko, a w jQuery jeszcze szybciej. Obadaj:
https://api.jquery.com/click/
http://api.jquery.com/append/
http://api.jquery.com/hide/
http://api.jquery.com/show/
http://api.jquery.com/val/

Wszystko zależy jak sobie to rozplanujesz, bo można te inputy np. dodać na starcie, a potem tylko ukrywać i pokazywać.

noVak

2016-05-05T17:13:35+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 31

0

Dzięki za materiały, bardzo pomocne. Tylko mam mały problem. W tej chwili wygląda u mnie to tak:

Kopiuj

<!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>&copy; 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: user image