Setting innerHTML with PHP?

Question

So basically I have this program that sets a header (id="infoHeader") at the top of the page to some text retrieved from another site. I need this however to change when a button is pressed. As you can see it currently uses a PHP script to fetch the text from a given URL but I need to fetch from a different URL when a button is pressed. So basically

Button1 press -> infoHeader = Site 1 text

Button2 press -> infoHeader = Site 2 text

Is there a way to use a button to change the innerHTML of [id="infoHeader"] so that it runs the PHP script to get the text. It is kind of difficult for me to explain, if you need I can try and give more info.

<!DOCTYPE HTML>
<html>
<head>
    <title>KSA Flight Tracker</title>
    <link rel="stylesheet" type="text/css" href="KSAStyle.css"/>    
</head>

<body>
<div id=page>

    <div id=leftPanel>
        <p id=missionsHeader>Active Missions</p>
        <p><?php include("getList.php")?></P>
    </div>

    <div id=info>
        <p id=infoHeader><?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?></p>
    </div>
</div>
</body>

But I need to run this PHP script to get the text so how would I run that with javascript? — user2758663, Feb 01 '15 at 21:43

score 1 · Answer 1 · edited May 23 '17 at 11:57

You need to use JavaScript + AJAX. JavaScript is needed to change the content of the div after the page is loaded/rendered and AJAX for loading a PHP file without the need to refresh the web page.

I recommend you to use jQuery and it's ajax function.

<!DOCTYPE html>
<html>
  <head>
    <title>KSA Flight Tracker</title>
    <link rel="stylesheet" type="text/css" href="KSAStyle.css"/>    

    <!-- include jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

    <script>
      $(document).ready(function() { // wait for the DOM to finish loading

        // button1
        $("#someID").click(function() { // element with id "someID" (your button)
          $.ajax({
            url: "getData.php", // the content of the page which you want to load
            cache: false
          }).done(function(dataFromServer) {
            $("#infoHeader").html(dataFromServer); // set the data from the server (getData.php) as the content of the element with the id "infoHeader"
          });
        }):

        // button2
        // the same as above for the other button

      });
    </script>
  </head>

  <body>
    <div id="page">

      <div id="leftPanel">
        <p id="missionsHeader">Active Missions</p>
        <p> <?php include("getList.php"); ?> </p>
      </div>

      <div id="info">
        <p id="infoHeader"> <?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?> </p>
      </div>
    </div>
  </body>
</html>

For your problem:

Here are some good resources for JavaScript, jQuery and AJAX:

JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
jQuery: http://en.wikipedia.org/wiki/JQuery
jQuery: http://www.w3schools.com/jquery/
jQuery: http://www.codecademy.com/en/tracks/jquery
jQuery + AJAX: http://www.w3schools.com/jquery/jquery_ajax_intro.asp

I just did a quick google search on all this and I don't really get how to do what I want. (I only started HTML,CSS & PHP yesterday - I am learning it pretty quickly but I am stuck). So how would I use this to change the text with 'ajax'? — user2758663, Feb 01 '15 at 22:03
Ok so I tried reading through [this](http://stackoverflow.com/a/7139219/2758663) but I still don't get what I am supposed to do. Where do I put it? What needs to be changed so it will work with my program? etc. Like I said - I am new and until 30 minutes ago had never even heard of AJAX or jQuery. — user2758663, Feb 01 '15 at 22:18
I tried reading them but it may as well be in Japanese - I just can't make any sense out of it... — user2758663, Feb 01 '15 at 22:24
Thanks this helps a lot but could I get some clarification on what to change for it to work by using these words. ID of click detecting element: "someID" | File with function: "getData.php" | PHP Funciton: "getTitle(URL)" | Text to change: "infoHeader" | — user2758663, Feb 02 '15 at 16:39

Setting innerHTML with PHP?

1 Answers1