CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Rick77
Rick77

Reputation: 241

AJAX load and page scrolling

I need help with the following problem. There is a button on my page and the press of the button loads content in a “div” element positioned below the button via AJAX. Everything works fine but one thing. The page scrolls a bit with each press of the button but I want it to keep its position.

Here is my HTML code:

<input type="button" name="calculate" value="Calculate"
    onclick="invoke(this.form, this.name, '#result')"/>

And here is my JavaScript code (I am using jQuery):

function invoke(form, event, container) {
    $('input[type="button"]').attr('disabled', 'disabled');
    $(container).html('<br/><div class="img"><img src="/Test/img/ajax-loader.gif"/><div>');
    $(container).load(form.action, event + '&' + $(form).serialize());
}

I searched through other posts but didn’t find any working solution. Any suggestions would be appreciated!

Upvotes: 4

Views: 2110

Answers (3)

Ranjeet Karki
Ranjeet Karki

Reputation: 2647

You have to call this function on page load.

limit – The number of records to display per request.
offset – The starting pointer of the data.
busy – Check if current request is going on or not.

The main trick for this scroll down pagination is binding the window scroll event and checking with the data container height



$(document).ready(function() {

$(window).scroll(function() {
          // make sure u give the container id of the data to be loaded in.
          if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
            busy = true;
            offset = limit + offset;

            displayRecords(limit, offset);

          }
});

})










<script type="text/javascript">
          var limit = 10
          var offset = 0;

          function displayRecords(lim, off) {
            $.ajax({
              type: "GET",
              async: false,
              url: "getrecords.php",
              data: "limit=" + lim + "&offset=" + off,
              cache: false,
              beforeSend: function() {
                $("#loader_message").html("").hide();
                $('#loader_image').show();
              },
              success: function(html) {
                $('#loader_image').hide();
                $("#results").append(html);

                if (html == "") {
                  $("#loader_message").html('<button data-atr="nodata" class="btn btn-default" type="button">No more records.</button>').show()
                } else {
                  $("#loader_message").html('<button class="btn btn-default" type="button">Load more data</button>').show();
                }

              }
            });
          }

          $(document).ready(function() {
            // start to load the first set of data
            displayRecords(limit, offset);

            $('#loader_message').click(function() {

              // if it has no more records no need to fire ajax request
              var d = $('#loader_message').find("button").attr("data-atr");
              if (d != "nodata") {
                offset = limit + offset;
                displayRecords(limit, offset);
              }
            });

          });

        </script>

Implementing with php ie getrecords.php

 <?php
    require_once("config.php");

    $limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 10;
    $offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;

    $sql = "SELECT countries_name FROM countries WHERE 1 ORDER BY countries_name ASC LIMIT $limit OFFSET $offset";
    try {
      $stmt = $DB->prepare($sql);
      $stmt->execute();
      $results = $stmt->fetchAll();
    } catch (Exception $ex) {
      echo $ex->getMessage();
    }
    if (count($results) > 0) {
      foreach ($results as $res) {
        echo '<h3>' . $res['countries_name'] . '</h3>';
      }
    }
    ?>

Upvotes: 0

Ajay2707
Ajay2707

Reputation: 5798

Good, for the answer and also good if you give your code in jsfiddle. Still no issue, recently I have done the same thing.

By default it same position if you click on button, but if you have anchor tag, then it will automatically goes on top.

There is so many things to stay or scroll on desired position.

window.scrollTo(0, 0); 

    function buttonclick(isfirsttimeload)
    {        
          if (typeof isfirsttimeload!= "undefined")
              window.scrollTo(0, 0);
          else
            location.hash = '#asearchresult'; //this is hidden anchortag's id, which scrolldown on click.
   }

http://www.w3schools.com/jsref/prop_loc_hash.asp

Using window.location.hash in jQuery

Upvotes: 0

Rick77
Rick77

Reputation: 241

I found out where the problem came from. Since the content loaded in the “div” element changed its height 2 times with each press of the button, the height of the page body changed as well. This was the cause of the scrolling. I fixed the height of the “div” element in the css file:

div#result {height: 200px;}

This solved the problem.

Upvotes: 1

Related Questions