Friday 6 May 2016

slider when ajax request [AJAX,PHP,HTML]

// Css class for look when request going

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
}



// HTML code for div

<div id="overlay">
<img id="loading-image" src="http://www.memegen.com/img/ajax-loader-99.gif" alt="Loading.." />
<span>Loading Please wait</span>
</div>



//jQuery code when page loading

$("form#data3").submit(function(event){
$("#overlay").show();//[show this class, This is important when request create]
event.preventDefault();
var formData = new FormData($(this)[0]);
if(filename == null )
{
alert("Please select file");
}
else
{

$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
$("#overlay").hide();//[Hide this class, This is important when request finish]
$( "#roundedFour" ).prop( "checked", true);
var uploaded_file = $("#last_uploaded_url").val();
$(".add").html("http://localhost/Mobilize_Solutions/uploads/"+uploaded_file);

}
});
return false;
}
});

No comments:

Post a Comment