Member Avatar for Kunyepa

Hello,

New to programming and have been trying to use PHP and jQuery or AJAX to accomplish the task listed in the title. I'm using an MVC type of approach and have a page to remove wines in the view directory, the controller for the remove wine page in the controller directory, a wine class and Data Acess page in the model directory. The dropdown list in the form is to allow the user to select a wine and directly underneath the results of the details of that selected wine shall appear (as either a table row, or list item elements). I have the code I have been working on below but would like advice on how to tackle this.

PHP RemoveWine Form

        <form action= "" method="POST">

          <tr>
            <td>Select Wine to Remove:     </td>

            <td>

              <select id='wineNameSelect' name='wineName'">

                <?php
                                $description= "";
                                $wineListing = getWinesByDescription($description);

                            foreach ($wineListing as $wineID=>$description) :
                                    echo "<option value='" . $description->wineID ."'>" . $description->description ."</option>";
                             endforeach
                             ?>

                </select>
            </td>
        </tr>
      </table><p><br>
        <center><input type="submit" name= "removeWineButton" value="Remove Wine"></center><p><p><p><p>
      </form>

jQuery Script in a JS File

  $(document).ready(function(){
  $("#wineNameSelect").prepend("<option value='' selected='selected'> </option>");
  });
  $("#wineNameSelect").change(function(){
    var description = $(this).find(':selected').data('description');
    console.log(description);
    var content = "";
    $.each(description, function(key,value){
      content += "<li>"+value.wineID+"</li>"
            +"<li>"+value.description+"</li>"
    });
      $("#results").html(content);
  });

Added to the head of the page including the Form

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="../View/removeWine.js"></script>
Edited by Kunyepa
  • 2 Contributors
  • 1 Reply
  • 194 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by The Diamonds

Dani AI

Generated

Short diagnosis and a practical plan that builds on ' points: the current page is almost there but has three common issues that prevent the dropdown details from appearing reliably — the <select> markup has a stray quote, the change handler appears outside the DOM-ready scope, and the JS expects .data('description') when the rendered <option> elements do not carry any data-* attributes. Two robust ways to show details are (A) embed the detail data in the page (data-attributes or a small JSON map) for fast client-side lookup, or (B) fetch the selected wine on change from the controller as JSON (recommended when the list is large or details may change).

Example AJAX flow (client + minimal server response) — place this script after jQuery and inside a DOM-ready handler:

// client: request details for selected id and render safely
$('#wineNameSelect').on('change', function () {
  var id = this.value;
  if (!id) { $('#results').empty(); return; }
  $.getJSON('/controller/wineDetails.php', { id: id })
    .done(function (data) {
      if (data.error) { $('#results').text('Not found'); return; }
      var html = '<ul>'
        + '<li>ID: ' + escapeHtml(data.wineID) + '</li>'
        + '<li>Description: ' + escapeHtml(data.description) + '</li>'
        + '</ul>';
      $('#results').html(html);
    })
    .fail(function () { $('#results').text('Error fetching details'); });
});

And a minimal server-side contract (wineDetails.php) should return JSON with correct headers and server-side validation:

<?php
header('Content-Type: application/json; charset=utf-8');
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
$wine = getWineById($id); // return assoc array or null
echo json_encode($wine ?: ['error' => 'not found']);

Small but important notes: keep the change handler inside DOM-ready; include a placeholder option with empty value to avoid immediate selection; always escape HTML inserted from JSON to prevent XSS (use a small client escape helper); validate and authorize deletions server-side and use CSRF protection for the Remove action. For small static lists, embedding a JSON map or adding data-* attributes to each option avoids an extra request; for larger or frequently changing data, use the AJAX approach above.

Member Avatar for The Diamonds

Hi,

I can't give you a full answer since you didn't post your full code, but I can give you a few advices that would help you figure out the issue in your code.

In your php code, I suppose that you are using 'getWinesByDescription' to get an array of class 'wine' and will give you full list by default if you don't pass params to it.

I also assume that "wineID" & "description" are both properties in the class "wine".
In that case your 'foreach' loop should be something like :

foreach ($wineListing as $item) :
  echo "<option value='" . $item->wineID ."'>" . $item->description ."</option>";
endforeach;

Now, let's move to the javascript part, you can't select more than 1 item at the same time, so if you want to show the description of the selected item in 'results' span you can use code similar to:

$("#wineNameSelect").change(function(){
  var selected = $(this).find('option:selected');
  console.log(selected.text());
  var content = selected.val() + ": " + selected.text();

  $("#results").html(content);
});

You didn't post your Ajax part or the form submit part, if you need more help please don't hesitate.

Edited by The Diamonds
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.