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


Fullcalendar on Symfony add/modify events through modal and send back Json file to Database

我正在使用Symfony 2.8开发一个项目。我的主要目标是基于Fullcalendar库创建动态日历。

我通过Json请求和ajax添加了名为" dispos"(英语)和" Rdvs"(英语)的事件，效果很好。

现在，我想将可用的人转变为任命(在Fullcalendar中都被视为事件)。

例如：当某人单击一个可用性时，将显示一个模式，然后该人在其中填写表格并单击"保存"按钮。
单击"保存"按钮后，将在表单中输入的所有信息发送并保存(通过Json请求)到我的数据库中，并进行date
->当前所有事件应通过ajax重新加载，该事件应与输入事件的标题(患者姓名)一起显示，并且模态应包含在"保存"操作之前给出/编写的所有信息。 >

我尝试这样做，但是我的ajax无法正常工作，因为在保存所有其他内容之后，事件不会重新加载。

无论如何，我认为我在某处做错了。我将在Controller中显示的代码返回一个视图，因为我没有设法返回响应(我认为路由或某些问题很糟糕，但不知道如何解决...)

任何线索或建议都将不胜感激:)

这是我的代码：

  • 我的控制器中的TakeRdvAction：

    / * ----------------- /
    /-获取RDV ---- /
    / ----------------- * /

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    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('d-m-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($ request-> isXmlHttpRequest())，则控制器直接转到" else"端，返回" Ajax请求失败"。

  • Ajax.js文件(这是我们正在谈论的最后一个ajax函数)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    $(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;
        }

    });

    });

    • 其他ajax函数也可以正常工作，我在尝试预约可用性后将它们制成。当我实现FosJsRouting时，我认为尝试使takeRdvs操作更容易。但是事实是，我不知道该怎么做，因为这是与其他动作不同的动作，我现在迷失了：'(

  • 单击事件时我的模态显示(切成几部分，抱歉无法修复)：

    ×
    关闭

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
                                    <h4 id="modalTitle" class="modal-title modify"></h4>
                               
                           
                           
                                <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>
                           

                           
                               
                                    <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>
                               
                               
                                    <label class="control-label" for="inputNom">Nom</label>
                                    <input name="inputNom" type="text" class="form-control" id="inputNom" placeholder="Doe" required >
                               
                           
                           
                               
                                    <label class="control-label" for="inputPrenom">Prénom</label>
                                    <input name="inputPrenom" type="text" class="form-control" id="inputPrenom" placeholder="Jane" required >
                               
                           
                           
                               
                                    <label class="control-label" for="email">Email</label>
                                    <input name="email" type="email" class="form-control" id="email" placeholder="[email protected]" required >
                               
                           
                            {# fin de la condition #}
                           
                               
                                    <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>
                               
                               
                                    <label class="control-label" for="tel">Mobile</label>
                                    <input name="tel" type="tel" class="form-control" id="tel" placeholder="0607080910" required>
                               
                           
                           
                               
                                    <label class="control-label" for="telFixe">Téléphone fixe</label>
                                    <input name="telFixe" type="tel" class="form-control" id="telFixe" placeholder="0101010101">
                               
                           

                           
                               
                                    <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>
                               
                           
                           
                               
                                    <label class="control-label" for="cp">Code postal</label>
                                    <input name="cp" type="text" class="form-control" id="cp" placeholder="83000" required>
                               
                           
                           
                               
                                   
                                        <label class="control-label" for="ville">Ville</label>
                                        <input name="ville" type="text" class="form-control" id="ville" placeholder="Toulon" required>
                                   
                               
                           
                           
                               
                                   
                                        <label class="control-label" for="pays">Pays</label>
                                        <input name="pays" type="text" class="form-control" id="pays" placeholder="France" required>
                                   
                               
                           

                           
                               
                                    <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>
                               
                           
                           
                               
                                    <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>
                               
                           
                           
                               
                                    <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>
                               
                           
                            <input title="heureDispo" class="visually-hidden form-control" name="heureDispo" type="text" id="heureDispo">
                           
                                <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>
                           
                        </form>

                   
                    {#{% endfor %}#}
                   
                        {#<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>#}

  • Routing.yml：

    以RDV

    take_rdv：
    路径：/ prise-rdv
    默认值：{_ controller：RdvProBundle：默认值：takeRdv}
    方法：[POST]
    选项：
    暴露：true

    • 如果需要，我不知道如何更改路线...我希望该路线不像我创建的其他路线一样显示，但是如现在所编码的那样，它已经显示出来了...

    我是dev的初中生，所以对不起，如果我的代码不干净：s
    预先感谢您提供的所有帮助。

    相关讨论

    这是巨大的。我不确定您的问题吗？但是，如果我了解：

    第一个问题：

    ajax is not working since events do not reload

    如果在第一次调用后在页面中替换了#button，则附加事件将被销毁。更改您的听众：

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

    来自

    $('body').on('click', '#monBouton', function () {将解决问题。

    第二个问题：

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

    我建议传递$ request作为操作的参数，并将条件放入if语句中：

    1
    2
    3
    4
    5
    6
    7
    public function takeRdvAction(Request $request)
    {
        if ($request->isXmlHttpRequest()) {

            [...]
        }
    }

    第三次：

    要使用FosJsRouting，您已在Yaml中公开了路线。那挺好的。要在javascript中使用它，您必须在base.html.twig中包含给定脚本，并按照doc中的定义使用Routing.generate：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $.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);
            }
        });

    更新

    根据我的建议，您必须更改操作中使用$request的方式：

    1
    2
    3
    4
    $myArray = $request->request->all();

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

    奖金：Symfony是一个功能强大的框架。我建议您学习使用此框架的知识，尤其是关于Forms

    的情况。

    享受：)

    更新2

    if ($request->isXmlHttpRequest()) {永远不会是true，因为您没有在进行ajax调用。我只是看到了，但是您的按钮的类型是submit，然后您的浏览器发送了一个基??本的HTTP请求。

    将此添加到您的js代码中：

    1
    2
    3
    4
    5
    $('body').on('click', '#monBouton', function (event) {
        event.preventDefault();

        [...$.ajax blablabla]
    });
    相关讨论