how to call php file from html/javascript?

Question

hi there i got a jquery/ajax/javascript plugin that i'm calling/running directly off my HTML website - it's basically a vertical ticker - news update ticker -

here's the code -

<script src="jquery.vticker-min.js"></script>

        <script type="text/javascript">
    $(function(){
        $('#news-container').vTicker({ 
            speed: 500,
            pause: 3000,
            animation: 'fade',
            mousePause: false,
            showItems: 3
        });
            $('#news-container1').vTicker({
            speed: 700,
            pause: 4000,
            animation: 'fade',
            mousePause: false,
            showItems: 1
        });
    });

</script>

I have a PHP file which prints out statements automatically inserted in a PHP table in the backend which is then automatically printed out on the ticker.

Here's the PHP code for that - the name of the PHP file is "getuser2.php"...

<?php

$con=mysqli_connect("localhost","root","*****","smartliving");

// check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result = mysqli_query($con,"SELECT * FROM smartliving.my_dba");

while($row = mysqli_fetch_array($result))
  {
  echo $row['LastName'] . " " . $row['FirstName'];
  echo "<br>";
  }

mysqli_close($con);
?>

the PHP file spits out the updated information in between the following tags (which contain the ticker):

<div style="overflow: hidden; position: relative; height: 125px;" id="news-container">
</div>

without reading from the PHP file, the updated code would be placed in between the two tags above... ...now how do I go about calling the php file from the javascript news update ticker and displaying it between the two div tags in the main HTML page? the javascript news ticker is ALSO called from the main HTML page but in another part of the page...

it seems simple...but its been boggling my mind for a quite a while

ok - so here's what i did - Rob M - it made NO difference what so ever!!!

here's the stuff that i did - updated code and all according to what Rob asked me to do: - i see no difference though!

From the PHP side -

<?php

$con=mysqli_connect("localhost","root","*******","smartliving");

// check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result = mysqli_query($con,"SELECT * FROM smartliving.my_dba");

while($row = mysqli_fetch_array($result))
  {
  echo $row['LastName'] . " " . $row['FirstName'];
  echo "<br>";
  }
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $response = array();
    while($row = mysqli_fetch_array($result))
    {
        array_push($response, $row);
    }
    header('Content-type: application/json');
    echo json_encode($response);
    exit;
}
mysqli_close($con);
?>

From the Javascript side:

<script src="jquery.vticker-min.js"></script>

    <script type="text/javascript">
$(function(){
    var $news_container = $('#news-container');
    $.getJSON('getuser2.php', function(data){
            $.each(data, function(item){
                $news_container.append('<div style="overflow: hidden; position: relative; height: 125px;" id="news-container">'+item.LastName+' '+item.FirstName+'</div>');
            });
    });
    $('#news-container').vTicker({ 
        speed: 500,
        pause: 3000,
        animation: 'fade',
        mousePause: false,
        showItems: 3
    });
        $('#news-container1').vTicker({
        speed: 700,
        pause: 4000,
        animation: 'fade',
        mousePause: false,
        showItems: 1
    });
});

From the HTML side:

    <div style="overflow: hidden; position: relative; height: 125px;" id="news-container">
    <ul style="position: absolute; margin: 10pt; padding: 0pt; top: 0px;">



        <li style="margin: 0pt; padding: 0pt; height: 38px; display: list-item;">
            <div>
                4) jugbit.com jquery vticker more info more info more info 
            </div>
        </li>
    <li style="margin: 0pt; padding: 0pt; height: 38px; display: list-item;">
            <div>
                1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. 
            </div>
        </li><li style="margin: 0pt; padding: 0pt; height: 38px; display: list-item;">
            <div>

                2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </div>
        </li><li style="margin: 0pt; padding: 0pt; height: 38px;">
            <div>
                3) Lorem ipsum dolor sit amet more info more info more info 
            </div>
        </li></ul>
</div>
</div>

OK...LETS SIMPLIFY THIS ONE STEP AT A TIME - HOW DO I CALL A PHP FILE ONTO A REGULAR HTML FILE ...FORGET THE JAVASCRIPT/JSON PART - THE PHP FILE RETURNS A SET OF STRINGS FROM A DATABASE IN THE BACKEND...I NEED THE STRING TO BE REPRINTED ONTO THE FRONT PAGE OF THE HTML FILE...HOW WOULD I MANAGE TO DO IT? ANY POINTERS?

getuser2.php returns the following which it extracted from an InnoDB databse in the backend:

Griffin Peter
Griffin Lois
Swanson Joseph
Quagmire Glenn

How do i get this list to be printed onto an HTML file? it would be nice if i could know!

Answer 1

As my original comment stated, AJAX is what you are looking for. It is a very important aspect of web development and I suggest you click the link I posted to the jQuery documentation and read the documentation and/or read the Wikipedia article on AJAX.

Essentially, AJAX allows you to fetch content and inject it into the DOM without reloading the page. That really is the answer to the question: 'how to call php file from html/javascript".

Specific examples of how you could use it are below.

On your PHP side, you can detect that it's an AJAX request with the following:

<?php

$con=mysqli_connect("localhost","root","********","smartliving");

// check connection
if (mysqli_connect_errno())
{
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM smartliving.my_dba");

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $response = array();
    while($row = mysqli_fetch_array($result))
    {
        array_push($response, $row);
    }
    header('Content-type: application/json');
    echo json_encode($response);
    exit;
} else {
    while($row = mysqli_fetch_array($result))
    {
        echo $row['LastName'] . " " . $row['FirstName'];
        echo "<br>";
    }
}

mysqli_close($con);
?>

In your JavaScript, you can make the request via a nice shortcut method $.getJSON (Note: I'm using the HTML you provided, but please be aware that having multiple elements with the same id is improper and will have unintended consequences, I suggest switching to a class instead):

var $ul = $('#news-container').find('ul');
$.getJSON('getuser2.php', function(data){
    $.each(data, function(item){
       $news_container.append('<li style="margin: 0pt; padding: 0pt; height: 38px;"><div>'+item.LastName+' '+item.FirstName+'</div></li>');
    });
});

This is my best guess with the information you have provided. Happy to elaborate on this if needed.