I was wondering how do I display PHP output through Jquery?

Question

I'm kinda new to jQuery and Ajax, but anyways, I was wondering, if I could get some help in displaying the PHP 0utput data using jQuery.

This is my html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Out in PHP!!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript" src="jquery1.js"></script>
<script type = "text/javascript">
$("#btnLoad").click(function(){

    $.ajax({
        type: 'POST',
        url: 'page1.php',
        success: function(data){
                 if(data != null) $("#content").text(data)
         }
     });
});

$(document).ready(function(){
    $("button").click(function(){
        $("div").empty();
    });
});
</script>
</head>

<body>

 <div id="content" style="height:100px; width:250px;background-color:yellow">
  This is some text
  <p>This is a paragraph inside the div.</p>
 </div>
 <input type="button" id="btnLoad" value="Load" />
 <button>Clear Contents </button>
</body>
</html>

This is my simple PHP file page1.php:

<?php
echo "This is the sample data to be printed";
?>

is there any way I can associate the two files, so that the output from php file is displayed in html file using Jquery and Ajax

what does not work what's the problem? $("#btnLoad").click function should be inside document.ready if you want to make it work — Robert, Jan 19 '16 at 09:03

AnkiiG · Answer 1 · 2016-01-19T09:14:55.157

0

You have placed $("#btnLoad").click() outside $(document).ready. Change your script and move it inside that then click will work :

<script type = "text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("div").empty();
    });

    $("#btnLoad").click(function(){
        $.ajax({
            type: 'POST',
            url: 'page1.php',
            success: function(data){
                     if(data != null) $("#content").text(data)
             }
         });
    });
});
</script>

edited Jan 19 '16 at 09:14

answered Jan 19 '16 at 09:06

AnkiiG

3,216
1
14
26

This reads more like a game of spot-the-difference than an answer. What did you change? Why should it solve the problem? – Quentin Jan 19 '16 at 09:12
@Quentin I have added explanation in my answer. Thanks – AnkiiG Jan 19 '16 at 09:15

score -1 · Answer 2 · answered Jan 19 '16 at 09:17

-1

Replace your javascript code from below javascript code :

$(function(){
    $("button").click(function(){
        $("div").empty();
    });
    $("#btnLoad").click(function(){
    $.ajax({
            type: 'POST',
            url: 'pager1.php',
            success: function(data){
                     if(data != null) $("#content").text(data)
             }
        });
    });
});

answered Jan 19 '16 at 09:17

Monty

1,070
7
14

Thanks it's working... but I was curious if let's say if there were multiple functions in PHP file....how can I invoke different functions and display their outputs using Ajax and Jquery – pack Jan 19 '16 at 17:23
@pack If my answer solved your problem. Vote me. Please write a new question for your another question, i'll give answer there. – Monty Jan 20 '16 at 05:47

I was wondering how do I display PHP output through Jquery?

2 Answers2