JQuery selectmenu не будет инициализироваться после вызова ajax - PullRequest
Новая
       31

JQuery selectmenu не будет инициализироваться после вызова ajax

1 голос
/ 12 марта 2012

Я использую виджет filmenmentgroup JQuery selectmenu. Виджет инициализируется в разделе заголовка страницы. Когда страница загружается в первый раз, Jquery успешно загружает виджет, но после вызова ajax (отправка формы с использованием POST) виджет selectmenu перестает работать (не инициализируется). У меня была та же проблема с использованием полей ввода текста для отправки формы при нажатии клавиши ввода, но затем я использовал метод делегата, чтобы прикрепить обработчик события к выбранным элементам. И это сработало. Поэтому мой вопрос: как я могу повторно инициализировать selectmenu после вызова AJAX. Может быть, я могу использовать тот же метод делегата для инициализации. Я гуглил, но не нашел никаких событий JQuery, которые инициализируют виджеты. Вот фрагмент кода 

<head>
<script type="text/javascript">
$(document).ready(function() 
{
    $('select').selectmenu
        ({
            width: 70,
            style: 'dropdown',
            menuWidth: 100,
            maxHeight: 400,
            change: function() 
                {
                    $(this).parents('form').submit();
                }
        });

    $('body').delegate('.submit', 'keydown', function(e)
        {
            if (e.keyCode == 13) 
                {
                    $(this).parents('form').submit();
                    return false;
                }
        });

    $('#regFormID').submit(function()
        {
            $.ajax(
                {
                    type: 'POST',
                    url: 'index.php',
                    data: $(this).serialize(),
                    error: function(xml, status, error) 
                    {
                        $('#dataFilterID').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
                    },
                    success: function(data, textStatus, jqXHR)  
                    {
                        $('#dataTableID').html($(data).find('#dataFilterID').html());                                                                   
                    }                                                                                   
                });
            return false;
        }   
});
</script>         
</head>

<body>
<div id="#dataFilterID">
<form id="regFormID" class="reg-form" name="regForm" method="POST" action="">
    <select class="select" id="Filter-dbPage-count" name="Filter-dbPage-count">
    <option selected="selected" value="30">30</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="150">150</option>
    <option value="200">200</option>
    </select>
<input type="text" value="" class="submit " id="Filter-dbField-1" name="Filter-dbField-1">
<input type="text" value="" class="submit " id="Filter-dbField-2" name="Filter-dbField-2">
<input type="text" value="" class="submit " id="Filter-dbField-3" name="Filter-dbField-3">
</form>
</div>    
</body>

1 Ответ

0 голосов
/ 12 марта 2012

повторная привязка при успешном обратном вызове 

   success: function(data, textStatus, jqXHR)  
    {
    $('#dataTableID').html($(data).find('#dataFilterID').html());  
    $('select').selectmenu
            ({
                width: 70,
                style: 'dropdown',
                menuWidth: 100,
                maxHeight: 400,
                change: function() 
                    {
                        $("select").parents('form').submit();
                    }
            });                                                                     
          }
...