javascript - 警报或模态屏幕 JavaScript

Question

我正在开发一个网站，其中有一个部分是我执行邮政编码查询，当我给出“TAB”或简单地单击该字段以通知数据执行该事件时(我正在执行我的 JavaScript我的输入框中的 onblur 事件中的代码)。但是，我需要一个在查询等待期间出现的“模态”屏幕或“警报”。

已经尝试使用以下方法，但没有成功，在 onblur 事件中不起作用，在 onclick 中不起作用:

 $ ('# BuscaCEP') modal ('show.');
 $ ('# BuscaCEP') modal ('hide');.

有人愿意给点小费吗？

我的总代码:

 <li class="fields">
                    <div class="field">
                        <div class="form-group">
                            <?php //inputbox to the query from the onblur ?>
                            <label for="zip" class="required"><em>*</em><?php echo $this->__('Zip/Postal Code') ?>
                            </label>

                            <div class="input-box input-box-bkg-lage-small">

                                <input type="text" name="postcode"
                                       value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
                                       title="<?php echo $this->__('Zip/Postal Code') ?>" id="zip"
                                       onblur="consultacep(this.value)"
                                       OnKeyPress="formatNumber('#####-###', this, event)" maxlength="9"
                                       class="form-control validate-zip-international <?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>"/>

                            </div>
                        </div>

                    </div>

                </li>


<script type="text/javascript">

//Javascript Code
    function consultacep(cep) {

        cep = cep.replace(/\D/g, "")
        url = "http://cep.correiocontrol.com.br/" + cep + ".js"
        s = document.createElement('script')
        s.setAttribute('charset', 'utf-8')
        s.src = url
        document.querySelector('head').appendChild(s);


     //where the the loading screen should be performed
        $('#buscaCEP').modal('show');
    }

    function openWindow() {
        $('#buscaCEP').open();
    }

    function correiocontrolcep(valor) {
        if (valor.erro) {
            alert('Cep não encontrado');
            return;
        }


        var xmlhttp = new XMLHttpRequest();


        xmlhttp.onreadystatechange = function () {

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                document.getElementById('Street').value = valor.logradouro
                document.getElementById('bairro').value = valor.bairro
                document.getElementById('city').value = valor.localidade
                document.getElementById("region_id").value = xmlhttp.responseText;

                //where the the loading screen should be terminated
                $('#buscaCEP').modal('hide');
            }
        }


        var url = "<?php echo $this->getBaseUrl()?>";
        xmlhttp.open("GET", url + "buscaUF.php?uf=" + valor.uf, true);
        xmlhttp.send();
    }

</script>

在Leopoldo Negro的帮助下，抵达以下情况:

模态屏幕:

    <!-- Modal  -->
            <div class="modal fade" id="buscaCEP" 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">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            Loading...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

输入框:

<li class="fields">
            <div class="field">
                <div class="form-group">
                    <?php //começa o cep e dados região ?>
                    <label for="zip" class="required"><em>*</em><?php echo $this->__('Zip/Postal Code') ?>
                    </label>

                    <div class="input-box input-box-bkg-lage-small">

                        <input type="text" name="postcode"
                               value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
                               title="<?php echo $this->__('Zip/Postal Code') ?>" id="zip"
                               onblur="consultacep(this.value)"
                               OnKeyPress="formatNumber('#####-###', this, event)" maxlength="9"
                               class="form-control validate-zip-international <?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>"/>

                    </div>
                </div>

            </div>

        </li>

调用事件:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {


                $('input[name="zip"]').blur(function(){
                    consultacep(this.value);
                });
            });

        </script>

Javascript:

<script>
    function consultacep(cep) {

        cep = cep.replace(/\D/g, "")
        url = "http://cep.correiocontrol.com.br/" + cep + ".js"
        s = document.createElement('script')
        s.setAttribute('charset', 'utf-8')
        s.src = url
        document.querySelector('head').appendChild(s);

        $('#buscaCEP').modal('show');

    }

    function openWindow() {
        $('#buscaCEP').open();
    }

    function correiocontrolcep(valor) {
        if (valor.erro) {
            alert('Cep não encontrado');
            return;
        }


        var xmlhttp = new XMLHttpRequest();


        xmlhttp.onreadystatechange = function () {

            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                document.getElementById('Street').value = valor.logradouro
                document.getElementById('bairro').value = valor.bairro
                document.getElementById('city').value = valor.localidade
                /*document.getElementById('region_id').value=valor.uf*/
                /*document.getElementById('uf').value=valor.uf*/
                document.getElementById("region_id").value = xmlhttp.responseText;
                //where the the loading screen should be performed
                $('#buscaCEP').modal('hide');

            }
        }


        var url = "<?php echo $this->getBaseUrl()?>";
        xmlhttp.open("GET", url + "buscaUF.php?uf=" + valor.uf, true);
        xmlhttp.send();
    }
</script>

但仍然无法调出模态屏幕=/

Answer 1

试试这个:

$('#zip').blur(function(){
    consultacep(this.value);
});

这将以编程方式与 jQuery 绑定(bind) onblur 事件。

注意:确保 ID 为 buscaCEP 的项目存在。

编辑:

最初的错误来自您定义函数的地方，当“onblur”事件触发时，回调未定义，并触发错误。 尝试在网站标题中添加 JavaScript 或使用我提供的等待 DOM 加载的方法。 不要重新定义模糊事件回调，只需使用一种方法。 simple example