Trouble Using jquery Ajax and a php script to retrieve data from mysql

Question

I am having trouble with my current web app project with displaying a simple jpg picture based on what radio button is checked using jquery ajax with a php script to communicate with mysql.

Here is my ajax.js file:

$('#selection').change(function() {
   var selected_value = $("input[name='kobegreat']:checked").val();

   $.ajax( {
       url: "kobegreat.php",
       data: {"name": selected_value},
       type: "GET",
       dataType: "json",

       success: function(json) {
           var $imgEl = $("img");
           if( $imgEl.length === 0) {
               $imgEl = $(document.createElement("img"));
               $imgEl.insertAfter('h3');
               $imgEl.attr("width", "300px");
               $imgEl.attr("alt", "kobepic");
           }
           $imgEl.attr('src', json["link"]);
           alert("AJAX was a success");
      },
      cache: false
  });
});

And my kobegreat.php file:

<?php


   $db_user = 'test';
   $db_pass = 'test1';       

   if($_SERVER['REQUEST_METHOD'] == "GET") {
       $value = filter_input(INPUT_GET, "name");
   }

   try {
       $conn = new PDO('mysql: host=localhost; dbname=kobe', $db_user, $db_pass);
       $conn->setAttribute(PDO:: ATTR_ERRMODE, PDO:: ERRMODE_EXCEPTION);
       $stmt = $conn->prepare('SELECT * FROM greatshots WHERE name = :name');
       do_search($stmt, $value);
  } catch (PDOException $e) {
      echo 'ERROR', $e->getMessage();
  }

  function do_search ($stmt, $name) {
      $stmt->execute(['name'=>$name]);

      if($row = $stmt->fetch()) {
          $return = $row;
          echo json_encode($return);
      } else {
          echo '<p>No match found</p>;
      }
  }

?>

HTML code I am trying to display my image to:

<h2>Select a Great Kobe Moment.</h2>
<form id="selection" method="get">
   <input type="radio" name="kobegreat" value="kobe1" checked/>Kobe1
   <input type="radio" name="kobegreat" value="kobe2"/>Kobe2
   <input type="radio" name="kobegreat" value="kobe3"/>Kobe3
</form>

<div id="target">
    <h3>Great Kobe Moment!</h3>
</div>

And finally my database is setup like so:

greatshots(name, link)

name         link
------       --------
kobe1        images/kobe1
kobe2        images/kobe2
kobe3        images/kobe3

I know that the php script is successfully grabbing the write data from the database because all that is display under the target div is this:

{"name":"kobe3","0":"kobe3","link":"images\/kobe3","1":"images\/kobe3"}

And I know that the ajax function is returning success because the alert for a successful ajax request alerts me when I select a radio button. So I'm not sure where I'm going wrong or how to fix my problem.

verhie · Accepted Answer · 2016-04-15 10:34:50Z

1

$imgEl.attr('src', json["link"]);

should be

$imgEl.attr('src', data.link);

answered Apr 15, 2016 at 10:34

verhie

1,3181 gold badge7 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Over a year ago

That was an error I had when I copied my code from sublime, suppose to be function(json), but json.link doesn't work either.

Michał · Accepted Answer · 2016-04-15 10:34:13Z

0

You have $imgEl.attr('src', json["link"]); and var name in function is data, try $imgEl.attr('src', data.link);

answered Apr 15, 2016 at 10:34

Michał

6415 silver badges9 bronze badges

2 Comments

Scott Over a year ago

That was an error I had when I copied my code from sublime, suppose to be function(json), but json.link doesn't work either.

Michał Over a year ago

I've run your js on local browser and looks ok, check in dev tools if images exists and you have access to them. Try to load in webrowser like localhost/images/kobe3 and check if they are there (maybe you are missing extension? like .png, .jpg?)

Kishore Barik · Accepted Answer · 2016-04-15 10:52:59Z

0

1 . change $imgEl.attr('src', json["link"]); to $imgEl.attr('src', data.link);

2 . append the image to your DOM, by putting below code after you assign source to image element(above code).

document.getElementById('target').appendChild($imgEl);

Assuming target to be div id where you want to display image.

edited Apr 15, 2016 at 10:52

answered Apr 15, 2016 at 10:43

Kishore Barik

7603 silver badges17 bronze badges

Collectives™ on Stack Overflow

Trouble Using jquery Ajax and a php script to retrieve data from mysql

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related