CODEWITHSUNDEEP
javascriptphpjqueryajax
Subi
Subi

Reputation: 107

how to get ajax request to same page?

I'm implementing an infinitive scrolling web page. It works well. It has two pages

1. index.php

2. getrecords.php.

My index.php page is 

<html>

//some html codes here

//my java script
<script type="text/javascript">
  var busy = false;
  var limit = 6
  var offset = 0;
  var anotherID = 5


   function displayRecords(lim, off) {
    $.ajax({
      type: "GET",
      async: false,
      url: "getrecords.php",
      data: "limit=" + lim + "&offset="+ off+"&anotherID="+anotherID,
      cache: false,
      beforeSend: function() {
        $("#loader_message").html("").hide();
        $('#loader_image').show();
      },
      success: function(html) {
        $("#results").append(html);
        $('#loader_image').hide();
        if (html == "") {
          $("#loader_message").html('<button class="btn btn-default btn-block" type="button">No more records.</button>').show()
        } else {
          $("#loader_message").html('<button class="btn btn-default btn-block"  type="button"><div id="loader_image"><img src="loader.gif" alt="" width="24" height="24">Loading please wait...</button>').show();
        }
        window.busy = false;


      }
    });
  }

  $(document).ready(function() {
    // start to load the first set of data
    if (busy == false) {
      busy = true;
      // start to load the first set of data
      displayRecords(limit, offset);
    }


    $(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;

        // this is optional just to delay the loading of data
        setTimeout(function() { displayRecords(limit, offset); }, 500);

        // you can remove the above code and can use directly this function
        // displayRecords(limit, offset);

      }
    });

  });

</script>

</html>

My getrecords.php page is 

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


$limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 10;
$offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;
$id = $_GET["anotherID"];
$query = $id;
$sql = "SELECT * FROM x where title like '%xx%' ORDER BY rand() 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 'something';
}
}
?>

For some reason I want to merge the two pages into a single page. I want to place the coding of getrecords.php inside index.php and make a single page. I tried many options but nothing helps me. How can I achieve this? Thanks in advance.

Upvotes: 0

Views: 1598

Answers (4)

mrjoltcola
mrjoltcola

Reputation: 20852

My question would be: "why do you want to do that?". Separation of concerns is a good thing. MVC is based on that, for example. You have 2 functionalities here, one is a page or view, and one is a server action or controller, or could be a REST service. There is nothing wrong with keeping them separate.

But I'll assume you have a good reason.

In your case, you are trying to combine into one "self referential" page with 2 functionalities, and to do that, two approaches are most common:

  1. Pass in a special variable via your AJAX call and use an if statement.
  2. Auto-detect whether the page is being called in standard context or AJAX context by detecting the Content-type. If content-type is json, for example, then return records, otherwise, render the main view and execute the AJAX call. Example: $_SERVER["CONTENT_TYPE"] - but keep in mind, this isn't 100% reliable, you need to make sure to pass the Content-type header in your AJAX request.

Upvotes: 1

abdullacm
abdullacm

Reputation: 636

try to include the getrecords.php inside and index.php and write a condition to check whether ajax request, if its ajax then do the login and exit, otherwise the html part 

<?php

    if(isset($_GET["anotherID"])){
    require_once("config.php");

    $limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 10;
    $offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;
    $id = $_GET["anotherID"];
    $query = $id;
    $sql = "SELECT * FROM x where title like '%xx%' ORDER BY rand() 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 'something';
    }
    }
    exit;
    }
    ?>

    <html>

    //some html codes here

    //my java script
    <script type="text/javascript">
      var busy = false;
      var limit = 6
      var offset = 0;
      var anotherID = 5


       function displayRecords(lim, off) {
        $.ajax({
          type: "GET",
          async: false,
          url: "getrecords.php",
          data: "limit=" + lim + "&offset="+ off+"&anotherID="+anotherID,
          cache: false,
          beforeSend: function() {
            $("#loader_message").html("").hide();
            $('#loader_image').show();
          },
          success: function(html) {
            $("#results").append(html);
            $('#loader_image').hide();
            if (html == "") {
              $("#loader_message").html('<button class="btn btn-default btn-block" type="button">No more records.</button>').show()
            } else {
              $("#loader_message").html('<button class="btn btn-default btn-block"  type="button"><div id="loader_image"><img src="loader.gif" alt="" width="24" height="24">Loading please wait...</button>').show();
            }
            window.busy = false;


          }
        });
      }

      $(document).ready(function() {
        // start to load the first set of data
        if (busy == false) {
          busy = true;
          // start to load the first set of data
          displayRecords(limit, offset);
        }


        $(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;

            // this is optional just to delay the loading of data
            setTimeout(function() { displayRecords(limit, offset); }, 500);

            // you can remove the above code and can use directly this function
            // displayRecords(limit, offset);

          }
        });

      });

    </script>

    </html>

Upvotes: 0

user2182349
user2182349

Reputation: 9782

Wrap the code with

if (isset($_GET['offset'])) {
    // All the code from get records.php
} else {
    // All the code from index.php
}

On the first page request, the _GET variable won't be set, so the index.php code will run, Ajax requests will be served on subsequent requests.

Upvotes: 0

DannyPhantom
DannyPhantom

Reputation: 1063

When you ajax to the same page - pass it some parameter, for example "Getrecords" => TRUE. Now your whole page would consist of the 2 pages combined, but if you receive a $_POST['Getrecords'] - then return the result of script currently located on getrecords page, otherwise do whatever you need to in index.php. Don't forget to change ajax parameters to POST and pass a parameter

Upvotes: 0

Related Questions