Search jQuery

jQuery Forum

Using jQuery

Arthur Ko..

Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

in Using jQuery • 4 years ago

Hello world!

I need help!!! I'm at a dead end.

I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin

Ajax request

$(document).ready(function(){

// code to get all records from table via select box

$("#employee").change(function() {

var id = $(this).find(":selected").val();

var dataString = 'empid='+ id;

$.ajax({

url: 'getEmployee.php',

dataType: "html",

data: dataString,

cache: false,

success: function(employeeData) {

if(employeeData) {

$("#heading").show();

$("#no_records").hide();

$("#emp_name").text(employeeData.employee_name);

$("#emp_photo").load(employeeData.employee_photo);//!!!!! here photo

$("#emp_salary").text(employeeData.employee_salary);

$("#records").show();

} else {

$("#heading").hide();

$("#records").hide();

$("#no_records").show();

}

});

})

});

PHP Code

<?php

include_once("db_connect.php");

if($_REQUEST['empid']) {

$sql = "SELECT id, employee_name, employee_salary, employee_photo FROM employee WHERE id='".$_REQUEST['empid']."'";

$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));

$data = array();

while( $rows = mysqli_fetch_assoc($resultset) ) {

$data = $rows;

}

echo json_encode($data);

} else {

echo 0;

}

bootstrap

<option value="" selected="selected">Select Employee Name</option>

<?php

$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee";

$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));

while( $rows = mysqli_fetch_assoc($resultset) ) {

<?php } ?>

</select></div></td>

</div>

<div class="row" id="no_records"><div class="col-sm-4">Plese select employee name to view details</div></div

plz help me!

Replies(22)

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

The most important problem is

dataType: "html",

which should be

dataType: "json",

More stuff like your invalid HTML, a <div> can not have <td> children. And your PHP code is a hacker’s dream. Look up SQL injection!

JΛ̊KE

Arthur Ko..

Re: Re: Thank you! for replay

4 years ago

I,m change on dataType: "json" but result don,t change

try to deduce text its greate.  But I cannot deduce image and

don,t understand why. Help plz

$(document).ready(function(){
    // code to get all records from table via select box
    $("#employee").change(function() {
        var id = $(this).find(":selected").val();
        var dataString = 'empid='+ id;
        $.ajax({
            url: 'getEmployee.php',
            dataType: "json",
            data: dataString,
            cache: false,
            success: function(employeeData) {
                if(employeeData) {
                    $("#heading").show();
                    $("#no_records").hide();
                    $("#emp_name").text(employeeData.employee_name);
                    $("#emp_age").text(employeeData.employee_age);
                    $("#emp_salary").text(employeeData.employee_salary);
                    $("#records").show();
                } else {
                    $("#heading").hide();
                    $("#records").hide();
                    $("#no_records").show();
                }
            }
        });
    })
});

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Open up the developer tools in your browser. Check for errors in the console tab and the network tab.

Maybe your PHP is failing. Maybe you didn’t include jQuery on your page.

JΛ̊KE

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Also, there is no picture being retrieved from the database in your code. Is there an URL to a picture somewhere?

JΛ̊KE

watusiware

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

There is "employeePhoto".

watusiware

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

I don't know what "deducing an image" means.

JSON does not support binary data. If you want to include some image file in JSON, you would have to encode it some way. The easiest (though not most efficient) is base64. You would encoded as base64 on the server, and decode in the browser.

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

While it's odd to include images in JSON, I do it in an API myself! Just not in this direction, and not in PHP (in Ruby).

I looked at the more-efficient options, and stuck with base64 for it ubiquity.

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

I made a demo on my server… It works just fine.

