2016-07-31 1 views
2

У меня есть форма для обновления, которую я вызываю внутри модального на моей главной странице (с событием onclick, щелчок вызывает вызов с xmlhttprequest для страницы редактирования, содержащей форму с сохраненными значениями данных). Дело в том, что все работает штрафы, обновление работает, пост работает, получение данных в первую очередь работает, за исключением проверки формы и использования ajax для публикации данных. Обратите внимание, что на моей главной странице у меня есть вызов create, который создает новый экземпляр, и он работает отлично, с проверкой формы и сообщением ajax, поэтому это не может быть какой-то требуемый jQuery или любой другой скрипт.Проверка формы и все последующие коды не выполняются

Это моя форма:

<form id="eventFormUpdate" method="POST" class="form-horizontal" action="Event/{{$event->id}}/Update"> 
    <input type="hidden" name="_method" value="PATCH" id="hidden-update"> 
    <div class="form-group"> 
     <label class="col-xs-3 control-label">Nom</label> 
     <div class="col-xs-5"> 
      <input type="text" class="form-control" name="nameUpdate" value="{{$event->name}}"/> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-xs-3 control-label">Date de début</label> 
     <div class="col-xs-5 dateContainer"> 
      <div class="input-group input-append date" id="startDatePickerUpdate"> 
       <input type="text" class="form-control" name="starting_dateUpdate" value="{{$event->starting_date}}"/> 
       <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-xs-3 control-label">Date de fin</label> 
     <div class="col-xs-5 dateContainer"> 
      <div class="input-group input-append date" id="endDatePickerUpdate"> 
       <input type="text" class="form-control" name="ending_dateUpdate" value="{{$event->ending_date}}"/> 
       <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-xs-3 control-label">Assigné à</label> 
     <div class="col-xs-5 selectContainer"> 
      <select name="assigned_toUpdate" class="form-control"> 
       <option value="4" selected >First</option> <!--fix this by checking if is the selected data or not--> 
      </select> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-xs-3 control-label">Description</label> 
     <div class="col-xs-5"> 
      <textarea id="descUpdate" class="form-control" name="descriptionUpdate" placeholder="Veuillez entrer une description">{{$event->description}}</textarea> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-xs-5 col-xs-offset-3"> 
      <button type="submit" class="btn btn-default" id="update-event-submit">valider</button> 
     </div> 
    </div> 
</form> 

А вот мой сценарий, который обрабатывает форму проверки и Аякса проводки

