移動工作jQuery的自動完成代碼到一箇中央文件打破了代碼

Question

我一直在努力，我的測試頁面，它正在這裏測試的jQuery autcomplete功能：http://www.problemio.com/test.php（只需鍵入「豪」，看看它的工作）。

當我得到它的工作，我複製的代碼，我導入中央JS文件。然後，它停止工作，你可以看到它停在3號表單域在這裏工作：http://www.problemio.com/add_problem.php

下面是我複製的代碼：

function log(message) 
{ 
    $("<div/>").text(message).prependTo("#log"); 
    $("#log").scrollTop(0); 
} 

$("#category_field").autocomplete({ 
    source: "/problems/get_categories_ajax.php", 
    minLength: 2, 
    select: function(event, ui) 
    { 
      log(ui.item ? 
       ui.item.value : 
        "Nothing selected, input was " + this.value); 
    } 
}); 

$('#add_category').click(function() 
{ 
     alert ("in add category"); 
     // Now have to get value of the text entry area 
     var category = $("#category_field").val(); // Works 

     var text_area = $("#log").val();   
     alert ("text_area: " + text_area); 

     // Should append to value of textarea what is in the category 
     if (text_area) 
     { 
      alert ("text area NOT EMPTY: " + text_area + " and category: " + category); 
      text_area = text_area + " , " + category;  
     } 
     else 
     { 
      //alert ("text area EMPTY: " + text_area + " and category: " + category); 
      text_area = category;   
     }  

     // Now replace old text_area with new one 
     $("#log").val(text_area); 

     // Now reset the text field 
     $("#category_field").val(""); 
}); 

$('#category_form').bind('submit',function() 
{ 
     // Get the variables 
     var problem_id = 1; 
     //var categories = $("#log").text();  
     var categories = $("#log").val(); 

     var dataString = 'problem_id='+ problem_id + '&categories=' + categories; 
     alert ("Data string: " + dataString); 

     // Now check if the problem_id or solution are empty 
     if(!categories) 
     { 
      $('#categories_success').fadeIn(200).hide(); 
      $('#categories_error').fadeOut(200).show();   
     } 
     else 
     { 
      // Now check if the user is logged in 
      $.ajax({ 
        type: "POST", 
        url: "/auth/check_login.php", 
        dataType: "json", 
        success: function(data) 
        { 
         // If we are logged in, now can make a call to add the categories 
         $.ajax({ 
          type: "POST", 
          url: "/problems/add_categories_ajax.php", 
          data: dataString , 
          success: function(data) 
          { 
           $('#categories_success').fadeIn(200).show(); 
           $('#categories_error').fadeOut(200).hide();  

           $("#log").val(""); 
          }, 
          error: function(data) 
          { 
           alert ("error"); 
           //if (data.status == 200) 
           //{ 
           //  $('.add_message_success').fadeIn(200).show(); 
           //  $('.add_message_error').fadeOut(200).hide(); 

           //  $('#comments').html(data);      
          // } 
           //alert ("could not add attempted solution to the database"); 
          } 
         });      

        } , 
        error: function(data) 
        { 
         // Error case for checking if user is not logged in 
         $("#loginpopup").dialog(); 

         return false; 
        } // End of error 
      }); // End of the first AJAX call.     
     } // End of else in this AJAX jQuery call.  

     return false; 
    }); 

任何想法，爲什麼當我複製過來的代碼爆發？ JavaScript控制檯顯示一個來自TinyMCE庫的css文件的錯誤，它找不到，但除此之外，一切似乎都很好。

Answer 1

會發生什麼情況是，缺少的CSS文件似乎是拋出一個錯誤加載JS時。 TinyMCE可能需要這個文件才能運行，所以它可能會拋出錯誤。由於沒有處理的錯誤，你的JS的其他部分並沒有在瀏覽器

$("#category_field").autocomplete({ 
    source: "/problems/get_categories_ajax.php", 
    minLength: 2, 
    select: function(event, ui) 
    {alert ("1"); 
      log(ui.item ? 
       ui.item.value : 
        "Nothing selected, input was " + this.value); 
    } 
}); 

的控制檯手動運行您自動完成代碼執行，從而自動完成你永遠不會在大呼過癮。

可以證實這一點在控制檯中運行以上命令激活了自動完成功能。

您可以通過確保CSS文件不存在，或者與周圍一個try/catch錯誤呼叫並恢復修復錯誤。