关于Symfony的Fullcalendar，通过模态添加/修改事件，并将Json文件发送回数据库

Question

I am working on a project with Symfony 2.8. My main goal is to create a dynamic calendar based on Fullcalendar library.

I add my events called "dispos" (avalabilities in English) and "Rdvs" (appointments" in English) through a Json request and ajax. This works fine.

Now, I would like to transform availabilites into appointements (which are both considered as events in Fullcalendar).

Eg : When someone clicks on one availability a modal shows up, then the person fills the form in it and clicks "save" button. When the "save" button is clicked, all informations entered in the form are sent and saved (through a Json request) into my Database and the appointment is taken --> all events of the current should be reloaded through ajax, the event should be displayed with the title of the event entered (name of the patient) and the modal should contain all informations given/wrote before "save" action.

I tried to do it but my ajax is not working since events do not reload after saving everything else is working.

Anyway, I think I did it wrong somewhere. The code I will show you in my Controller returns a view because I didn't manage to return a response (+ I think routing or something is bad but don't know how to fix it...)

Any clue or advice woud be really appreciated :)

So here is my code :

1. TakeRdvAction in my controller :

   /* ----------------- / / --- TAKE RDV ---- / / ----------------- */

    public function takeRdvAction(){ $request = $this->get('request_stack')->getCurrentRequest(); parse_str($request->getContent(), $myArray); /*$request->isXmlHttpRequest()*/ if (1) { $dateHeureDispo=$myArray['heureDispo']; $dateDispo= new \\DateTime($dateHeureDispo); $heureDispo = $dateDispo->format('H:i'); $dateDispo=$dateDispo->format('dm-Y'); $civilite=$myArray['civilite']; $nom=$myArray['inputNom']; $prenom=$myArray['inputPrenom']; $naissance=$myArray['birth']; $email=$myArray['email']; $tel=$myArray['tel']; $telFixe=$myArray['telFixe']; $adresse=$myArray['adresse']; $cp=$myArray['cp']; $ville=$myArray['ville']; $pays=$myArray['pays']; $medecin_traitant=$myArray['medecin_traitant']; $ame=$myArray['ame']; $cmu=$myArray['cmu']; $takeRDv="http://connect.mysite.com/nameofapi2/takeappt?center=13&motive=238&prenom=".urlencode($prenom)."&nom=".urlencode($nom)."&email=".urlencode($email)."&birthdate=".$naissance."&address=".urlencode($adresse)."&cp=".$cp."&city=".urlencode($ville)."&country=".urlencode($pays)."&tel=".$tel."&titre=1&source=1&origine=1&daterdv=".$dateDispo."&time=".$heureDispo."&slot=1%E1%90%A7&civilite=".$civilite."&origin=smwh&referer=1"; $streamContext = stream_context_create([ 'ssl' => [ 'verify_peer' => false, 'verify_peer_name' => false ] ]); $json = file_get_contents($takeRDv, false, $streamContext); $response = new jsonResponse(); $response->setContent($json); return $this->indexAction(); } else { return new response("Ajax request failed"); } 

   }

If I put if ($request->isXmlHttpRequest()), the controller goes directly to "else" end returns "Ajax request failed"

