CODEWITHSUNDEEP
phpjqueryajaxhtml
jldavis76
jldavis76

Reputation: 822

Removing dynamic dropdown options after JQuery AJAX request

I have a form that includes a dropdown box. This dropdown's options are filled dynamically, using PHP, from my database. When my form is submitted, the row containing the ticketId selected in the dropdown is removed from the database. What I would like is for, after the AJAX call is successful, have this list repopulate without the row that was just removed.

my form:

<form name="transferTicketForm" id="transferTicketForm">
    <div class='form-group'>
        <label for="ticket_number">Choose ticket:</label>
        <select name="ticket_number" id="ticket_number" class="form-control">
            <?php foreach ($assigned_tickets as $ticket): ?>
                <option value="<?php echo($ticket->ticketId); ?>"><?php echo ($ticket->ticketId . " - " . $ticket->headline); ?></option>
            <?php endforeach; ?>
         </select>
     </div>
     <div class="form-group">
         <label for="assignTo">Transfer to:</label>
         <select name="assignTo" id="assignedTo" class="form-control">
             <?php foreach($employees as $employee): ?>
                 <option value='<?php echo($employee->userId); ?>'><?php echo ($employee->firstName . " " . $employee->lastName);?></option>
              <?php endforeach; ?>
          </select>
      </div>
      <div class="form-group">
          <label for="transferComment">Comment:</label>
          <textarea name="transferComment" id="transferComment" class="form-control"></textarea>
      </div>
      <div class="text-center">
          <input class="btn btn-primary" type="button" id="doTransferTicketButton" value="Transfer Ticket">
      </div>
</form>

my Ajax call:

$('#doTransferTicketButton').click(function(){
      $.ajax({
          type:'POST',
          url:'<?php echo site_url();?>ticket_system/transfer_and_comment_ticket',
          data:{
              'assigned': $('#assignedTo').val(),
              'comment': $('#transferComment').val(),
              'ticketId': $('#ticket_number').val()
          },
          success: function(data){
              $target_ticket = $('#ticket_number').val();
              $('#ticket_' + $target_ticket).remove();
              $('#assigned').empty();
              $('#transferTicketOptions').slideToggle();
          }
      });
});

Things I have tried:

success: function(data){
              $target_ticket = $('#ticket_number').val();
              $('#ticket_' + $target_ticket).remove();
              $('#ticket_number').empty();
              $('#transferTicketOptions').slideToggle();
          }

and 

success: function(data){
              $target_ticket = $('#ticket_number').val();
              $('#ticket_' + $target_ticket).remove();
              $('#ticket_number')[0].reset();
              $('#transferTicketOptions').slideToggle();
          }

Neither of which work for what I'm trying to do.

Any help would be greatly appreciated. Thank you!

Upvotes: 1

Views: 1097

Answers (1)

Emil
Emil

Reputation: 1816

First make your AJAX-file echo the ticket ID when removed. This ID will be passed to the success function. And on successs run:

    success: function(data){
        $("#ticket_number option[value=data]").remove();
      }

The code is not testet, but i think it would work.

Upvotes: 1

Related Questions