AJAX不能在選定的字段中工作 - 已更新

Question

我製作了一個帶有兩個選擇字段的表單。第一個字段由定製分類的父母填充。第二個領域填充每個人的孩子。我用AJAX來做到這一點，但似乎沒有工作。變化沒有任何反應。

下面是我的PHP代碼：

function products_selection() 
{ 
    $args = array(
     'post_type' => 'seller', 
     'taxonomy' => 'category', 
     'hide_empty' => 0, 
     'exclude'  => 1,1078,1079 
    ); 
    $products = get_categories($args); 

    if ($products) { 
    echo '<select id="products-select">'; 
     echo '<option selected="" disabled="" value="0"><span>Προϊόντα</span></option>'; 

     foreach ($products as $product) { 
     echo '<option class="product-name" id="'. $product->term_id .'">'. $product->name .'</option>'; 
     } 
    echo '</select>'; 
    } 
} 

function nomoi() 
{ 
    $args = array(
    'post_type' => 'seller', 
    'taxonomy' => 'nomos', 
    'hide_empty'=> 0, 
    'parent' => 0 
); 

    $categories = get_categories($args); 

    if ($categories) { 
    echo '<select id="nomoi-select">'; 
     echo '<option selected="0" value="-1"><span>Νομοί</span></option>'; 

     foreach ($categories as $category) { 
     $id = $category->term_id; 
     $name = $category->name; 
     $taxonomy = $category->taxonomy; 
     echo '<option class="nomos" id="'. $id .'">'. $name .'</option>'; 
     } 
    echo '</select>'; 
    } 

    echo '<select id="town-select">'; 
    echo '<option selected="" disabled="" value="0"><span>Πόλεις</span></option>'; 
    echo '</select>'; 
} 

function my_ajax() { 
    if(isset($_POST['main_catid'])) 
    { 
     $args = array(
     'order_by' => 'name', 
     'hide_empty' => 0, 
     'exclude' => 1, 
     'taxonomy' => 'nomos', 
     'name' => 'town-select', 
     'hierarchical' => 1, 
     'show_option_none' => 'Πόλεις', 
     'selected' => -1, 
     'child_of' => $_POST['main_catid'], 
     'echo' => 1 
    ); 
    $categories = get_categories($args); 
    foreach ($categories as $cat) { 
     $cat_name = $cat->name; 
     $id = $cat->cat_ID; 
     echo '<option class="town" id="'. $category->id .'">'. $category->name .'</option>'; 
    } 
    die(); 
    } // end if 
} 

我的腳本：

jQuery(document).ready(function() { 
     // Avoid conflicts 
     $ = jQuery; 

     $('#nomoi-select').change(function() { 

      $mainCat = $('#nomoi-select option:selected').attr('id'); 
      console.log('$mainCat: ' + $mainCat); 

      // call ajax 
      $("#town-select").empty(); 
      $.ajax 
      (
       { 
        url:'index.php', 
        type:'POST', 
        // Use an object literal 
        data: { 
         "action" : "my_ajax()", 
         "main_catid" : $mainCat 
        }, 

        success:function(results) 
        { 
         // alert(results); 
         alert('Successfully called'); 
         $("#town-select").append(results); 
        }, 

        error:function(exception) 
        { 
         alert('Exception: ' + exception); 
        } 
       } 
      ); 
     }); 
    }); 

以及註冊我的腳本功能：

function my_scripts() { 
    wp_enqueue_script('header-form', get_template_directory_uri() . '/js/headerform.js', array(), '1.0.0', true); 
    } 

add_action('wp_enqueue_scripts', 'my_scripts'); 

Answer 1

因爲您是使用WordPress的工作，我懷疑你可能會遇到jQuery衝突問題。要確認這一點，您可以嘗試將$的所有實例更改爲jQuery並查看是否得到相同的錯誤。

此外 - 如果您從.js文件運行此腳本，PHP不會評估，但保持URL相對應仍然工作正常。

我已經到腳本一些改變，你可以嘗試：

jQuery(document).ready(function() { 
    // Avoid conflicts 
    $ = jQuery; 

    $('#main_cat').change(function() { 

     $mainCat = $('#main_cat option:selected').val(); 

     // call ajax 
     $("#sub_cat").empty(); 
     $.ajax 
     (
      { 
       url:"/wp-admin/admin-ajax.php", 
       type:'POST', 
       // Use an object literal 
       data: { 
        "action" : "my_ajax", 
        "main_catid" : $mainCat 
       }, 

       success:function(results) 
       { 
        // alert(results); 
        $("#sub_cat").removeAttr("disabled").append(results); 
       } 
      } 
     ); 
    }); 
}); 

Answer 2

從您提供的小提琴，簡單地增加console.log('$mainCat: ' + $mainCat);（見this modified fiddle）確保change事件觸發預期。
除此之外，我們得到一個404 not found錯誤，這在小提琴示例的當前狀態中是非常正常的。

因此，確定您的問題來自Ajax調用腳本或其返回的數據。

你只是說沒有任何變化發生，沒有任何的精確性。事實上，你現在應該使用螢火蟲或類似看的錯誤信息，這可能是，無論是：

• 的URL生成錯誤：在這種情況下，你應該得到一個404 not found錯誤太
• 服務器錯誤腳本你調用：在這種情況下，你應該得到一個500 server error錯誤
• 從服務器壞（畸形）的回報：在這種情況下，你應該得到一個JS錯誤

還要注意的是：

• 它不能從服務器的空返，或者你#sub_cat元素將一個JS錯誤發生
• 在相反的（即使不太可能），也可能是一個Ajax錯誤之前已經失去了它的disabled屬性：所以確定你應該添加一個error:或always:成員到$.ajax()參數