Блог

Я работал и тестировал функциональность автозаполнения 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   'amp;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 показывает ошибку с некоторым css-файлом из библиотеки TinyMCE, который он не может найти, но в остальном все кажется нормальным.

Что происходит, так это то, что отсутствующий файл 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 и восстановления.