Jquery $ .get gibt Daten zurück, nachdem die Funktion ausgeführt wurde

Question

Ich hoffe, dass jemand mir hier helfen kann.

Ich habe folgende in jquery:

$(document).on('turbolinks:load', function() { 
    $("body").on('click', '#submit_roster_item_add', function() { 
     $.get("add_roster_item_info", { 
      id: $("#roster_id").text(), 
      first_name: $("#first_name").val(), 
      last_name: $("#last_name").val(), 
      email: $("#email").val(), 
      youth: $('input[name="roster_item[youth]"]:checked').val(), 
      parent_last_name: $("#parent_last_name").val(), 
      parent_first_name: $("#parent_first_name").val(), 
      parent_email: $("#parent_email").val(), 
      parent_type: $("#parent_type").val() 
     },function(data) { 
      $("#roster_panel").html(data); 
      alert($("#status_message").val()); 
     }); 
    }); 
}); 

Die Funktionssteuerung auszuführen richtig ist, kehrt der HTML das Element #status_message enthält. Die Warnung wird jedoch ausgelöst, bevor die Daten gepostet wurden. Die Funktion wird ordnungsgemäß zurückgegeben. Wie strukturiere ich den Code so, dass die Warnung ausgelöst wird, nachdem die Funktion zurückgegeben wurde?

Dies ist das Teil, die wiedergegeben wird:

<div id = 'roster_item_content'> 
    <%= semantic_form_for @roster_item do |form| %> 
     <h3>Add a counselor or youth participant</h3> 
     <div id="status_message"><%= @status_message %><%= @error_count %></div> 
     <%= form.inputs do %> 
      <%= form.input :youth, label: 'Type of Participant', as: :radio, collection: [['Adult counselor', false, {checked: true}], ['Youth', true]] %> 
      <%= form.input :first_name, input_html: {id: 'first_name'} %> 
      <%= form.input :last_name, input_html: {id: 'last_name'} %> 
      <%= form.input :parent_first_name, style: 'display:none', required: true, label: 'Responsible adult first name', input_html: {id: 'parent_first_name'} %> 
      <%= form.input :parent_last_name, required: true, label: 'Responsible adult last name', input_html: {id: 'parent_last_name'} %> 
      <%= form.input :parent_email, required: true, label: 'Responsible adult email', input_html: {id: 'parent_email'} %> 
      <%= form.input :parent_type, required: true, label: 'Responsible adult role', input_html: {id: 'parent_type'} , as: :select, collection: Constant::PARENT_TYPES, include_blank: false %> 
      <%= form.input :email, input_html: {id: 'email'} %> 
     <div class="button_container" > 
     <input id="submit_roster_item_add" type="button" value = "Send forms packet" class = "button" > 
     </div> 
     <% end %> 
    <% end %> 
</div> 

Turbolinks und jquery.turbolinks installiert sind.

Answer 1

val() ist für das Abrufen und value auf Formular-Steuerelemente Einstellung aber #status_message ist ein <div>

text() Versuchen Sie stattdessen

alert($("#status_message").text());