0

I have an ajax code where I am changing the URL and the data in the webpage. It's working absolutely fine. But I want that when the ajax process is in continue it should show the loading image. My code is like this.

This is for home.php:-

<?php
    ini_set("error_reporting", 1);
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
    if($_GET['rel']!='tab'){
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function(){
            $("a[rel='tab']").click(function(e){
                pageurl = $(this).attr('href');
                $.ajax({url:pageurl+'?rel=tab',success: function(data){
                    $('#content').html(data);
                }});
                if(pageurl!=window.location){
                    window.history.pushState({path:pageurl},'',pageurl);    
                }
                return false;  
            });
        });
        $(window).bind('popstate', function() {
            $.ajax({url:location.pathname+'?rel=tab',success: function(data){
                $('#content').html(data);
            }});
        });
    </script>
 </head>
 
<body>
<div id='content'>
<!--here comes the content-->
<a href="about.php" rel="tab">about</a>
<a href="home.php" rel="tab">home</a>
<p>This is home page</p>
<?php } ?>
<?php include('includes/footer.php'); ?>
<?php if ($_GET['rel'] != 'tab') {
  echo "</div>";
} ?>
</body>
</html>

This is for about.php

<?php
    ini_set("error_reporting", 1);
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
    if($_GET['rel']!='tab'){
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function(){
            $("a[rel='tab']").click(function(e){
                pageurl = $(this).attr('href');
                $.ajax({url:pageurl+'?rel=tab',success: function(data){
                    $('#content').html(data);
                }});
                if(pageurl!=window.location){
                    window.history.pushState({path:pageurl},'',pageurl);    
                }
                return false;  
            });
        });
        $(window).bind('popstate', function() {
            $.ajax({url:location.pathname+'?rel=tab',success: function(data){
                $('#content').html(data);
            }});
        });
    </script>
 </head>
 
<body>
<div id='content'>
<!--here comes the content-->
<a href="about.php" rel="tab">about</a>
<a href="home.php" rel="tab">home</a>
<p>This is about page</p>
<?php } ?>
<?php include('includes/footer.php'); ?>
<?php if ($_GET['rel'] != 'tab') {
  echo "</div>";
} ?>
</body>
</html>

The code is working properly but please help me with adding a loading image when the ajax is processing content.Please help me anyone.

Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
Aryan R.H
  • 7
  • 1
  • 2
  • Since you're using jQuery you can use the `.ajaxStart()` and `.ajaxComplete()` functions to display, then hide an image https://api.jquery.com/category/ajax/ – Jay Blanchard Oct 14 '20 at 16:42
  • Does this answer your question? [Show loading image while $.ajax is performed](https://stackoverflow.com/questions/4684722/show-loading-image-while-ajax-is-performed) – ADyson Oct 14 '20 at 16:43
  • Hi Aryan R.H, You can use ajax beforeSend function in ajax where you send load image https://stackoverflow.com/questions/13705945/show-loading-before-showing-send-result-in-jquery – jvk Oct 14 '20 at 16:53
  • pass the function in the `beforeStart` property of `ajax` method – Beingnin Oct 14 '20 at 17:27
  • Please sir can you give the source code for it anybody because I am new to the programming world. Please sir anybody. – Aryan R.H Oct 15 '20 at 06:34

0 Answers0