<!-- event update script --> 
<script> 
$(document).ready(function() { 
    $('#startDatePickerUpdate') 
      .datepicker({ 
       format: 'yyyy/mm/dd' 
      }) 
      .on('changeDate', function(e) { 
       // Revalidate the start date field 
       $('#eventFormUpdate').formValidation('revalidateField', 'starting_dateUpdate'); 
      }); 

    $('#endDatePickerUpdate') 
      .datepicker({ 
       format: 'yyyy/mm/dd' 
      }) 
      .on('changeDate', function(e) { 
       $('#eventFormUpdate').formValidation('revalidateField', 'ending_dateUpdate'); 
      }) 
      .find('[name="assigned_toUpdate"]') 
      .selectpicker() 
      .change(function(e) { 
       /* Revalidate the pick when it is changed */ 
       $('#eventFormUpdate').formValidation('revalidateField', 'assigned_toUpdate'); 
      }) 
      .end(); 

    $('#eventFormUpdate') 
      .formValidation({ 
       framework: 'bootstrap', 
       icon: { 
        valid: 'glyphicon glyphicon-ok', 
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh' 
       }, 
       fields: { 
        nameUpdate: { 
         validators: { 
          notEmpty: { 
           message: 'Le nom est obligatoire.' 
          } 
         } 
        }, 
        starting_dateUpdate: { 
         validators: { 
          notEmpty: { 
           message: 'La date de début est obligatoire.' 
          }, 
          date: { 
           format: 'YYYY/MM/DD', 
           min: new Date(new Date().setDate(new Date().getDate()-1)), 
           max: 'ending_date', 
           message: 'La date de début est non valide.' 
          } 
         } 
        }, 
        ending_dateUpdate: { 
         validators: { 
          notEmpty: { 
           message: 'La date est oligatoire.' 
          }, 
          date: { 
           format: 'YYYY/MM/DD', 
           min: 'starting_date', 
           message: 'La date de fin est non valide.' 
          } 
         } 
        }, 
        descriptionUpdate: { 
         validators: { 
          notEmpty: { 
           message: 'La description est obligatoire.' 
          } 
         } 
        }, 
        assigned_toUpdate: { 
         validators: { 
          notEmpty: { 
           message: 'Veuillez séléctionner un utilisateur.' 
          } 
         } 
        } 
       } 
      }) 
      .on('success.field.fv', function(e, data) { 
       if (data.field === 'starting_dateUpdate' && !data.fv.isValidField('ending_dateUpdate')) { 
        // We need to revalidate the end date 
        data.fv.revalidateField('ending_dateUpdate'); 
       } 

       if (data.field === 'ending_dateUpdate' && !data.fv.isValidField('starting_dateUpdate')) { 
        // We need to revalidate the start date 
        data.fv.revalidateField('starting_dateUpdate'); 
       } 
      }) 

      .submit(function(){ 
       return false; 
      }) 

      .submit(function(){ 
       console.log('gonnastartsub'); 
       var $form = $("#eventFormUpdate"), 
         url = $form.attr('action'); 
       console.log('got vars'); 
       $.post(url, $form.serialize()).done(function() { 
        console.log('am in'); 
        $("#modal-closeUpdate").click(); 
        console.log('posted'); 
       }); 
      }); 
}); 
$("#descUpdate") 
     .focus(function() { 
      if (this.value === this.defaultValue) { 
       this.value = ''; 
      } 
     }) 
     .blur(function() { 
      if (this.value === '') { 
       this.value = this.defaultValue; 
      } 
     }); 

Update

Это мой контроллер

public function update(Request $request,$id) 
{ 
    $event = event::find($id); 

    $event->name = $request->name; 
    $event->description = $request->description; 
    $event->starting_date = $request->starting_date; 
    $event->ending_date = $request->ending_date; 
    $event->assigned_to = $request->assigned_to; 
    $event->save(); 

} 

И это мои маршруты по телефону:

Route::patch('Event/{eventID}/Update', '[email protected]'); 

Одна последняя вещь, на первый сценарий был на моей главной странице, и это не сработало, так что я пытался поставить его в в вызываемая страницы с xmlhttprequest и все еще не работает. Единственное, о чем я могу думать, это когда я вызываю новую страницу (форму для редактирования и обновления данных), скрипт уже загружен на главную страницу, поэтому он не находит идентификаторы элементов для обработки, это почему это не работает, или, по крайней мере, это единственная причина, по которой я мог найти. Любые предложения, пожалуйста?

+0

По-видимому, есть кнопка «Отправить» в вашей HTML-форме? (чтобы сделать сообщение формы) –

+0

да, ну и что? я проверяю щелчок на submit, так что я могу остановить его, и сделать это с помощью ajax, не обновляя страницу, и просто закрывая модальный ... плюс у меня это так же, в форме создания, так что это не проблема .... – LaravelOnly

+0

My bad .. Не заметил, что @mmrrobot –

ответ

1

Ну, прежде всего, у Вас есть ошибка в вашем datepickers мин и макс, они не совпадают с именами полей, которые вы установили, установите их в этот

max: 'ending_dateUpdate' 
min: 'starting_dateUpdate' 

Во-вторых, имена полей в форму , не совпадает с теми, на странице контроллера, поэтому он не может действительно обновить, если он не может найти данные, то это должно быть ваша страница контроллера:

public function update(Request $request,$id) 
{ 
    $event = event::find($id); 

    $event->name = $request->nameUpdate; 
    $event->description = $request->descriptionUpdate; 
    $event->starting_date = $request->starting_dateUpdate; 
    $event->ending_date = $request->ending_dateUpdate; 
    $event->assigned_to = $request->assigned_toUpdate; 
    $event->save(); 

} 

Надеется, что это помогает.

+0

Да, это было так глупо, спасибо за подсказки. – LaravelOnly

Смежные вопросы