jquery, not refreshing the page

Question

I am trying to use ajax so the page does not automatically refresh, however for some reason i cant seem to get it to work. I was going for this effect, using this Link

You can see how it slides in etc, without reloading, however i cant seem to get the site to work at all to even reload. When i click the link , nothing comes up.

I am trying to get it to work with login and register page. When i click on the links , nothing happens.

Thanks again for the help.

<div class="navbar navbar-default" role="navigation">  
  <div class="container">     
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class = "logo">
        <img src="Image/Logo.png" class="img-responsive"/>
     </div> 
        </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.php">Home</a>
        </li>
        <li><a href="about.php">About</a>
        </li>
        <li><a href="login.php">Login</a>
        </li>
        <li><a href="reg.php">Become A member</a>
        </li>
      </ul>
    </div>
    </div>  
</div>

    <div class="container">
        <div class="Mainbody">
        
    <div class="linetop"> 
        <div class="linebottom">
            <h3>JULY 19th, 2016</h3>
            <!-- <h1><span>J</span>UST <span>J</span>UICE</h1> -->
            <h1>INTO THE NEW YOU</h1>
            <h2>THE APPLICATION TO A HEALTHIER LIFESTYLE</h2>
            <div class="bottop"> 
            <div class="botbottom"></div>
            </div>
            </div>
    </div>
        </div>
    </div>
    
    <div class="footer">
        <div class="container">
            <div class="navbar-text pull-left">
                <div class="logo1">
                    <img src="Image/Logo.png" class="img-responsive"/>
                    <p>&copy; 2016 by JJ. CopyRight Ali Issa</p>
                </div>
            </div>
            <div class="navbar-text pull-right">
                <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                <a href="#"><i class="fa fa-instagram fa-2x"></i></a>
            </div>
        </div>
    </div>
  

  
  

    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
    <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    <script type='text/javascript' src='js/dynamicpage.js'></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(function() {

            var newHash      = "",
                $mainContent = $("#main-content"),
                $pageWrap    = $("#page-wrap"),
                baseHeight   = 0,
                $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href='"+newHash+"']").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');
});

Edit:

With new code added , now all it does is refresh like normal and not fade in , fade out

Your post title may be misleading - correct me if I am wrong, but to my understanding, you are attempting to change a div's contents by loading the contents via AJAX? — shrmn, Mar 26 '16 at 02:50
If your problem is that the AJAX doesn't work, there isn't any AJAX on the page. See [this post](http://stackoverflow.com/questions/36221946/login-into-a-website-and-get-html-from-a-page/36223830#36223830) and [this post](http://stackoverflow.com/questions/36025289/prevent-page-load-on-jquery-form-submit-with-none-display-button#36025530). *`$.load()` is a type of AJAX, but not the `post` + `callback` that we usually mean when we talk about AJAX* — cssyphus, Mar 26 '16 at 03:35
how do you want to refresh the page? i mean on button click? — Imran Aslam, Mar 26 '16 at 06:30
if you want to refresh page using button click in jQuery than, `$('buton#buttonid').on('click', function(){ location.reload(); });` — Imran Aslam, Mar 26 '16 at 06:32
First check the what's the error... For this you can run this page in browser (chrome etc...) Then press key F12 then check error in Console Tab. — Durgesh Pandey, Mar 26 '16 at 16:25

jquery, not refreshing the page

0 Answers0