Question

我一直在我的测试页面上工作并测试jQuery自动完成功能，它正在工作：http://www.problemio.com/test.php（只需输入“ho”就可以了。）

当我开始工作时，我将代码复制到我导入的中央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

当加载JS时，丢失的CSS文件似乎抛出了错误。 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包围错误调用并恢复。

将工作jQuery自动完成代码移动到中心文件中会破坏代码

1 个答案: