Question

我知道这个问题已被回答了很多次， Jquery等同于PHP的

我的问题是，当我加载文件就像页面已经加载并且验证表单没有任何效果...如果我使用php include或require_once它就像一个魅力，问题是有许多基于Html的页面，我不想把整个网站变成PHP。

基本：我有一个名为whatever.html的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>

然后我得到了一个custom.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一切顺利的时候，页脚加载到页面内部并且一切都很好，但是，当用户调用模态并单击提交按钮时它不会验证...我只能认为页面已经加载并且表单在验证被解雇时不存在但是我不知道如何在java / jquery上检查...就像我之前说过的，如果我使用require_once＆＃39; footer.html＆＃39;它有效，我对此有任何帮助，谢谢。

Answer 1

您似乎已将此footer.html加载包含在两个 document.ready事件处理程序中。只要此代码在页面上比#footer_holder div运行得更远，那么两个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'
                    }
                }
            }
        }
    });
});

包含来自另一个页面的Bootstrap模式不会验证表单

1 个答案: