我有一个AJAX函数,当我单击一个复选框时会调用它。通常,它会打开或关闭我页面的一部分。那很好,但是当发生错误时,即。当在某些情况下不允许单击该复选框时,我想通知AJAX这不成功。

我也不知道如何解决错误消息,使其显示在与Flash消息相同的位置。

如果我使用Flash消息,则需要再次重定向到同一页面,然后将页面放入其内部,这不是很好。

我确定那应该是解决这个问题的标准方法,因为我认为这是常见情况,还是...?

这是在这种情况下使用的 Controller 部分的方式:

def useWeeklyVolumes() { 
    println("useWeeklyVolumes - params: "+params) 
    def od = OfferDetail.get(params.id) 
    String status =  od.offerHeader.status  
    if ((status == 'Sold') || (status == 'Rejected')) { 
        transactionStatus.setRollbackOnly() 
        return render(status: 400, text:"Offer can not be changed (Sold/Rejected)")             
    } 

这就是AJAX调用的样子。
    $(document).ready(function(){ 
        $( document ).on('change', '.useWeeklyVolumes', function ( event ){  
            $.ajax({ 
                url: '${g.createLink( controller:'offerDetail', action:'useWeeklyVolumes' )}', 
                data: {ckbWeeklyVolumes:this.checked, id:this.id}, 
                type: 'get', 
                success: function ( data ) { $( '#nono' ).html( data );     }, 
                error: function (jqXHR) {document.querySelector('#alert').innerHTML = jqXHR.responseText; 
                            const timeoutID = window.setTimeout(() => { 
                            messageBox.innerHTML = ''; 
                            window.clearTimeout(timeoutID); 
                }, 3000);} 
            }); 
        }); 
    }); 

这是我最近的尝试:
<script> 
    $(document).ready(function(){ 
        $( document ).on('change', '.batman', function ( event ){  
        alert('Hej'); 
            $.ajax({ 
                url: '${g.createLink( controller:'person', action:'register' )}', 
                data: {registered:this.checked, id:this.id}, 
                type: 'get', 
                success: function ( data ) { $( '#alert' ).html( data );     }, 
                error: function (jqXHR) {const alert = document.querySelector('#alert').innerHTML = jqXHR.responseText; 
                        const timeoutID = window.setTimeout(function() { 
                        alert.innerHTML = ''; 
                        window.clearTimeout(timeoutID); 
                }, 3000);} 
            }); 
        }); 
    }); 
</script> 

在gsp中,我添加了以下内容:
<span id="alert"></span> 

错误消息将显示在此处,但将保留在那里,直到刷新为止。

最终的解决方案:
    <script> 
        $(document).ready(function(){ 
            $( document ).on('change', '.batman', function ( event ){  
                $.ajax({ 
                    url: '${g.createLink( controller:'person', action:'register' )}', 
                    data: {registered:this.checked, id:this.id}, 
                    type: 'get', 
                    success: function ( data ) { $( '#alert' ).html( data );     }, 
                    error: function (jqXHR) {const alert = document.querySelector('#alert'); 
                        alert.innerHTML = jqXHR.responseText; 
                        const timeoutID = window.setTimeout(function() { 
                            alert.innerHTML = ''; 
                            window.clearTimeout(timeoutID); 
                        }, 3000); 
                    } 
                }); 
            }); 
        }); 

具有独立错误功能的替代解决方案:
    <script> 
        $(document).ready(function(){ 
            $( document ).on('change', '.batman', function ( event ){  
                $.ajax({ 
                    url: '${g.createLink( controller:'person', action:'register' )}', 
                    data: {registered:this.checked, id:this.id}, 
                    type: 'get', 
                    success: function ( data ) { $( '#alert' ).html( data );     }, 
                    error: function (jqXHR) {displayAlertMessage(jqXHR.responseText)} 
                }); 
            }); 
        }); 
 
 
        function displayAlertMessage(message) { 
            var timeOut = 5 
            jQuery('#alert').text(message).fadeIn() 
            jQuery('#alert').css("display", "block") 
            setTimeout(function() { 
            jQuery('#alert').fadeOut() 
            jQuery('#alert').css("display", "none") 
            }, timeOut * 1000); 
        } 
 
    </script> 

请您参考如下方法:

如果您尝试在显示Flash消息的同一div中显示错误消息,并假定div具有警报ID,则可以执行以下操作

// Remember jquery ajax error function can accept this params 
// Function( jqXHR jqXHR, String textStatus, String errorThrown ) 
const alert = document.querySelector('#alert'); 
 
alert.innertHTML = 'Some message'; 
 
const timeoutID = window.setTimeout(() => { 
       alert.innerHTML = ''; 
       window.clearTimeout(timeoutID); 
}, 3000); 

这应该进入错误功能,该功能最多接受三个参数,如 http://api.jquery.com/jquery.ajax/文档所示。

这将显示一条您从数据中获取的消息,并在3秒钟后将其删除。

正如@bassmartin提到的,您可以在 Controller 中使用 render方法创建特定消息并定义状态。或者,如果您使用的Grails版本高于2.3,则可以使用 respond

在使用“响应我”的第一个版本上,我不太清楚,如果您决定使用该选项,请先阅读您版本的文档


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!