Bonjour,

J'ai un problème pour charger une collection (pour utiliser ensuite le fameux jquery du tuto) dans une modal AJAX, et j'espère trouver quelques âmes charitables...snif...

Le contexte :

J'ai un tableau sur ma vue twig (en dataTable) qui liste mes occurences, chargé en AJAX/JSON.

J'utilise une même modal pour les actions INSERT/UPDATE/DELETE : Quand click sur une ligne du tableau, la modal s'ouvre avec le formulaire et les valeurs chargées en AJAX. Dans cette modal, il y'a le lien de suppression de la ligne (avec une modal "êtes vous sûr"). En cas d'INSERT, rien n'est chargé. Cool. Tout fonctionne parfaitement.

Sauf..... que j'ai une collection (codetvalgs) dans mon formulaire (codetva) et je n'arrive pas à charger les éléments de cette collection en AJAX dans la modal.

Cela fonctionne dans le cas de l'insert (puisque rien à charger), mais ma collection reste désespérément vide dans la modal pour un UPDATE/DELETE.

En fait le but serait de déclencher la 1ère partie du code du prototype, celui qui charge les éléments à l'ouverture de la page (sauf que là cela doit être chargé en AJAX, sur click sur une ligne du tableau).

Les 2 classes : codetva onetomany codetvalg

class codetva
{
    /**
     * @var int
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;

(...)
	/**
	* @ORM\OneToMany(targetEntity="App360Bundle\Entity\codetvalg", mappedBy="codetva", orphanRemoval=true, cascade={"all"})
	*/
	private $codetvalgs;

class codetvalg
{
    /**
     * @var int
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;

	/**
	* @ORM\ManyToOne(targetEntity="App360Bundle\Entity\codetva", inversedBy="codetvalgs")
	*/
	private $codetva;

(...)

Le controller :

class codetvaController extends Controller
{
	/////////////////////
	// Page principale //
	/////////////////////
    public function editAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();

		$entite=new codetva();
        $formligne = $this->createForm('AdminBundle\Form\codetvaType', $entite);

        return $this->render('AdminBundle:codetva:edit.html.twig', array(
            'formligne' => $formligne->createView(),
            'entite' => $entite,
        ));
	}

	///////////////////////////////////////////
	// modification et Insertion d'une ligne //
	///////////////////////////////////////////
	public function modifligneAction(Request $request)
	{
        $em = $this->getDoctrine()->getManager();
		
		if($_POST['lignemid']==0){// nouvelle ligne
			$entite=new codetva();
			$form = $this->createForm('AdminBundle\Form\codetvaType', $entite);
			$form->handleRequest($request);

			if ($request->isXmlHttpRequest()){

				//quicree
				$user = $this->container->get('security.context')->getToken()->getUser();
				$entite->setQuicree($user);

				$em->persist($entite);
				$em->flush();
			}

		}
		else{// modif
			$entite = $em->getRepository('App360Bundle:codetva')->find($_POST['lignemid']);
			$form = $this->createForm('AdminBundle\Form\codetvaType', $entite);
			$form->handleRequest($request);

			if ($request->isXmlHttpRequest()){

				//quimodif
				$user = $this->container->get('security.context')->getToken()->getUser();
				$entite->setQuimodif($user);

				$em->flush();
			}
		}

		$response = new JsonResponse();
		return $response->setData(array('reponse'=>'OK','identite'=>$entite->getId()));
	}

	/////////////////////////////
	// suppression d'une ligne //
	/////////////////////////////
	public function supligneAction($ligne=0)
	{
        $em = $this->getDoctrine()->getManager();
		$entite=$em->getRepository('App360Bundle:codetva')->find($ligne);
		$em->remove($entite);
        $em->flush();
		
		$response = new JsonResponse();
		return $response->setData(array(
			'reponse'=>'OK',
		));
	}

	// Toutes les lignes
	public function lignesAction()
	{
        $em = $this->getDoctrine()->getManager();
		$lignes = $em->getRepository('App360Bundle:codetva')->findAll();

		$serializer = $this->get('serializer');
		$json=$serializer->serialize($lignes,'json');
		return new Response($json);
	}

	// information d'une ligne
	public function infoligneAction($ligne=0)
	{
        $em = $this->getDoctrine()->getManager();
		$entite=$em->getRepository('App360Bundle:codetva')->find($ligne);

		$serializer = $this->get('serializer');
		$json=$serializer->serialize($entite,'json');
		return new Response($json);
	}

Bouts de code la vue

{% form_theme formligne _self %}

{% block _codetva_codetvalgs_widget %}
{% spaceless %}
        {% if prototype is defined %}
            {% set attr = attr|merge({'data-prototype': block('_codetva_codetvalgs_item_widget') }) %}
        {% endif %}
		<div class="table-responsive">
			<table {{ block('widget_container_attributes') }} class="table table-xxs">
				<thead>
				<tr class="entete">
					<td>Taux</td>
					<td>Date de début</td>
				</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<a href="#" id="add_codetvalgs"><i class="icon-plus3"></i></a>
		</div>
{% endspaceless %}
{% endblock %}
{% block _codetva_codetvalgs_item_widget %}
{% spaceless %}
	<tr class="ligne">
		<td>
			{{ form_widget(prototype.taux, {'attr': {'class': 'form-control'}})}}
			{{ form_errors(prototype.taux) }}
		</td>
		<td>
			{{ form_widget(prototype.datedebut, {'attr': {'class': 'form-control'}})}}
			{{ form_errors(prototype.datedebut) }}
		</td>
	</tr>
{% endspaceless %}
{% endblock  %}




