bootstrap modal data not passed from jQuery

Question

I'm working with full calendar, so i have this modal, to insert a new event:

 <div id="fullCalModal_add_appointment" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="after_post_message_appointment"></div>
            <form id="add_appointment_form" method="post" class="form-horizontal" action="" enctype="multipart/form-data">
                <input type="hidden" name="add_appointment_submit" value="add_appointment_submit">
                <input type="hidden" name="booking_from" value="<?php echo $query1ans;?>">
                <input type="text" name="selected_room" value="" id="selected_room">

While the js is:

  dayClick: function(date, jsEvent, view, resourceObj) {
              /*  var date_start = moment(date.format()).unix();
                var data1 = moment(date.format()).unix();
                var selected_room = resourceObj.id;*/

              alert(resourceObj.id);
                //alert('Clicked on: ' + date.format('hh:mm'));
                //alert('Current view: ' + view_type);
                $('#date_start').val(date.format('YYYY-MM-DD'));
                //$('#time_start').val(date.format('hh:mm:ss A'));
                $('#time_start').val(date.format('hh:mm A'));
                //$('#view_type').val(resourceObj.id);
                $('#selected_room').val(resourceObj.id);

                $('#fullCalModal_add_appointment').modal();

            },

Now, the problem is that all the var data are not passed to the modal and i can't understand why! Hopefully, to find here a solution, also because for other identical meals similar code works!

Answer 1

You should call tha modal() function before you set the variable data as given below,

 dayClick: function(date, jsEvent, view, resourceObj) {
              /*  var date_start = moment(date.format()).unix();
                var data1 = moment(date.format()).unix();
                var selected_room = resourceObj.id;*/

              // alert(resourceObj.id);
                //alert('Clicked on: ' + date.format('hh:mm'));
                //alert('Current view: ' + view_type);
                $('#fullCalModal_add_appointment').modal();
                $('#date_start').val(date.format('YYYY-MM-DD'));
                //$('#time_start').val(date.format('hh:mm:ss A'));
                $('#time_start').val(date.format('hh:mm A'));
                //$('#view_type').val(resourceObj.id);
                $('#selected_room').val(resourceObj.id);



            },