Переглянути джерело

add delete button and fix bugs

Entony 7 роки тому
батько
коміт
8371754116
2 змінених файлів з 35 додано та 21 видалено
  1. 11 11
      index.html
  2. 24 10
      js/script.js

+ 11 - 11
index.html

@@ -31,28 +31,28 @@
 						<form id="form-edit-student">
 						<input type="hidden" name="id">
 							<div class="form-group">
-								<input type="text" name="firstname" placeholder="Firstname" class="form-control">
+								<input type="text" id="clear-form-edit" name="firstname" placeholder="Firstname" class="form-control">
 							</div>
 							<div class="form-group">
-								<input type="text" name="lastname" placeholder="Lastname" class="form-control">
+								<input type="text" id="clear-form-edit" name="lastname" placeholder="Lastname" class="form-control">
 							</div>
 							<div class="form-group">
-								<input type="email" name="email" placeholder="Email" class="form-control">
+								<input type="email" id="clear-form-edit" name="email" placeholder="Email" class="form-control">
 							</div>
 							<div class="form-group">
 								<input type="text" name="group_id" placeholder="Group ID" disabled class="form-control">
 							</div>
 							<div class="form-group">
-								<input type="text" name="gitlab" placeholder="GitLab" class="form-control">
+								<input type="text" id="clear-form-edit" name="gitlab" placeholder="GitLab" class="form-control">
 							</div>
 							<div class="form-group">
-								<textarea type="text" name="description" placeholder="Description" class="form-control"></textarea>
+								<textarea type="text" id="clear-form-edit" name="description" placeholder="Description" class="form-control"></textarea>
 							</div>
 						</form>
 					</div>
 					<div class="panel-footer">
 						<button type="submit" form="form-edit-student" class="btn btn-warning">Update</button>
-						<button class="btn btn-danger">Delete</button>
+						<button type="button" id="delete-student" class="btn btn-danger pull-right">Delete</button>
 					</div>
 				</div>
 			</div>
@@ -62,19 +62,19 @@
 					<div class="panel-body">
 						<form id="form-create-student">
 							<div class="form-group">
-								<input type="text" name="firstname" placeholder="Firstname" class="form-control">
+								<input type="text" id="clear-form-create" name="firstname" placeholder="Firstname" class="form-control">
 							</div>
 							<div class="form-group">
-								<input type="text" name="lastname" placeholder="Lastname" class="form-control">
+								<input type="text" id="clear-form-create" name="lastname" placeholder="Lastname" class="form-control">
 							</div>
 							<div class="form-group">
-								<input type="email" name="email" placeholder="Email" class="form-control">
+								<input type="email" id="clear-form-create" name="email" placeholder="Email" class="form-control">
 							</div>
 							<div class="form-group">
-								<input type="text" name="gitlab" placeholder="GitLab" class="form-control">
+								<input type="text" id="clear-form-create" name="gitlab" placeholder="GitLab" class="form-control">
 							</div>
 							<div class="form-group">
-								<textarea type="text" name="description" placeholder="Description" class="form-control"></textarea>
+								<textarea type="text" id="clear-form-create" name="description" placeholder="Description" class="form-control"></textarea>
 							</div>
 						</form>
 					</div>

+ 24 - 10
js/script.js

@@ -6,6 +6,7 @@ var $formEditStudent = $('#form-edit-student');
 var request = http.getStudents();
 var $formCreateStudent = $('#form-create-student');
 var $addField = $('#add-field').data('counter', 1);
+var $deleteStudent = $('#delete-student');
 
 request.done(function(response){
 	console.log(response);
@@ -26,13 +27,12 @@ $studentList.on('click', '[data-id]', function(event){
 	event.preventDefault();
 	var studentId = $(this).data('id');
 
-	$('.has-error', $formEditStudent).removeClass('has-error');
-	$('.has-error', $formCreateStudent).removeClass('has-error');
-	$formEditStudent.find('[id="extraField"]').remove();
+	$('.has-error', $formEditStudent).removeClass('has-error');     // удаление красной подсветки
+	$('.has-error', $formCreateStudent).removeClass('has-error');  // удаление красной подсветки
+	$formEditStudent.find('[id="extraField"]').remove();      // удаление доп. полей
 
 	http.getStudentsById(studentId)
 		.done(function(response) { 
-		console.log(response);
 
 		if (response.extraField) {
 			for(var key in response.extraField) {
@@ -55,7 +55,7 @@ $formEditStudent.on('submit', function(event){
 	event.preventDefault();
 	var that =this;
 
-	$('.has-error', this).removeClass('has-error');
+	$('.has-error', this).removeClass('has-error'); // удаление красной подсветки
 
 	var data = $(this).serialize(),
 		studentId = $(this).find('[name=id]').val();
@@ -86,8 +86,10 @@ $formCreateStudent.on('submit', function(event){
 	var that =this;
 
 	console.log(data);
-	
-	$('.has-error', this).removeClass('has-error');
+	$addField.data('counter', 1);         // обнулениие счетчика
+	$formCreateStudent.find('[id="extraField"]').remove();    // удаление доп. полей
+	$('.has-error', this).removeClass('has-error');       // удаление красной подсветки
+	$formCreateStudent.find('[id="clear-form-create"]').val('');    // очищение полей
 	
 	http.createStudent(data)
 		.done(function(response){
@@ -96,6 +98,7 @@ $formCreateStudent.on('submit', function(event){
 				.attr('data-id', response.id)
 				.addClass('list-group-item')
 				.appendTo($studentList);
+			console.log(response);
 		})
 		.fail(function(response){	
 			var errors = response.responseJSON.errors;
@@ -108,14 +111,25 @@ $formCreateStudent.on('submit', function(event){
 		})
 })
 
-$addField.on('click', function(event){
-	var counter = $addField.data('counter');
+$addField.on('click', function(event){      // кнопка добавить поле
+	var counter = $addField.data('counter');      // счетчик нажатий на кнопку
 	$addField.data('counter', counter + 1);
 
 	var $extraField = $('<div>').addClass('form-group').appendTo($formCreateStudent);;
 	var $extraFieldInput = $('<input>')
-								.attr({'type': 'text', 'name': 'extraField[' + counter + ']', 'placeholder': 'field' + counter})
+								.attr({'type': 'text', 'name': 'extraField[' + counter + ']', 'placeholder': 'field' + counter, 'id': 'extraField'})
 								.addClass('form-control')
 								.appendTo($extraField);
+	console.log(counter);
+
+})
 
+$deleteStudent.on('click', function(){                    // кнопка удалить 
+	var studentId = $(this).parent().parent().find('[name="id"]').val();    //ищем кого удалить 
+	http.deleteStudent(studentId)
+		.done(function(response){
+			$studentList.find('[data-id="' + studentId + '"]').remove();
+			$formEditStudent.find('[id="extraField"]').remove();    // удаление доп. полей
+			$formEditStudent.find('[id="clear-form-edit"]').val('');    // очищение полей
+		})
 })