Why is my JQuery AJAX function not working properly?

Question

Trying to insert a car image from one of my databases into my webpage

get_new_car_pictures:

$make = $_REQUEST['make'];
$model = $_REQUEST['model'];

$query = "SELECT * FROM database_new WHERE make = $make AND model = $model";
$car = $db->get_row($query);

$img = $car['img_url'];


echo "<img src=".$img." />";

ajax function:

  function insertImageAJAX(){
      return $.ajax({
         type: 'GET',
         url: '/ajax/get_new_car_pictures.php',
         data: "model=" + params.model + "&make=" + params.make,
         success: function(data){
            $("#car-image".html(data));
         }
     }
  });

car-image is the div where I want the image to appear

I have tried to follow Ajax tutuorials online but for whatever reason, this is not working...

Answer 1

use concatenation on query and varchar has to be in single quotation

$query = "SELECT * FROM database_new WHERE make = '".$make."' AND model = '".$model."'";

and also fix js

function insertImageAJAX(){
  return $.ajax({
     type: 'GET',
     url: '/ajax/get_new_car_pictures.php',
     data: {'model':params.model, 'make': params.make},
     success: function(data){
        $("#car-image").html(data);
     }
 }
 });

Answer 2

For one thing, you've misplaced a parenthesis:

$("#car-image".html(data));

should be

$("#car-image").html(data);

Answer 3

Try adding an error callback to take a closer look at what's going on. jQuery Ajax error handling, show custom exception messages

Also, I'd recommend setting the image's src attribute with the response instead of setting its HTML.

Let me know what the error says and we can go from there.