Ajax request with OOP PHP

2554 views php
3

It is a simple application which shows an image based on the input result as well as its occupation and name when hovered. I am receving the following errors: Notice: Undefined index: src in C:\xampp\htdocs\Ajax\Ajax_image\PHP_AJAX.php and Notice: Undefined index: name in C:\xampp\htdocs\Ajax\Ajax_image\PHP_AJAX.php

I am farely new to Ajax so any help is appreciated.

$(document).ready(function() {
    $('#view').click(function() {
        var namevalue = $('#name').val();
        $.post("PHP_AJAX.php", {
            name: namevalue
        }, function(data) {
            $('#bar').html(data);
            $("img").hover(function(e) {
                var s1 = "<img src=";
                var s2 = " width='110px' height='120px' />";
                var srcval = s1.concat($(this).attr('src'), s2);
                $.post("PHP_AJAX.php", {
                    src: srcval
                }, function(data1) {
                    $('#info').css({
                        top: e.clientY,
                        left: e.clientX,
                        backgroundColor: 'yellow'
                    }).fadeIn().html(data1);
                });
            }, function() {
                $('#info').fadeOut();
            });
        });
    });
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="PHP_AJAX.js"></script>
    <style>
        #info {color:black; border:5px blue solid; width:150px; height:100px;display:none;position:absolute;}
    </style>
</head>
<body>
    <p id='bar'>Please enter name to view image! </p>
    <p id='info'>info</p>
    <form>
    <p>Name : <input type='text' name='name'id ='name'/></p>
    </form>
    <button id='view' name ='view'>View</button>
</body>
</html>

class Person
{
// some properties
    private $name;
    private $occupation;
    private $image;
// constructor
    public function __construct($nameval, $occuval, $imgval)
    {
        $this->name       = $nameval;
        $this->occupation = $occuval;
        $this->image      = "<img src=" . $imgval . " width='110px' height='120px' />";
    }
// get name property
    public function getname()
    {
        return $this->name;
    }
// get occupation property
    public function getoccupation()
    {
        return $this->occupation;
    }
// get image property
    public function getimage()
    {
        return $this->image;
    }
}

$obj1 = new Person("Picasso", "Painter", "pi1.jpg");
$obj2 = new Person("Ronaldo", "Football Player", "ronaldo.jpg");
$obj3 = new Person("Picasso", "Teacher", "pi2.jpg");
$obj4 = new Person("Madonna", "Singer", "madonna.jpg");
// storing objects in an array
$arr   = array($obj1, $obj2, $obj3, $obj4);
$count = 0;
for ($i = 0; $i < 4; $i++) {
// if name already exist
    if ($arr[$i]->getname() == $_POST['name']) {
        echo "<p>Image of " . $arr[$i]->getname() . "</p>";
        echo "<p>" . $arr[$i]->getimage() . "</p>";
        $count++;
    }
    if ($arr[$i]->getimage() == $_POST['src']) {
        echo "<p>Name: " . $arr[$i]->getname() . "</p>";
        echo "<p> Occupation:" . $arr[$i]->getoccupation() . "</p>";
        $count++;
    }
}
// if name doesn't exist
if ($count == 0) {
    echo "<h3> NOT FOUND! </h3>";
}

answered question

1 Answer

6

you should check isset() before compare ex. $arr[$i]->getname() == $_POST['name']

so:

if (isset($_POST['name']) && $arr[$i]->getname() == $_POST['name']) {
    ...
}

if (isset($_POST['src']) && $arr[$i]->getimage() == $_POST['src']) {
    ...
}

posted this

Have an answer?

JD

Please login first before posting an answer.