	<div class="col-md-12">
		<a href="#" id="insligne" data-toggle="modal" data-target="#modifligne" >+</a></li>
		<div class="panel panel-flat">

			<table id="tableindex" class="table datatable-button-html5-basic datatable-responsive table-hover">
				<thead>
					<tr>
						<th class="col-md-1">ID</th>
						<th class="col-md-2">Code</th>
						<th class="col-md-4">Désignation</th>
					</tr>
				</thead>
				<tbody id="tlignes">
				</tbody>
			</table>
		</div>
	</div>

	<!-- modal modifier une ligne -->
	{{ form_start(formligne, {'attr': {'class': 'form-horizontal'}}) }}
	{{ form_errors(formligne) }}
	<input type="hidden" name="lignemid" id="lignemid" class="form-control" />
	<div id="modifligne" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h5 class="modal-title">Modifier une ligne</h5>
				</div>
				<div class="modal-body">
					{{ form_widget(formligne) }}
				</div>
				<div class="modal-footer">
					<a href="#" id="liensupligne" class="btn btn-danger" >Supprimer</a>
					<button type="submit" class="btn btn-primary" >Valider</button>
				</div>
			</div>
		</div>
	</div>
	{{ form_widget(formligne) }}
	{{ form_rest(formligne) }}
	{{ form_end(formligne) }}
	<!-- fin modal modifier une ligne -->

	<!-- modal suppression ligne -->
	<div id="supligne" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h5 class="modal-title">Suppression d'une ligne</h5>
				</div>
				<div class="modal-body">
					Supprimer cette ligne ?
				</div>
				<div class="modal-footer">
					<a type="button" id="vsupligne" class="btn btn-primary" data-dismiss="modal">Oui</a>
				</div>
			</div>
		</div>
	</div>
	<!-- fin modal suppression ligne -->


<script type="text/javascript">
$(document).ready(function() {

	// click sur une ligne du tableau
	lignecourante=0;
	crud='';
	$('#tableindex tbody').on('click', 'tr', function () {
		crud='U';
		var tableindex = $('#tableindex').DataTable();
        var data = tableindex.row( this ).data();
		datarowcur=$(this);
		lignecourante=data[0];
		infosligne(lignecourante);
		$('#modifligne').modal('show');
    } );

	// Ajax : aller chercher les infos d'une ligne pour alimenter la modal de modification d'une ligne
	function infosligne(ligne_id){
		$('#lignemid').val(ligne_id);
		if(ligne_id==0){//nouvelle ligne
			//remise à vide du formulaire
			$("form[name='codetva']").find("input[type=text], textarea").val("");
		}else{
			$.ajax({
				url: "{{ path('Admin_codetva_infosligne') }}"+'/'+ligne_id,
				success: function(data) {
					montab=JSON.parse(data);
					$('#codetva_code').val(montab.code);
					$('#codetva_designation').val(montab.designation);

				}
			});
		}
	}

	// click sur le lien de suppression
	$("#liensupligne").on('click',function(e){
		crud='D';
		e.preventDefault();
		$('#modifligne').modal('hide');
		$('#supligne').modal('show');
	});

	// les lignes
	function html_lignes(){
		$.ajax({
			type:'get',
			url: "{{ path('Admin_codetva_lignes') }}",
			success: function(data) {
				$("#tlignes").empty();
				montab=JSON.parse(data);
				var tableindex = $('#tableindex').DataTable();
				$.each( montab, function( key, value ) {
					//ligne
					tableindex.row.add( [value.id,value.code,value.designation] ).draw();
				});
				return 1;
			}
		});
	}
	html_lignes();

	// quand on veut insérer une ligne
	$('#insligne').on('click',function(e){
		crud='I';
		infosligne(0);
	});

	// envoi du formulaire Modifier ou ajouter une ligne
	$("form[name='codetva']").on('submit',function(e){
		$('#modifligne').modal('hide');
		e.preventDefault();
		$.ajax({
			type:'post',
			url: "{{ path('Admin_codetva_modifligne') }}",
			data: new FormData(this),
			dataType: 'json',
			contentType: false,
			processData: false,
			success: function(data) {
				lignecourante=data.identite;
				var tableindex = $('#tableindex').DataTable();
				$.ajax({
					url: "{{ path('Admin_codetva_infosligne') }}"+'/'+lignecourante,
					success: function(data) {
						montab=JSON.parse(data);
						dataligne=[montab.id,montab.code,montab.designation];
						// modification
						if(crud=='U'){
							tableindex.row(datarowcur).data(dataligne).draw();
						}
						if(crud=='I'){
							tableindex.row.add(dataligne).draw();
						}
					}
				});
			}
		});
	});

	// suppression d'une ligne
	$('#vsupligne').on('click',function(e){
		e.preventDefault();
		$('#supligne').modal('hide');
		$.ajax({
			url: "{{ path('Admin_codetva_supligne') }}" + "/" + lignecourante,
			success: function(data) {
				datarowcur.remove();
			}
		});
	});


...... le JQUERY du tuto pour gérer la collection....

Le seul problème que j'ai est donc de charger dynamiquement les éléments de la collection codetvalgs dans mon formulaire, vu que j'utilise le même chargé en AJAX afin d'éviter d'en envoyer autant qu'il y'a de lignes dans mon tableau principal.

-
Edité par CorstyreneInfo 24 janvier 2017 à 17:46:15

Bonjour à tous,

Devant le pavé du dessus, j'imagine bien que cela en a refroidit plus d'un

Donc je reformule par une question simple :

Comment faire pour déclencher le Jquery des collections du tuto quand le formulaire a été envoyé en ajax ?

Merci si quelqu'un peut m'aider.