jQuery AJAX関数呼び出し

Question

AJAX関数を呼び出すjQueryに問題があります。基本的にユーザーが選択ボックスを変更するたびに、getSubCategories関数を呼び出す必要がありますが、何らかの理由で何も起こりません。何か案は？

ページを読み込み、getSubCategories関数内にconsole.logを追加すると、それが記録されます。

function getSubCategories() { 
    var id = $("#category").prop('selectedIndex'); 
    var selectedCategory = $("#category").val(); 
    //should change this into a response from AJAX and grab the slug from there, this is fine for now. 
    var slugOfCategory = convertToSlug(selectedCategory); 
    id++; 
    console.log('here'); 
    $.ajax({ 
     method: 'GET', // Type of response and matches what we said in the route 
     url: '/product/get_subcategories', // This is the url we gave in the route 
     data: { 
      'id': id 
     }, // a JSON object to send back 
     success: function(response) { // What to do if we succeed 
      $("#sub_category option").remove(); //Remove all the subcategory options 
      $.each(response, function() { 
       $("#sub_category").append('<option value="' + this.body + '">' + this.body + '</option>'); //add the sub categories to the options 
      }); 
      $("#category_slug").attr('value', slugOfCategory); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail 
      console.log(JSON.stringify(jqXHR)); 
      console.log("AJAX error: " + textStatus + ' : ' + errorThrown); 
     } 
    }); 
} 

function getCategories() { 
    var id = $("#type").prop('selectedIndex'); 
    var selectedType = $("#type").val(); 
    //should change this into a response from AJAX and grab the slug from there, this is fine for now. 
    var slugOfType = convertToSlug(selectedType); 
    console.log(slugOfType); 
    //add one to the ID because indexes dont start at 0 as the id on the model 
    id++; 
    $.ajax({ 
     method: 'GET', // Type of response and matches what we said in the route 
     url: '/product/get_categories', // This is the url we gave in the route 
     data: { 
      'id': id 
     }, // a JSON object to send back 
     success: function(response) { // What to do if we succeed 
      $("#category option").remove(); //Remove all the subcategory options 
      $.each(response, function() { 
       $("#category").append('<option value="' + this.name + '">' + this.name + '</option>'); //add the sub categories to the options 
      }); 
      $("#type_slug").attr('value', slugOfType); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail 
      console.log(JSON.stringify(jqXHR)); 
      console.log("AJAX error: " + textStatus + ' : ' + errorThrown); 
     } 
    }); 
} 

function convertToSlug(Text) { 
    return Text 
     .toLowerCase() 
     .replace(/ /g, '_') 
     .replace(/[^\w-]+/g, ''); 
} 

$(document).ready(function() { 

    var firstCatgegory = $("#category").val(); 
    var slugOfFirstCategory = convertToSlug(firstCatgegory); 
    $("#category_slug").attr('value', slugOfFirstCategory); 

    var firstType = $("#type").val(); 
    var slugOfFirstType = convertToSlug(firstType); 
    $("#type_slug").attr('value', slugOfFirstType); 

    $("#type").change(getCategories()); 

    $("#category").change(getSubCategories()); 
}); 

ありがとうございました。 （申し訳ありませんが、コードはちょっと面倒です、私はちょうど今までに動作するようにしようとしています）

Answer 1

コードのフォーマットではないためgetCategories（）とgetSubCategories（）this.Sorryのような変更関数内メソッドを入れてください。

<script> 
$(document).ready(function(){ 
$("#category").change(function(){ 
    getSubCategories(); 
}); 
$("#type").change(function(){ 
    getCategories(); 
}); 
}); 
</script> 

Answer 2

これは、作成しようとしているajax呼び出しが非同期であるという事実によるものです。 getSubCategories（）を呼び出すと、undefinedが返されます。これはコードが機能しない理由です。

この作業を行うには、コードを成功のコールバック関数に入れる必要があります。

<script> 
function getSubCategories() 
{ 
    var id= $("#category").prop('selectedIndex'); 
    $.ajax({ 
      method: 'GET', 
      url: '/product/get_subcategories', 
      data: {'id' : id}, 
      success: function(response){ 
      // DO SOMETHING HERE 
      }, 
      error: function(jqXHR, textStatus, errorThrown) { } 
    }); 
} 

$(document).ready(function() { 

    // This is also wrong. Currently you're passing 
    // whatever is returned from getSubCategories 
    // (which is undefined) as the callback function 
    // that the "change" event will call. This instead 
    // should be the reference to the function. Which 
    // in this case is getSubCategories 

    $("#category").change(getSubCategories); 
});