Блог

Это вызывало у меня головную боль в течение последнего часа. В основном я проверяю localStorage, чтобы увидеть, есть ли у меня кэшированная версия строки JSON. Если я это сделаю, я загружу его и преобразоваю обратно в объект JSON. Если нет кэшированной версии, я использую Ajax и получаю объект JSON с сервера.

В любом случае, после того, как у меня есть мой объект JSON, я вызываю функцию parseDirectory, которая повторяет мои данные JSON и создает мой html. После синтаксического анализа он добавит HTML на мою страницу. Я протестировал оба метода, и они оба успешно создают мой HTML.. итак, я знаю, что мои данные JSON хороши. Я загрузил кэшированную версию данных JSON и запустил ее в JSONLint, и она была действительной.

Странная часть заключается в том, что когда я загружаю кэшированный объект JSON, функция добавления jQuery не работает. Это ДЕЙСТВИТЕЛЬНО работает, когда я загружаю его с помощью вызова Ajax. Вот код

 function loadPhoneList()

    //clearCache("Directory");

// Check if we have a cached version available

    if (isJSONCached("Directory")==true)
    {
        // We have a cached version of this module. Let's load that up
        var JSONobj = loadCachedJSON("Directory");
        parseDirectory(JSONobj);
    }
    else
    {
        $.ajax({
            dataType: 'jsonp',
            jsonp: 'jsonp_callback',
            url: 'http://www.myserver.com/directory.php',
            data: 'cname='   customername,
            success: function (data)
            {
                // Cache this new JSON info
                cacheJSON("Directory", data );

                // Parse the received JSON data
                parseDirectory(data);

            },
            error: function (errormsg)
            {
                alert(errormsg);
            }
        });
    }

    // Parse the JSON and create our content
    function parseDirectory(JSONobj)
    {
        var model_list = '';

        for (var i=0;i<JSONobj.directory_data.length;i  )
        {
            model_list  = '<li class="item item-text-wrap"><p>'   JSONobj.directory_data[i].Name   '</p><p>'   JSONobj.directory_data[i].Number   '</p></li>';
        }

        alert(model_list);

        $("#directoryList").append(model_list);
    }
}
  

HTML-это

 <div class="content-nopadding" >

    <div class="list">
        <div class="item item-divider">
            <center>Phone Directory</center>
        </div>

        <ul class="list" id="directoryList">
            <li class="filler"></li>
        </ul>

    </div>          

</div>      
  

** РЕДАКТИРОВАТЬ. Добавлен код cacheJSON **

 // Used to store a cached version of a JSON string in localStorage by Key value
function cacheJSON( key, json )
{
    // Need to convert the JSON object to a string so we can store it
    var JSONtoStr = JSON.stringify(json);

    window.localStorage.setItem(key,JSONtoStr);
}
  

В JSFiddle все работало отлично.. Поскольку я разрабатываю это на мобильном устройстве, причина заключалась в том, что DOM не был загружен до запуска JS. Я добавил обработчик событий onDeviceReady, который решил проблему.

Спасибо, что посмотрели!