2. Ajax.js file (It's the last ajax function we are talking about):

    $(document).ready(function () { /* TakeRdvs */ $("#monBouton").click(function(){ if (nom.value != "" && prenom.value != "" && email.value != "") { $.ajax({ url: "{{ path('takeRdv') }}", method: 'POST', data: {}, success: function(data) { $("#calendarModal").modal('hide'); $("#calendarModal").on('hidden.bs.modal', function (e) { $('#calendar').fullCalendar('refetchEvents'); }); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert('Error: ' + errorThrown); } }); } else if (nom.value == "") { alert('Veuillez renseigner le Nom'); return false; } else if (prenom.value == "") { alert('Veuillez renseigner le prénom'); return false; } else if (email.value == "") { alert("Veuillez renseigner l'adresse mail"); return false; } }); 

   });

Other ajax functions work just fine, I made them after trying to take an appointment on an availability. When I implemented FosJsRouting, I thought it would be easier to try to make my takeRdvs action work. But the truth is, I don't know how to do it since it's a different action from the others and I am lost now :'(

3. My modal showing up when a event is clicked (got cut in several part sorry could not fix it):

   × close

     <div class="form-group"> <div class="col-sm-12"> <h4 id="modalTitle" class="modal-title modify"></h4> </div> </div> <div class="col-sm-4 form-group"> <label for="motif"> Motif de la consultation : </label> <select class="form-control" id="motif" data-placeholder="Choisissez un motif" style="width: 100%;" name="motif"> {# multiple data-max-options="1" #} <option value="238"> Bilan de la vue</option> <option value="Visite de controle"> Visite de contrôle</option> <option value="Chirurgie réfractive"> Chirurgie réfractive</option> <option value="Rééducation visuelle"> Rééducation visuelle</option> <option value="Urgences"> Urgences</option> </select> </div> <div class="form-group create"> <div class="col-sm-2"> <label class="control-label" for="civilite">Civilité</label> <select class="custom-select" id="civilite" name="civilite"> <option value="Mme">Mme</option> <option value="M">M.</option> </select> </div> <div class="col-sm-5"> <label class="control-label" for="inputNom">Nom</label> <input name="inputNom" type="text" class="form-control" id="inputNom" placeholder="Doe" required > </div> </div> <div class="form-group"> <div class="col-sm-5 create"> <label class="control-label" for="inputPrenom">Prénom</label> <input name="inputPrenom" type="text" class="form-control" id="inputPrenom" placeholder="Jane" required > </div> </div> <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="email">Email</label> <input name="email" type="email" class="form-control" id="email" placeholder="jane.doe@example.com" required > </div> </div> {# fin de la condition #} <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="naissance">Date de naissance</label> <input name="birth" type="text" class="form-control" id="naissance" placeholder="01-01-2001" required> </div> <div class="col-sm-6"> <label class="control-label" for="tel">Mobile</label> <input name="tel" type="tel" class="form-control" id="tel" placeholder="0607080910" required> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="telFixe">Téléphone fixe</label> <input name="telFixe" type="tel" class="form-control" id="telFixe" placeholder="0101010101"> </div> </div> <div class="form-group"> <div class="col-sm-5"> <label class="control-label" for="adresse">Adresse</label> <input name="adresse" type="text" class="form-control" id="adresse" placeholder="1 Bd de Strasbourg 83000 Toulon" required> </div> </div> <div class="form-group"> <div class="col-sm-3"> <label class="control-label" for="cp">Code postal</label> <input name="cp" type="text" class="form-control" id="cp" placeholder="83000" required> </div> </div> <div class="form-group"> <div class="form-group"> <div class="col-sm-4"> <label class="control-label" for="ville">Ville</label> <input name="ville" type="text" class="form-control" id="ville" placeholder="Toulon" required> </div> </div> </div> <div class="form-group"> <div class="form-group"> <div class="col-sm-4"> <label class="control-label" for="pays">Pays</label> <input name="pays" type="text" class="form-control" id="pays" placeholder="France" required> </div> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="medecin_traitant">Médecin traitant</label> <input name="medecin_traitant" type="text" class="form-control" id="medecin_traitant" placeholder="Dr Bicharzon" required> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="ame"> Bénéficiare de l'AME ? </label> <select class="form-control" name="ame" title="ame" id="ame" required> <option value="oui">Oui</option> <option value="non">Non</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="cmu"> Bénéficiare de la CMU ? </label> <select class="form-control" name="cmu" title="cmu" id="cmu" required> <option value="oui">Oui</option> <option value="non">Non</option> </select> </div> </div> <input title="heureDispo" class="visually-hidden form-control" name="heureDispo" type="text" id="heureDispo"> <div class="form-group boutonsModale col-sm-6"> <button type="button" class="btn btn-default btn-danger" data-dismiss="modal">Annuler</button> <button type="submit" class="btn btn-primary" id="monBouton">Enregistrer</button> </div> </form> </div> {#{% endfor %}#} <div class="modal-footer paddingTop"> {#<button type="button" class="btn btn-default btn-danger" data-dismiss="modal">Annuler</button>#} {#<input type="submit" class="btn btn-primary">Enregistrer</input>#} {#<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>#} </div> </div> </div> </div> </div> 

4. Routing.yml :

   Take RDV

   take_rdv: path: /prise-rdv defaults: {_controller: RdvProBundle:Default:takeRdv} methods: [POST] options: expose: true

I don't know how to change the route if I need to... + I would like the route no to show like the other routes I created but as it's coded now, it's shown...

I am junior junior as dev so I a sorry if my code is not clean :s Thank you in advance for all the help you will provide.

Answer 1

It is huge. I'm not sure about your problem(s?) but if I understand :

First problem :

ajax is not working since events do not reload

If your #button is replaced in your page after your first call, the attached event is destroyed. Change your listener :

$("#monBouton").click(function(){

by

$('body').on('click', '#monBouton', function () { will solve the problem.

Second problem :

If I put if ($request->isXmlHttpRequest()), the controller goes directly to "else"

I suggest to pass $request as argument of your action and just put your condition within an if statement :

public function takeRdvAction(Request $request)
{
    if ($request->isXmlHttpRequest()) {

        [...]
    }
}

Thirdly :

To use FosJsRouting, you exposed your route in your yaml. That's good. To use it in javascript, you have to include the given script in your base.html.twig and use Routing.generate just as defined in the doc :

$.ajax({
        url: Routing.generate('take_rdv', {/* $(yourform).serialize() ?*/}),
        method: 'POST',
        data: {},
        success: function(data) {
            $("#calendarModal").modal('hide');
            $("#calendarModal").on('hidden.bs.modal', function (e) {
                $('#calendar').fullCalendar('refetchEvents');
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown)
        {
            alert('Error: ' +  errorThrown);
        }
    });

Update

With my suggestions, you've to change how you use $request in your action :

$myArray = $request->request->all();

$civilite=$myArray['civilite'];
[...and so on...]

Bonus : Symfony is a powerfull framework. I suggest you to learn about using this framework and especially, in your case, about Forms

enjoy :)

UPDATE 2

if ($request->isXmlHttpRequest()) { is never true cause you are not doing an ajax call. I just see that, but your button is of type submit then, your browser send a basic HTTP request.

Add this to your js code :

$('body').on('click', '#monBouton', function (event) {
    event.preventDefault();

    [...$.ajax blablabla]
});