Загрузка сообщения в JQuery Mobile - PullRequest
Новая
       11

Загрузка сообщения в JQuery Mobile

2 голосов
/ 26 января 2012

Я использую следующий код для отображения сообщения о загрузке в мобильном телефоне JQuery.А загрузка не показывается?Я не мог понять проблему.Спасибо за ваше время заранее. 

$("#AccountListPage").live('pageinit', function (event) {

   // alert('test');

    $.mobile.showPageLoadingMsg();

    listAccounts();

    $.mobile.hidePageLoadingMsg();

    //alert("Add Test");
});

Когда комментарии удалены, оповещения работают нормально.

listAccount function 

function listAccounts() {

    var soapMessage =
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">\
  <soap:Body>\
    <ReadByOrgID xmlns="http://eyepax.crm.com/Organization">\
      <OrganizationID>' + OrganizationID + '</OrganizationID>\
      <ConfigurationCode>' + ConfigurationCode + '</ConfigurationCode>\
      <Flag>' + Flag + '</Flag>\
      <LicenceOrganizationID>' + LicenceOrganizationID + '</LicenceOrganizationID>\
    </ReadByOrgID>\
  </soap:Body>\
</soap:Envelope>';
    soapMessage = $.trim(soapMessage);
    //$.mobile.pageLoading(true);
    $.mobile.showPageLoadingMsg();
    $.ajax({
        url: selectParentAccUrl,
        type: "POST",
        dataType: "xml",
        data: soapMessage,
        crossDomain: true,
        success: endListAccounts,
        error: function (jqXHR, textStatus, errorThrown) {
            $.mobile.hidePageLoadingMsg();
            alert("failure");
            console.log(textStatus);
            console.log(errorThrown);
        },
        contentType: "text/xml; charset=\"utf-8\""
    });

    return false;
}

function endListAccounts(xmlHttpRequest, status) {
    var testsss;

    console.log(xmlHttpRequest);
    console.log(status);
    console.log(Date());


    //testsss = $(xmlHttpRequest).find("Table OrganizationName:eq(0)").text();
    var result = $(xmlHttpRequest).find("OrganizationName").length
    //result = 3;

    var htmlString="";

    for (i = 0; i < result; i++) {
        htmlString = htmlString + "<li><a href='AccountDetails.html' onclick='AccountIndex="+i+"'>" + $(xmlHttpRequest).find("Table OrganizationName:eq(" + i + ")").text() + "</a></li>";


        accountConstructor($(xmlHttpRequest).find("Table OrganizationID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table ParentID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table OrganizationName:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table IncorporationNo:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table POBoxAddress:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table PhysicalAddress:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table VisitSwithboard:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table VisitFax:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table www:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table Active:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table MotherCompany:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table AccountManager:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table AccountManagerID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table VisitCountryID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table CountryID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table CategoryCount:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table ContactCount:eq(" + i + ")").text())
    }
    //alert(testsss);
    console.log('orgID : ' + testsss);
    console.log('count : ' + result);
    var b = $(xmlHttpRequest).find('vstrError').text();
    console.log('vsserr : ' + b);
    //alert('vssr : ' + b);
    $('#account_list').append(htmlString);
    $("#account_list").listview("refresh");
    console.log('account : ' + AccountArray[1].OrganizationName);
    //$.mobile.hidePageLoadingMsg();
    //$.mobile.pageLoading(true);
    $.mobile.hidePageLoadingMsg();
    // window.location = 'index.html';
    //$.mobile.changePage('index.html');

}

html page 

<!DOCTYPE html> 
<html> 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="assets/jquery.mobile-1.0.css" />

</head> 

<body> 

<div data-role="page" id="AccountListPage">

    <div data-role="header">
        <h1>CRM Mobile App</h1>
        <a href="Account.html" data-icon="arrow-l">Back</a>
    </div><!-- /header -->
<div data-role="content">

<ul data-role="listview" data-inset="true" data-filter="true" id='account_list'>

</ul>


</div><!-- /content -->
    <div data-role="footer">
        <small>&#169; 2011 EyePax IT Consulting</small>
    </div><!-- /footer -->



</div><!-- /page -->
</body>
</html>

1 Ответ

4 голосов
/ 26 января 2012

Я предполагаю, что функция listAccounts() делает что-то асинхронно, например, запрос AJAX или анимацию.

Если это так, то вам нужно поместить $.mobile.hidePageLoadingMsg() в функцию обратного вызова для вашего асинхронного кода в функции listAccounts(). Причина в том, что $.mobile.hideLoadingMsg() запускается сразу после функции $.mobile.showLoadingMsg(), настолько близко, что, вероятно, никогда не будет прорисовано.

Вот пример использования сообщения загрузки с вызовом AJAX 

function listAccounts () {
    $.mobile.showPageLoadingMsg();
    $.ajax({
        url : '<url>',
        success : function () {
            $.mobile.hidePageLoadingMsg();
        }
    });
}

$(document).delegate('#AccountListPage', 'pageinit', function () { 
    listAccounts(); 
});

Использование глобальных событий AJAX в ваших интересах

Вы можете настроить глобальные события AJAX в jQuery, чтобы при каждой отправке запроса AJAX отображалось загрузочное сообщение (и удалялось по завершении запроса AJAX): 

function listAccounts () {
    $.ajax({
        url : '<url>'
    });
}

$(document).delegate('#AccountListPage', 'pageinit', function () { 
    listAccounts(); 
}).ajaxStart(function () {
    $.mobile.showPageLoadingMsg();
}).ajaxComplete(function () {
    $.mobile.hidePageLoadingMsg();
});

Пример использования сообщения загрузки с анимацией 

function listAccounts () {
    $.mobile.showPageLoadingMsg();
    $('#ani-element').stop().animate({
        WebKitTransform : 'scale(3)'//this cales the `#ani-element` DOM element to three times it's size in webkit browsers
    }, 500, function () {
        $.mobile.hidePageLoadingMsg();
    });
}

$(document).delegate('#AccountListPage', 'pageinit', function () { 
    listAccounts(); 
});
...