CODEWITHSUNDEEP
javascriptphpjqueryajax
Maanish
Maanish

Reputation: 99

PHP, AJAX, JQuery Get Return Value

I am trying to get a value in the div on a return to a AJAX call to PHP page.

I tried the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    $.ajax({
        type: "get",
        url: "returneye.php",
        success: function (data, textStatus) {
            alert(data);
            var eye = $('#valueeye').html(data);
            alert(eye);
        }
    });
});
</script>

And the returneye.php has the following:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test PHP Return</title>
    </head>
    <?php
        for ($i = 0; $i <= 20; $i++)
        {
            echo $i;
        }
    ?>
    <div id="valueeye" hidden><?php echo $i; ?></div>
    <body>
    </body>
</html>

But I do not get the value of i.

I tried with 

$('#valueeye').html(data).val();

I see undefined in the alert box.

How do I achieve this.

Upvotes: 0

Views: 798

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

seems you trying to test use ajax ..

in index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    $.ajax({
        type: "get", // you may no need this line because ajax is set type get by default
        url: "returneye.php",
        success: function (data) {
            alert(data);
            $('#valueeye').html(data);
        }
    });
});
</script>
<div id="valueeye"></div>

in returneye.php

<?php
for ($i = 0; $i <= 20; $i++)
{
    echo $i;
}
?>

Note be sure your index.php and returneye.php in the same path

This code output

01234567891011121314151617181920

Finally The working code is

$(document).ready(function(){
   // run a function to get new content onload
   getnewContent(0);

   // window scroll event
   $(window).on('scroll' , function(){
       var windowscrollTop = $(this).scrollTop(); // window scrollTop
       var windowHeight = $(this).height(); // window height
       var documentHeight = $(document).outerHeight(true); // document height
       // if scroll reach to the bottom
       if(windowscrollTop == documentHeight - windowHeight){
        // get last element 
        var lastElement = getlastelementdataattr();
        alert(lastElement);

        // run function to append new content and pass the last element 
        getnewContent(lastElement);
       }
   });
});

// function to get new content (in your case you will get this from ajax so each div you create in php should have data-getContent attribute )
function getnewContent(lastNum){
    for(var i = lastNum ; i <= lastNum + 30 ; i++){
    $('#showContent').append('<div class="" data-getContent="'+i+'">Content '+i+'</div>');
  }
  // your ajax should be like this
  /*
  $.ajax({
        type: "post", // use post method here 
        url: "returneye.php",
        data : {lastElement : lastNum},
        success: function (data) {
            alert(data);
            $('#valueeye').html(data);
        }
   });
   // and in php get lastnum with
   <?php 
       if(isset($_POST['lastElement'])){ // from data : {lastElement : lastNum}, in js
           echo (data);
           // then get the data from data base here
       }
   ?>
   */
}

// function to get the last element number from #showContent in my html above .. change #showContent with your div id or class you append the data inside it
function getlastelementdataattr(){
    return parseInt($('#showContent div:last').attr('data-getContent'), 10);
}

Working Demo

Upvotes: 1

Scarecrow
Scarecrow

Reputation: 4137

if you are sending the request from returneye.php to returneye.php then use following code 

<?php
    if(!empty($_GET['target'])){
        for ($i = 0; $i <= 20; $i++)
        {
            echo $i;
        }
        die();
    }
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test PHP Return</title>

    <script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
         $(document).ready(function(e) {
            $.ajax({
              type: "get",
              url: "returneye.php?target=getdata",
              success: function (data, textStatus) {
                  alert(data);
                  var eye = $('#valueeye').html(data);
                  alert(eye);
              }
           });
        });
</script>

</head>
<body>

    <div id="valueeye" ></div>
</body>
</html>

Edit according to comment made by Maanish

js

$.ajax({
      type: "get",
      url: "some_page.php",
      success: function (data, textStatus) {
          alert(data);                  
      }
});

php

some_page.php

<?php  
    $some_var = 1245;
    echo $some_var;
    die();

?>

Upvotes: 0

Related Questions