Brownman Revival Brownman Revival - 4 months ago 63
jQuery Question

ajax loading modal before send and after complete

before send
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
complete send


This is my console out put from this ajax request

$.ajax({
type: 'POST',
url: '.php',
dataType: "json",
data: {
lname: lname,
fname: fname
},
success: function(data) {
console.log(data)

},
error: function(data) {
//console.log("error" + data);
},
beforeSend: function() {
console.log('before send')
$('#modal').show();
},
complete: function() {
console.log('complete send')
$('#modal').hide();
}
})


This is my modal div

<div id="modal"></div>


Style as

#modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
//url('http://sampsonresume.com/labs/pIkfp.gif')
url('images/ajax-loader.gif')
50% 50%
no-repeat;
}

#modal {
overflow: hidden;
}
#modal {
display: block;
}


But the problem is that my div modal is not showing. The console is ok. First
before send
will appear then the data is loaded then
complete send

Answer

Try to remove the commented url in your #modal CSS:

#modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )  
                url('images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}