警报或模态屏幕 javascript

Question

我正在开发一个站点，其中有一部分是我执行邮政编码查询的，当我给出 "TAB" 或简单地单击该字段以通知数据以执行查询时（我'我正在我的输入框的 onblur 事件中执行我的 JavaScript 代码）。但是，我需要一个 "modal" 屏幕或 "alert" 应该在查询的等待时间内出现。

已经尝试使用以下方法，但我没有成功，请不要在 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);
});

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

注意：确保id为buscaCEP的项目存在。

编辑：

最初的错误来自您定义函数的地方，当"onblur"事件触发回调未定义时，它会触发错误。尝试将您的 javascript 添加到网站的 header 或使用我提供的等待 DOM 加载的方法。不要重新定义模糊事件回调，只使用一种方法。 simple example

Answer 2

上面建议的两种方法大家都做不到，然后做了一些基本的工作，我发帖是为了帮助别人！

创建了一个 div 弹出窗口：

<DIV id="popup">
                        <span style="color: #0871B5;font-size: 20px ">BUSCANDO CEP!</span>
                        <br/>
                        <img src="<?php echo str_replace('index.php/' ,'',$this->getBaseUrl() . 'skin/frontend/default/TW/Images_TW/loader.gif') ?>"/>
                    </DIV>

并在 javascript 函数中打开它：

<script>

    function fechar(){
        document.getElementById('popup').style.display = 'none';
    }

    function abrir(){
        document.getElementById('popup').style.display = 'block';
        setTimeout ("fechar()", 3000);
    }


    function consultacep(cep) {
        abrir();
        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);

    }

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

</script>

警报或模态屏幕 javascript

Alart or modal screen javascript

javascript

jquery

twitter-bootstrap

modal-dialog

alert