La création d'une édition modal dans Laravel 5

Je suis en train de créer une édition modal pour chaque ligne dans la base de données. Ma page ressemble à ceci.

Quand je clique sur l'icône d'édition, j'ai ouvert un modal où un utilisateur informations peuvent être modifiées. Le modal ressemble à ceci.

La création d'une édition modal dans Laravel 5

Le modal j'ai l'intention de montrer, c'est comme cela.

La création d'une édition modal dans Laravel 5

Mon view.php

<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<!-- <th></th> -->
<th>Username</th>
<th>Contact</th>
<th>Email</th>
<th>Role Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach ($data as $datas)
<tr>
<td>{{ $datas->username }}</td>
<td>{{ $datas->contact }}</td>
<td>{{ $datas->email }}</td>
<td>Role Type</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#edit-modal">
<i class="fa fa-edit"></I>
</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete-modal">
<i class="fa fa-trash"></i>
</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" align="center"><b>Edit User</b></h4>
</div>
<div class="modal-body">
<form role="form" action="/edit_user">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">User ID</label> 
<input type="text" class="form-control" name="user_id" placeholder="User ID" >
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label> 
<input type="text" class="form-control" name="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label> 
<input type="text" class="form-control" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact</label> 
<input type="text" class="form-control" name="contact" placeholder="Enter contact">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Change Password</label> 
<input type="password" class="form-control" name="change_password" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>

Comment puis-je obtenir le résultat souhaité?

Vous devez ajouter de la valeur modale d'entrée, tandis que d'ouvrir le modèle, vous pouvez obtenir une valeur et ajoutez modale des entrées VIA JS
Comment puis-je transmettre les valeurs? Quel est le format? @DsRaj
Vous aurez besoin de saisir les valeurs des cellules et remplir les champs appropriés lors de l'ouverture/affichage modal, en plus, vous devrez le réinitialiser à la fermeture de la modal
Avez-vous ajouté un code Javascript dans votre page?
Pourriez-vous me montrer une démonstration de la façon de saisir les valeurs dans les cellules. J'ai cherché sur le web pour un long moment, mais je n'arrive pas à obtenir ce dont j'ai besoin
Je n'ai pas de Javascript dans ma page. Je suis en utilisant le contrôleur pour obtenir les valeurs à partir de la base de données \
Vous avez à jouer avec un peu de code javascript pour faire ça.
sur votre <form> modal ajouter value attribut à votre <input>
stackoverflow.com/questions/1992142/html-modal-popup/...
Double Possible de Laravel 5.1 transmettre des données à partir de la vue modal

InformationsquelleAutor jptl431 | 2018-02-19

Quelque chose comme cela devrait suffire.

Note: je suppose que vous êtes en utilisant bootstrap 4 pour votre projet, bien que bootstrap 3 serait trop de travail, juste ruser un peu pour répondre à vos besoins

JS:

$(document).ready(function() {
/**
* for showing edit item popup
*/
$(document).on('click', "#edit-item", function() {
$(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.
var options = {
'backdrop': 'static'
};
$('#edit-modal').modal(options)
})
//on modal show
$('#edit-modal').on('show.bs.modal', function() {
var el = $(".edit-item-trigger-clicked"); //See how its usefull right here? 
var row = el.closest(".data-row");
//get the data
var id = el.data('item-id');
var name = row.children(".name").text();
var description = row.children(".description").text();
//fill the data in the input fields
$("#modal-input-id").val(id);
$("#modal-input-name").val(name);
$("#modal-input-description").val(description);
})
//on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$("#edit-form").trigger("reset");
})
})

HTML:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="main-container container-fluid">
<!-- heading -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h1 class="text-primary mr-auto">Example list</h1>
</div>
</div>
</div>
<!-- /heading -->
<!-- table -->
<table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
<thead class="thead-dark">
<tr>
<th>#</th>
<th> Name</th>
<th> Description</th>
<th> Action</th>
</tr>
</thead>
<tbody>
<tr class="data-row">
<td class="align-middle iteration">1</td>
<td class="align-middle name">Name 1</td>
<td class="align-middle word-break description">Description 1</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST" action="">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<div class="form-group">
<label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
<input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
</div>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /Attachment Modal -->

Suggestion

Je vous recommande d'inclure le formulaire dans un autre lame de vue, rendre avec toutes les données pertinentes, puis le retourner pour le contrôleur, puis l'afficher dans la modale.

A parfaitement fonctionné! Merci 🙂

InformationsquelleAutor Immortal Dude

Vous pouvez utiliser le code ci-dessous vient de passer le $les données à la vue et il se remplira.

@foreach ($data as $datas)   
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" align="center"><b>Edit User</b></h4>
</div>
<div class="modal-body">
<form role="form" action="/edit_user">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">User ID</label> 
<input type="text" class="form-control" name="user_id" placeholder="User ID" value="{{$datas->user_id}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label> 
<input type="text" class="form-control" name="username" placeholder="Enter username" value="{{$datas->username}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label> 
<input type="text" class="form-control" name="email" placeholder="Enter email" value="{{$datas->email}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact</label> 
<input type="text" class="form-control" name="contact" placeholder="Enter contact" value="{{$datas->contact}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Change Password</label> 
<input type="password" class="form-control" name="change_password" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div> 
@endforeach

Cela me donne modal pour toutes les lignes de la Table. Je veux que le modal pour chaque ligne. Des idées?
répétez le modal, à chaque fois, ce qui est une mauvaise idée
Je pense que vous êtes de ne pas obtenir ce que je dis juste appel ajax function(transmettre l'id de l'utilisateur) sur le bouton modifier et cliquez sur mettre le code dans un autre point de vue et sur le succès de la fonction il suffit d'appeler la vue, il ne sera pas répéter le modèle à chaque fois. vous comprenez ce que je veux dire?

InformationsquelleAutor Anil Kumar Sahu

Facile et simple méthode.

Simplement de veiller à ce que votre de données cible et id valeurs changent dynamiquement en ce qui concerne les lignes, dans ce cas, fixer le modal de la boîte de code dans la boucle qu'elle prend les valeurs dynamiquement.
Donc, depuis que vous êtes à l'aide de Laravel, vous pourriez faire ceci:

@foreach($rows as $row)
<a href="{{ route('rows.edit',$row->id) }}" data-toggle="modal" data-target="#myEditModal{{ $row->id }}" class=" text-info "><em class="fa fa-2x fa-edit mr-1"></em></a>
<div  id="myEditModal{{ $row->id }}" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
....
@endforeach

InformationsquelleAutor Ralphkay

Vous devez vous connecter pour publier un commentaire.