laravel 5 - What can be the reasons why jquery cannot select element by id but can select element by attribut "id" -
i starting project full calendar (with laravel backend). agenda displayed , themed via jquery-ui theme.
when user clicks on agenda, event caught , form made blade shown. date inputs form can retrieved , set jquery. how (selection id) $("#startdate").val(formattedstartdate).
for time inputs ($("#starttime").val(formattedstarttime)) not work longer , have use select via attribute method (see jquery own words ) $("input[id='starttime']").val(starttime);
for information input form declared in js file {{ form::time('starttime', null, [ 'id' => 'starttime', 'title' => 'heure de début (obligatoire)']) }}
and blade macro defines time input declared in view {{ form::macro('time', function() { return '<input type="time">'; }) }}
i tried change id in blade did not change anything, , tried use input façade laravel form:input('time', 'starttime, ...) without changes.
my expertise in jquery / laravel / fullcalendar thin, , looks weird me these time inputs cannot selected in same way other inputs.
the generated html code :
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.print.css" media="print"> <!-- jquery theme calendar --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-ccuebr6csya4/9szppfrx3s49m9vuu5bgtijj06wt/s=" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-ege6blurk5shj+rmkfsgyekyzx3m4bg+zlfya7kns7e=" crossorigin="anonymous" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/lang/fr.js"></script> <!-- show event description in bubble --> <link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.css"> <script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.js"></script> <style> /* ... */ </style> </head> <body> <div id='calendar'></div> <!-- hidden div serves placeholder jquery dialog shows event details --> <div id="eventcontent" title="Éditer un rdv" style="display:none;"> début: <span id="starttime"></span><br> fin: <span id="endtime"></span><br><br> <p id="eventinfo"></p> <p><strong><a id="eventlink" href="" target="_blank">read more</a></strong></p> </div> <!-- hidden div serves placeholder jquery dialog creates new event --> <div id="neweventcontent" title="nouveau rdv" style="display:none;"> <form method="post" action="http://localhost:8000/23/agenda/storerdv" accept-charset="utf-8" class="form-inline" id="neweventform"><input name="_token" type="hidden" value="8mmmrbat1ucjqfmk4az0w5ebxmzrglqrsvrmwoxf"> <table style="width:100%"> <tr> <td>titre*: </td> <td><input id="ptitle" title="titre (obligatoire)" name="ptitle" type="text" value=""></td> <td></td> <td></td> </tr> <tr> <td>début*: </td> <td><input id="startdate" title="date de début (obligatoire)" name="startdate" type="date" value="2016-09-01"></td> <td>à*: </td> <td><input id="starttime" title="heure de début(obligatoire)" name="starttime" type="time"></td> </tr> <tr> <td>journée entière: </td> <td><input checked="checked" name="allday" type="checkbox" value="false"></td> <td></td> <td></td> </tr> <tr> <td>fin*: </td> <td><input id="enddate" title="date de fin (obligatoire)" name="enddate" type="date" value="2016-09-01"></td> <td>à*: </td> <td><input id="endtime" title="heure de fin (obligatoire)" name="endtime" type="time"></td> </tr> <tr> </tr> <tr> <td>email: </td> <td><input id="pemail" title="email" name="pemail" type="email" value=""></td> <td></td> <td></td> </tr> <tr> <td>tél: </td> <td><input id="ptel" title="numéro de téléphone" name="ptel" type="number" value=""></td> <td></td> <td></td> </tr> </table> <button id="saverdvbutton" type="button">sauvegarder le rdv</button> </form> </div> <script type="text/javascript" src="http://localhost:8000/js/scripts.js"></script> </body> </html> and here js code :
$(document).ready(function() { // page ready, initialize calendar... $("#calendar").fullcalendar({ header: { left: "prev,next today", center: "title", right: "month,agendaweek,agendaday" }, theme: true, editable: true, selectable: true, lang: "fr", events: [ { title: "all day event", start: "2016-08-01", description: "hello world!" } ], // triggered when user clicks on event eventclick: function(calevent, jsevent, view) { // clears current selection $(this).fullcalendar("unselect"); }, // fin eventclick // fired after selection made select: function(start, end, allday) { var startdate = moment(start).format("yyyy-mm-dd"); var starttime = moment(start).format("hh:mm"); var enddate = moment(end).format("yyyy-mm-dd"); var endtime = moment(end).format("hh:mm"); // populate dialog show $("#startdate").val(startdate); // time fields why required access via attribute input time value ? $("input[id='starttime']").val(starttime); $("#enddate").val(enddate); $("input[id='endtime']").val(endtime); // show dialog $("#neweventcontent").dialog({ modal: true, width:500}); // new event created $("#saverdvbutton").on("click", function(e) { e.preventdefault(); // prevent browser submit form (default action) saveevent(); }); $(this).fullcalendar("unselect"); } // fin select }); // fin full calendar init // function saveevent completed function saveevent(){ // let"s value form var startdate = moment($("#startdate").val(), "yyyy-mm-dd").format("yyyy-mm-dd"); var starttime = moment($("input[id='starttime']").val(), "hh:mm").format("hh:mm"); var enddate = moment($("#enddate").val(), "yyyy-mm-dd").format("yyyy-mm-dd"); var endtime = moment($("input[id='endtime']").val(), "hh:mm").format("hh:mm"); // treatment (tbd) } // end saveevent }); // fin document ready may tell me if expected behaviour time input 1 must select elements attribute , reason behind ?
thank you,
Comments
Post a Comment