CODEWITHSUNDEEP
javascriptjqueryajax
think_user
think_user

Reputation: 393

jQuery redirecting too slow

jQuery redirection taking too slow to connect another page. I have tried window.location.replace, window.location.href, window.location. Is there any way to make the redirect faster?

<form role="form" id="add_name"  method="post"  enctype="multipart/form-data" action="">
  <div class="form-group modal-form">
    <input type="text" class="form-control" id="email_id" name="email_id">
    </div>
    <div class="form-group modal-form">
      <input type="text" class="form-control" id="contact" name="contact" >
      </div>
      <button  type="submit" class="btn btn-popup"  name="submit" id="submit">save</button>
    </div>
  </div>
</form>
<script> 
  $("form#add_name").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
      url: "device_process.php",
      type: 'POST',
      data: formData,
      success: function(data) {
        window.location = "thankyou.php";
      },
      cache: false,
      contentType: false,
      processData: false
    });
  });
</script>

Upvotes: 0

Views: 1057

Answers (2)

think_user
think_user

Reputation: 393

I have used jquery Timeout().function.

Here is my answer:

<script> 
$("form#add_name").submit(function(e) {
e.preventDefault();   
var formData = new FormData(this);
$.ajax({
    url: "device_process.php", 
    type: 'POST',
    data: formData,
    success: function (data) {
       //  window.location = "thankyou.php?id=<?php echo htmlspecialchars($devices); ?>";

    },
    cache: false,
  contentType: false, 
    processData: false,

});
timeout:2000 , 
window.location = "thankyou.php?id=<?php echo htmlspecialchars($devices);    ?>";
});
</script>

Upvotes: 0

user6778410
user6778410

Reputation:

This may be because your server side code may be taking some time to process the request. In such cases, it is better adding a progress loader to notify the user that their request is in progress. It is very easy to implement. Try the below codes. This will work. Hope this helps. Thanks

INSIDE BODY :

<div id="loading" style="display: none;"><div>Loading, Please wait...</div></div>

CSS:

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    background-color: #DBDBDB;
    opacity: .9;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90); 
    z-index: 99999;
    display: none;
}

#loading>div{
    position: fixed;
 top: 50%;
 left: 50%;
 margin-left: -102px;
 width: 205px;
 height: 60px;
 text-align: left;
 background: url('../img/loading.gif') no-repeat; //add a loader image to your local
 margin-top: -30px;
 padding: 8px 0 0 35px;
}

JS:

$(document).ajaxStart(function () {

    $("#loading").fadeIn();

}).ajaxStop(function () {

    $("#loading").fadeOut();

    $(document).foundation();

});

Upvotes: 1

Related Questions