Включают Boostrap модальный с другой страницы не проверяет форму

Я знаю, что этот вопрос был дан ответ так много раз, Jquery эквивалентно РНР включаютВключают Boostrap модальный с другой страницы не проверяет форму

Моя проблема заключается в том, что, когда я загрузить файл, как на странице был уже загружен, и форма проверки не имеет никакого эффекта ... если я использую php include или require_once, это работает как шарм, проблема в том, что существует много страниц, основанных на Html, которые я не хочу превращать весь сайт для PHP.

Основное: Я получил Html страницу под названием whatever.html:

<html> 
<head> 
</head> 
<body> 
<div class="container" > 
content here... 

<div id="footer_holder"></div> 
</div> 
<!-- /.container --> 

<!-- jQuery and all JS --> 
<script src="js/jquery.js"></script>... 

</body> 
</html>

в конце я включаю в сноске, которые содержат 2 модальности:

<!-- Request Modal --> 

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Solicita el Servicio</h4> 
     </div> 
     <div class="modal-body"> 
     <form role="form" id="requestModal" action="goto..." method="post"> 
     <div class="form-group"> 
      <label class="sr-only" for="exampleInputEmail1">Telefono</label> 
      <input type="text" class="form-control" name="telefono" placeholder="telefono de Contacto" required> 
     </div> 
     <div class="form-group"> 
      <label for="textArea" class="sr-only">Textarea</label> 
      <textarea class="form-control" rows="3" placeholder="Mensaje" name="mensaje" required></textarea> 
     </div> 
     <div class="form-group"> 
      <div id="form_request_result"></div> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="reset" class="btn btn-default"><i class="fa fa-eraser"></i>Borrar</button> 
     <button type="submit" id="myRequestButton" class="btn btn-ghost"><i class="fa fa-send"></i>Enviar</button> 
     </form> 
    </div> 
    </div> 
</div> 
</div> 

<!-- Signin Modal Not rdy yet--> 

<footer id="footer_design"> 
    <!-- Footer Content --> 
</footer>

Тогда я получил обычай .js файл, где все коды идет внутри нагрузки

$(document).ready(function(){ 

jQuery(function(){ 
jQuery('#footer_holder').load('footer.html'); 
}); 

some other codes... Then validate form when user fire modal 

$('#requestModal').formValidation({ 
     framework: 'bootstrap', 
      err: { 
      container: 'tooltip' 
      }, 
     icon: { 
      valid: 'fa fa-check', 
      invalid: 'fa fa-times', 
      validating: 'fa fa-refresh' 
      }, 
     locale: 'es_ES', 
     fields: { 
      telefono: { 
       validators: { 
        notEmpty: { 
         message: 'The username is required' 
        } 
       } 
      }, 
      mensaje: { 
       validators: { 
        notEmpty: { 
         message: 'The password is required' 
        } 
       } 
      } 
     } 
    });

Так что, когда я открываю whatever.html все идет хорошо, Фут r загружается внутри страницы и все хорошо, но, когда пользователь вызывает Modal и нажимает кнопку submit, он не проверяет ... Все, что я могу думать, это то, что страница уже загружается, а форма не существует, когда проверка была но я не знаю, как проверить это на java/jquery ... Как я уже говорил, если я использую require_once 'footer.html', это работает, я рекомендую любую помощь по этому поводу, спасибо.

источник

2015-03-25 ryangus

Попробуйте загрузить нагрузку перед функцией 'document.ready'. Это может иметь какое-то отношение к этому. –

Я не упоминал по моему вопросу извините, я тоже пробовал это и не работал ... jQuery (function() {jQuery ('# foot .... Then document.ready .... – ryangus

Размещение код проверки внутри footer.html, похоже, работает, но загружает вид медленного и странного ... Я буду продолжать искать ... – ryangus

Кажется, что у вас есть это footer.html Нагрузка, завернутая в document.ready обработчики событий. Пока этот код работает дальше на странице, чем div #footer_holder, тогда обе оболочки document.ready не нужны. Они могут даже замедлять немного: http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

Поскольку метод .load() принимает функцию обратного вызова для запуска после запроса будет завершена, вы бы лучше загрузки содержимого сразу, а затем с помощью этого обратного вызова для инициализации проверки после footer.html были загружены.

jQuery('#footer_holder').load('footer.html', function() { 
    $('#requestModal').formValidation({ 
     framework: 'bootstrap', 
      err: { 
      container: 'tooltip' 
      }, 
     icon: { 
      valid: 'fa fa-check', 
      invalid: 'fa fa-times', 
      validating: 'fa fa-refresh' 
      }, 
     locale: 'es_ES', 
     fields: { 
      telefono: { 
       validators: { 
        notEmpty: { 
         message: 'The username is required' 
        } 
       } 
      }, 
      mensaje: { 
       validators: { 
        notEmpty: { 
         message: 'The password is required' 
        } 
       } 
      } 
     } 
    }); 
});

источник

2015-03-26 04:16:25

Когда я прочитал ваш блог, я знал, что у вас есть ответ, спасибо, я все еще учился и иногда я терялся в таком количестве кода! – ryangus

Включают Boostrap модальный с другой страницы не проверяет форму

ответ

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