Jquery Mobile - динамические страницы накапливаются в DOM - PullRequest
Новая
       3

Jquery Mobile - динамические страницы накапливаются в DOM

3 голосов
/ 01 апреля 2012

Я работаю над простым приложением Jquery Mobile, которое выполняет поиск, представляет результаты, а затем позволяет щелкнуть результат, чтобы перейти на динамическую страницу сведений. На странице сведений есть свернутый список, который использует вызов ajax для получения своего содержимого.

Кажется, что он отлично работает на поверхности, но когда я проверяю его с помощью Firebug, я замечаю, что каждый раз, когда вы переходите на страницу с подробностями и расширяете свертываемый список, ajax срабатывает несколько раз.

Так, например, я делаю поиск, захожу на страницу с подробностями, раскрываю свернутый список, ajax запускается один раз. Я возвращаюсь на страницу результатов, нажимаю на другой результат, перехожу на страницу сведений, раскрываю свернутый список, дважды запускается ajax и т. Д. Каждый раз, когда я раскрываю свернутый список, ajax запускается еще раз ... если я посмотрю на 10 результатов, ajax сработает 10 раз.

Может показаться, что динамические страницы накапливаются в DOM, и каждый раз, когда я нажимаю на свернутый список, он запускает все селекторы, созданные в DOM (по крайней мере, это моя теория).

Как мне убедиться, что мой AJAX срабатывает только один раз, а не несколько раз?

Я использую Jquery Mobile 1.0.1 с Jquery 1.6.4. Я использую php для получения данных.

Вот мой код для страницы поиска: 

$('form#searchCompanies').submit(function(event) {
    getSearchResultsCompanies();
    return false;
});

function getSearchResultsCompanies() {
    $.ajax({
        type: "POST",
        url: baseURL + 'server/searchCompanies.php',
        data: $("form#searchCompanies").serialize(),
        dataType: 'json',
        success: function(results){ 
            $('#companyList li').remove();
            for ( var i=0; i < results.length; i++) {
                $('#companyList').append('<li><a href="' + baseURL + 'companyDetail.htm?companyid=' + results[i].CompanyId + '" data-uid="' + results[i].CompanyId + '" class="companyDetail">' + results[i].CompanyName + '</a></li>');
            }
            $('#companyList').listview('refresh');
        }
    });
    return false;
}

$('.companyDetail').live('click', function(event) {
    //save companyid so that we can reference it on detail page
    var companyid = $(this).attr('data-uid');
    localStorage.setItem('thisCompanyId', companyid);
});

Вот код для страницы сведений: 

$('#companyDetailPage').live('pageshow', function(event) {
    var companyid = localStorage.getItem('thisCompanyId');
    $.ajax({
            type: "POST",
            url: baseURL + 'server/getCompanyDetail.php?companyid=' + companyid,
            data: {companyid: companyid},
            dataType: 'json',
            success: function(company) {
                $.each(company, function(index, company) {
                    $('#companyName').html(company.CompanyName);
                    //etc...pulls in more data to populate the page
                });
            }
        });


    //this is the call that fires multiple times
    $('#companyContacts').live('expand', function(event) {
        $('#companyContactList li').remove();
        $.ajax({
            type: "POST",
            url: baseURL + 'server/getCompanyContacts.php?companyid=' + companyid,
            dataType: 'json',
            success: function(results){ 
                for ( var i=0; i < results.length; i++) {
                    $('#companyContactList').append('<li>' + results[i].LastName + 'etc...more data</li>'); 
                }
                $('#companyContactList').listview('refresh');           
            }
       });
        return false;
    });
});

Заполняемый html div выглядит следующим образом: 

<div data-role="collapsible" data-collapsed="true" id="companyContacts" class="cmdCompanyContacts">
    <h3>Contacts (<span id="totalContacts"></span>)</h3>
    <ul id="companyContactList" data-role="listview"><li></li></ul>
</div>

Я искал разрешение в верхнем и нижнем диапазонах и пытался переработать код под разными углами, но я не смог решить эту проблему. Любая помощь будет высоко ценится. Спасибо.

Ответы [ 2 ]

0 голосов
/ 02 апреля 2012

У меня тоже была эта проблема.Я попробовал предложение, найденное здесь , но у меня все еще была проблема запуска нескольких событий после попытки этого.Вот что еще я должен был сделать.Я изменил это с этого: 

$(‘#myPage’).bind(‘pageinit’, function (event) {
$(‘#myButton’).live(‘click’, function (event, ui) {

на это: 

$(‘#myPage’).bind(‘pageinit’, function (event) {
$(‘#myButton’).click(function (event, ui) {
0 голосов
/ 02 апреля 2012

Вместо того, чтобы использовать jquery live, я хотел бы предложить вам использовать вызов функции javascript, когда вы нажимаете для изменения страницы. Запишите ваш вызов ajax в этой функции, чтобы он вызывался только один раз. Надеюсь, это поможет

...