Symfony上的Fullcalendar通过模式添加/修改事件并将Json文件发送回数据库
我正在使用Symfony 2.8进行项目。我的主要目标是创建基于Fullcalendar库的动态日历。Symfony上的Fullcalendar通过模式添加/修改事件并将Json文件发送回数据库
添加我的事件称为“dispos”(英文avalabilities)和“RDVS”(英文约会”)通过JSON请求和Ajax。这工作得很好。
现在,我想变换availabilites到appointements(它们均视为Fullcalendar事件)
如:当用户点击一个可用性的模式显示出来,然后用户填写表单中,并点击“保存”按钮 当。单击“保存”按钮,表单中输入的所有信息将被发送并保存(通过Json请求)到我的数据库和约会 - >当前的所有事件应通过ajax重新加载,事件应显示输入事件的标题(患者姓名),模态应包含所有给定的信息/在“保存”操作之前写入。
我试图这样做,但我Ajax不是工作,因为事件不保存所有东西都正常后,重装。
无论如何,我认为我在某个地方做错了。代码我会告诉你在我的控制器返回一个视图,因为我没有设法返回一个响应(+我认为路由或什么是坏的,但不知道如何解决它...)
任何线索或建议woud是非常赞赏:)
因此,这里是我的代码:
-
TakeRdvAction在我的控制器:
/* -------------- --- / / --- 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('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"); }
}
如果我把如果($请求 - > isXmlHttpRequest( )),控制器直接转到 “其他” 结束返回 “Ajax请求失败”
-
Ajax.js文件(这是我们所谈论的)最后一个AJAX功能:
$(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; } });
});
-
我的模式显示出来时,点击事件(GOT切成几个部分遗憾未能解决它):
× 接近
<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="[email protected]" 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>
-
的routing.yml:
采取RDV
take_rdv: 路径:/奖品-RDV 默认:{_controller:RdvProBundle:默认:takeRdv} 方法:[POST] 选项: 揭露:真
其他ajax函数的工作很好,我试图预约后的可用性,使他们。当我实施FosJsRouting时,我认为尝试使我的takeRdvs动作起作用会更容易。但事实是,我不知道如何做到这一点,因为它是从别人不同的动作,我现在很失落:“(
我不知道如何改变路线,如果我需要... +我希望路线没有像我创建的其他路线一样显示,但是现在它已被编码,显示...
我是初级初级开发人员,所以我很抱歉,如果我的代码不干净:s 非常感谢您提供的所有帮助。
这是巨大的。我不知道你的问题(S?),但如果我的理解:
第一个问题:既然事件
Ajax不是工作不重装
如果#button
在您的第一次通话后您的页面被替换,附加的事件被销毁。改变你的听众:
$("#monBouton").click(function(){
通过
$('body').on('click', '#monBouton', function() {
将解决这个问题。
问题二:
如果我把如果($请求 - > isXmlHttpRequest()),控制器直接转到 “其他”
我建议通过$请求作为你的行动的说法,只是把你的病情的if
语句中:
public function takeRdvAction(Request $request)
{
if ($request->isXmlHttpRequest()) {
[...]
}
}
第三次:
要使用FosJsRouting,您在yaml中公开了您的路线。那很好。在JavaScript中使用它,你必须include the given script在base.html.twig
和使用Routing.generate
只是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);
}
});
更新
随着我的建议,你就改变你如何在你的行动使用$request
:
$myArray = $request->request->all();
$civilite=$myArray['civilite'];
[...and so on...]
奖励:Symfony是一个强大的框架。我建议你去了解使用此框架,特别是在你的情况下,约Forms
享受:)
更新2
if ($request->isXmlHttpRequest()) {
是不正确的,因为你不是在做一个Ajax调用。我只是看到,但你的按钮是submit
类型,那么,你的浏览器发送一个基本的HTTP请求。
添加到您的js代码:
$('body').on('click', '#monBouton', function (event) {
event.preventDefault();
[...$.ajax blablabla]
});
感谢您的第一个问题。对于第二个,我已经尝试过使用参数+“if”,但它直接转到else部分。对于第三个问题,我想我需要了解它是如何工作的,但只要问题2没有解决,我就不能走得更远。 –
我更新了我的回答,其中包含的内容实际上是错误的 –
我还看到了我放入我的按钮的路径问题我以为我可以删除导致我的控制器的操作,但是我使用的解决方案显得更好。现在执行ajax调用,现在我必须生成正确的代码才能使其正常工作。我也在Symfony表格上留下了一些建议,所以你可能会更容易让我的代码工作。我会让你知道的。坦克你很多时候你在我的长篇幅上花:) –
有代码的一个巨大的堆在这里工作过。我怀疑大部分与你的问题无关。我没有时间阅读所有内容,并找出我需要关注的内容,请尝试将其分解到不正常工作的相关部分。有关创建可用示例的一些指导,请参阅https://stackoverflow.com/help/mcve。请同时尝试关注一个问题,否则问题可能会变得不清楚。 – ADyson
我删除了不相关但仍然很长的代码,很抱歉... –