$(document).ready(function() {
$("#employee").change(function() {
var id = this.options[this.selectedIndex].value
var data = {
empid: id
};
$("#emp_image").removeAttr("src")
$.ajax({
url: 'getEmployee.php',
dataType: "json",
data: data,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.employee_name);
$("#emp_age").text(employeeData.employee_age);
$("#emp_salary").text(employeeData.employee_salary);
$("#emp_image").attr("src", employeeData.employee_photo)
$("#records").show();
}
else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});

The PHP returns

{id: "6", employee_name: "Elyssa McCarver", employee_salary: "$8.42", employee_photo: "https://robohash.org/officiamolestiaenostrum.png?size=50x50&set=set1"}

JΛ̊KE

jakecigar

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

And the PHP has

$sql = "SELECT id, employee_name, employee_salary, employee_photo FROM employee WHERE id='".$_REQUEST['empid']."'";

JΛ̊KE

watusiware

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Jake's solution assumes that your database stores the URL of a photo that will be separately retrieved from some website (maybe yours, maybe another).

You haven't told us what is in your database!

Since you were trying to use .load(), which takes a URL, we might GUESS that you do store a URL in your database. But it is only a guess, since you did not tell us.

.load() will load some HTML into your document. But if you want to load a reference to an image, you'd have to set the src attribute of an <img> tag. Which, BTW, you left out of the HTML you posted, so again we have to guess. (There is no id='empPhoto' in your posted HTML!)

If your database contains the ACTUAL photo (not a URL), then you either need to encode it somehow to include it in the JSON, or else make an additional PHP page that can return the photo content, and write some code to set src of an <img> to a URL to that PHP page.

jakecigar

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

If there are blobs in a database, you would normally have an URL to retrieve them. In which case the table being accessed should just have the src of the <img>, that points to the URL that retrieves the image.

If they are not blobs, they would just be URLs to images.

Encoding the image as base64 is a rookie mistake. It skips the cache and increases the file size for each response by a factor of 2-3.

JΛ̊KE

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

My paired down demo is @ Get Employee Demo.

My PHP uses sqlite3 instead of mysql, so it is not going to be the same as yours.

JΛ̊KE

watusiware

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

If you do use base64, then gzip gets you back very close to original compressed image size. There are use cases for including images in JSON, but I suppose this isn't a good one for it. If you had more than one image, and if it's unlikely a cache would ever do any good, and you need to insure that all data gets from a to b in a single "transaction", then it can make sense. (for example, when synchronizing databases).

Jake's approach makes the most sense here, though!

EXACTLY how you proceed depends on whether your database stores URLs or instead stores blobs.

Arthur Ko..

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Thank you all for your help. I changed my file but still the photo is not displayed. Look at the file please, so it will be easier to help me.

https://drive.google.com/drive/folders/1skvRFu76U06tn8OwjIX6x3tU_KpI7cb_?usp=sharing

jakecigar

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Your files don’t tell the full story. Do you really have a database? Was it loaded? Did you add an <Img> to some page? Why are the files in pieces? …

View Source on my demo. It works.

JΛ̊KE

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Also your SQL does not get any images.

	$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee WHERE id='".$_REQUEST['empid']."'";

JΛ̊KE

watusiware

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Your original PHP code posted to the forum had employee_photo in the select. Your latest version does not!

But it is still a mystery to us what you put in employee_photo! Is it a URL, or is it an actual photo in some image format?

Debug your PHP, make sure it is doing what you think it is doing. You can check what it sends to the browser by using the built-in debug/inspection tools in your desktop browser. You can view the XHRs (ajax responses) that are sent to the browser.

I notice you have some SQL that you must use to create and populate the database. But it does not create/populate an employee_photo attribute.

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

You have repeatedly used the word "deduce". We assumed it was a translation error. Do you wish to access a photo that is on your server with the employee_number in the src?

Like "images/1.jpg" ?

JΛ̊KE

Arthur Ko..

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Yes exactly! I really liked your demo, this is what I'm trying to achieve.

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Instead of

$("#emp_image").attr("src", employeeData.employee_photo)

code

$("#emp_image").attr("src","images/"+ employeeData.id + ".jpg")

or whatever expression leads to the correct src for the image.

JΛ̊KE

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

If you want to see my PHP I can share it. It is written using standard PHP PDO database calls. And it is not susceptible to "sql insertion" hacks, like your code.

JΛ̊KE

Arthur Ko..

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

Thank you guys, you helped me.

I solved the problem.

JΛ̊KE share plz for looking PHP PDO database calls.

jakecigar

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

4 years ago

<!DOCTYPE html>
<html>
<head>
<title>Get Employee Demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("#employee").change(function() {
var id = this.options[this.selectedIndex].value
var data = {
empid: id
};
$("#emp_image").removeAttr("src")
$.ajax({
url: 'getEmployee.php',
dataType: "json",
data: data,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.employee_name);
$("#emp_age").text(employeeData.employee_age);
$("#emp_salary").text(employeeData.employee_salary);
$("#emp_image").attr("src", employeeData.employee_photo)
$("#records").show();
}
else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});
</script>
<style>
#heading,#records,#no_records{display:none}
</style>
</head>
<body>
<select id="employee">
<option value="" selected="selected">Select Employee Name</option>
<?php
$db = new PDO('sqlite:emp.db');
$sql = "SELECT id,employee_name from emp";
$results = $db->query($sql) or die("database error");
foreach ($results->fetchAll(PDO::FETCH_ASSOC) as $rowNumber => $link) {
echo "<option value=" . $link['id'] . ">" . $link['employee_name'] . "</option>";
}
?>
</select>
<table>
<thead id=heading>
<tr>
<th>Name
<th>Age
<th>Salary
<th>Mugshot
</tr>
</thead>
<tbody id=records
<tr>
<td>
<div class="col-sm-3" id="emp_name">
</div>
</td>
<td>
<div class="col-sm-3" id="emp_age">
</div>
</td>
<td>
<div class="col-sm-3" id="emp_salary">
</div>
</td>
<td>
<img id="emp_image" ">
</td>
</tr>
</tbody>
</table>
<div id=no_records>
No Records
</div>
</body>
</html>

<?php
try {
$db = new PDO('sqlite:emp.db');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if($_REQUEST['empid']) {
$sql = "SELECT id,
employee_name,
employee_salary,
employee_photo,
cast(strftime('%Y.%m%d', 'now') - strftime('%Y.%m%d', employee_age) as int) as employee_age
FROM emp WHERE id=?";
$stmt = $db->prepare($sql);
$stmt->execute(array($_REQUEST['empid']));
echo json_encode($stmt->fetch(PDO::FETCH_ASSOC));
} else {
echo 0;
}
} catch (PDOException $e) {
echo 'failed: ' . $e->getMessage();
}

My database is a little different, so your queries would change.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Replies(22)

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Re: Thank you! for replay

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Re: Hello world! I need help!!! I'm at a dead end. I cannot deduce picture from database. I use Ajax(jQuery) with PHP & DB phpmyadmin Ajax request

Statistics

Tags

Actions