Ajax PHP Созданная форма не отправляется

Question

У меня есть набор из трех комбинированных окон (раскрывающихся списков), которые заполняются PHP значениями из базы данных. Я протестировал эти поля со списком, изменив отображаемую кнопку «Отправить» на type='submit' и загрузив саму страницу php. Они работают безотказно таким образом.

Однако, когда я загружаю страницу Ajax, кнопка отправки отказывается запускать функцию Ajax. Я проверил страницу, создав набор статических полей со списком html, и в этом случае Ajax запускается без помех. Однако использование комбинированных блоков, созданных на PHP, не вызывает Ajax.

Я надеюсь, что кто-то сможет пролить свет на проблему, связанную с моим кодом.

HTML & jQuery:

<div id="gallery_container">
    <ul class="new_arrivals_gallery"></ul>
    <div class="pagination"></div>
</div>
<script type="text/javascript" src="js/libs/jquery-1.6.1.min.js"></script> 
<script>

$(document).ready(function() {

    function loadData(imgFamily, imgClass, imgGender){
        $.ajax
        ({
            type: "GET",
            url: "filter_test.php",
            data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender},
            success: function(data) {
                $("#gallery_container").html(data);
            },
        });
    }
    loadData(1);  // For first time page load default results

    //Bind keypress event to Ajax call
    $('.filter').keypress(function(e) {
        if(e.keyCode == 13) {
            var imgFamily = $('#imgFamily').attr('value');
            var imgClass = $('#imgClass').attr('value');
            var imgGender = $('#imgGender').attr('value');
            //Fetch the images
            loadData(imgFamily, imgClass, imgGender);
        }
    });

    //Bind the click event to Ajax call on submit
    $("#submit").click(function(){
        var imgFamily = $('#imgFamily').attr('value');
        var imgClass = $('#imgClass').attr('value');
        var imgGender = $('#imgGender').attr('value');
        //Fetch the images
        loadData(imgFamily, imgClass, imgGender);
    })
});

PHP (хотя я не думаю, что проблема здесь кроется):

Я показываю только одно поле со списком для экономии места, и, поскольку они все одинаковы

// Queries for combo boxes
$imgFamily_query = "SELECT DISTINCT imgFamily FROM images WHERE $clause";
$imgClass_query = "SELECT DISTINCT imgClass FROM images WHERE $clause";
$imgGender_query = "SELECT DISTINCT imgGender FROM images WHERE $clause";


// Create the form and combo boxes
echo "<form name='refine' action=''>
        <fieldset><legend>Refine Results</legend>";

    // imgFamily combo box
    if($imgFamily_result = mysql_query($imgFamily_query))  {
      if($imgFamily_success = mysql_num_rows($imgFamily_result) > 0) {
        // Start combo-box
        echo "<label for='imgFamily' id='imgFamily_label'>Choose a family</label>\n
            <select class='filter' id='imgFamily' name='imgFamily'>\n
            <option value='1'></option>\n";
        // For each item in the results...
        while ($imgFamily_row = mysql_fetch_array($imgFamily_result))
          // Add a new option to the combo-box
          echo "<option value='$imgFamily_row[imgFamily]'>$imgFamily_row[imgFamily]</option>\n";
        // End the combo-box
        echo "</select>\n";
      } else { echo "No results found."; }
    } else { echo "Failed to connect to database."; }


    // Add a submit button to the form
    echo "</fieldset>
        <fieldset><input type='button' name='submit' value='submit' id='submit'></fieldset>
    </form>";

Большое спасибо за любую помощь.

Answer 1

Вот что происходит (в основном переосмысление того, что говорит @GolezTrol):

1. Загрузка страницы завершена
2. loadData (1) выполняется, но поскольку это асинхронный вызов, выполнение продолжается до извлечения элементов формы.
3. jquery выполнено $('.filter').keypress(function(e), но в этом классе еще нет элементов, поэтому привязка не выполняется.
4. $("#submit").click(function(){ такая же судьба, у нас пока нет элемента с submit id.
5. приходит ответ на вызов ajax, и функция success добавляет элементы формы в gallery_container, но привязок нет.

Что вам нужно сделать, это вызвать функции привязки событий, когда соответствующие элементы были добавлены в dom; поэтому вы должны переместить их после $("#gallery_container").html(data);:

$(document).ready(function() {

    function loadData(imgFamily, imgClass, imgGender){
        $.ajax
        ({
            type: "GET",
            url: "filter_test.php",
            data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender},
            success: function(data) {
                $("#gallery_container").html(data);
                //Bind keypress event to Ajax call
                $('.filter').keypress(function(e) {
                    if(e.keyCode == 13) {
                        var imgFamily = $('#imgFamily').attr('value');
                        var imgClass = $('#imgClass').attr('value');
                        var imgGender = $('#imgGender').attr('value');
                        //Fetch the images
                        loadData(imgFamily, imgClass, imgGender);
                    }
                });

                //Bind the click event to Ajax call on submit
                $("#submit").click(function(){
                    var imgFamily = $('#imgFamily').attr('value');
                    var imgClass = $('#imgClass').attr('value');
                    var imgGender = $('#imgGender').attr('value');
                    //Fetch the images
                    loadData(imgFamily, imgClass, imgGender);
                });
            }
        });
    }
    loadData(1);  // For first time page load default results
});

Answer 2

Вы вставляете форму и тем самым перезаписываете элементы, с которыми связано submit-событие.Вы должны повторно выполнить код, который связывает события после того, как вы вставили новую форму.

Более чистым способом было бы вернуть объект JSON или XML, содержащий только измененную информацию, и обновить текущую форму вместовставить совершенно новый, но это будет больше работы.

function loadData(imgFamily, imgClass, imgGender){
    $.ajax
    ({
        type: "GET",
        url: "filter_test.php",
        data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender},
        success: function(data) {
            $("#gallery_container").html(data);

            bindEvents(); // <---- Call it here
        },
    });
}

// Separate function
function bindEvents()
{
    //Bind keypress event to Ajax call
    $('.filter').keypress(function(e) {
        if(e.keyCode == 13) {
            var imgFamily = $('#imgFamily').attr('value');
            var imgClass = $('#imgClass').attr('value');
            var imgGender = $('#imgGender').attr('value');
            //Fetch the images
            loadData(imgFamily, imgClass, imgGender);
        }
    });

    //Bind the click event to Ajax call on submit
    $("#submit").click(function(){
        var imgFamily = $('#imgFamily').attr('value');
        var imgClass = $('#imgClass').attr('value');
        var imgGender = $('#imgGender').attr('value');
        //Fetch the images
        loadData(imgFamily, imgClass, imgGender);
    })
}

$(document).ready(function() {

    loadData(1);  // For first time page load default results

    bindEvents(); // <---- And here (where your code originally was).
});