0

私はまったく一緒にjqueryを初めて使用します。基本的に、私が行ったことは、ajax 呼び出しから取得した画像から作成された動的ギャラリーを作成することです。画像は順序付けられていないリストに追加され、画像ギャラリーに固有の特別な css 形式を受け取ることになっています。他の ul リストはそのままです。すべてがうまく機能しますが、ギャラリーを表示すると、適切な css フォーマットが画像にレンダリングされません。私はstackoverflow全体を検索し、.listview('refresh');を含む同様の問題に提示された多くのオプションを試しました。ajaxが完了した後：および他のいくつかのソリューション。何も機能していません。ページから移動して戻ると、書式設定が適用されます。これが私が取り組んでいる次のコードです。

ギャラリーへのリンク

$('ul#fieldList').append('<li id="albums"><a href="#Gallery1?" onClick="GetUserPhotos('+value.album_id+'); return false;"><img src="images/1.jpg"><h3>'+value.name+'</h3><p>'+value.description+'</p></a><div class="ui-li-count">'+value.count+' Images</div></li>');

onClick 関数

function GetUserPhotos(albumid) {

    console.log("Get User Photos Function Ran");
    var get_user_photos_album_id = albumid;
    var get_user_photos_client_id = window.localStorage.getItem("client_id");
    var get_user_photos_user_id = window.localStorage.getItem("user_id");
    console.log("Assign Variables from local storage");
    var formData = {
        user_id: get_user_photos_user_id,
        client_id: get_user_photos_client_id,
        album_id: get_user_photos_album_id
    }; //Array 

    $.ajax({
        url: "client_photos.php",
        type: "POST",
        data: formData,
        async: "false",
        success: function (data) {
            $("ul#photosList li#photos").remove();
            $("#test1").html('');
            //data - response from server
            var PhotoData = $.parseJSON(data);
            console.log("PhotoData json data parsed");
            $("ul#fieldList li#albums").remove();
            $.each(PhotoData, function (key, value) {
                $('ul#photosList').append('<li id="photos"><a rel="' + value.album + '" href="http://www.myphotoshootapp.com/cms/uploads/' + value.client_id + '/' + value.album + '/' + value.id + '.' + value.ext + '" class="swipebox" title="' + value.fullname + '""><img src="http://www.myphotoshootapp.com/cms/uploads/thumbs/' + value.client_id + '/' + value.album + '/' + value.id + '.' + value.ext + '" alt="' + value.fullname + '" /></a></li>');
            });
            Swipe();
        },
        complete: function () {
            $('#ul#photosList').listview('create');
            $.mobile.changePage("#Gallery1");
        }
    });
}

DIV アイテムの追加先

<div data-role="content">
  <ul data-role="listview" data-inset="true" id="photosList">
     <li id="title">Photos</li>
     <div class="main" id="test1"><img src="images/ajax-loader.gif" alt="Loading..." /></div>
  </ul>
</div>

そしてCSS

li#photos { float: left !important; width: 33.33333333% !important; }
li#photos a { display: block !important; margin: 5px !important; border: 1px solid #3c3c3c !important; }
li#photos img { display: block !important; width: 100% !important; height: auto !important; }

私が言ったように、私はこれにかなり慣れていないので、ここで他の多くの質問を読んで多くのことを学びましたが、これは理解できません. 助けてくれてありがとう。

最初の訪問では、ui-btn、ui-btn-icon-right、ui-li-has-arrow、ui-li、ui-li-has-thumb、ui-btn-up-c などの追加のクラスの束が追加され、2 回目は通常の書式設定のみが適用されます。

最初の訪問 この画像は、最初のページ訪問時に css フォーマットがどのように見えるかを示しています。

2 回目の訪問 この画像は、ページに戻ったときに CSS の書式設定がどのように見えるかを示しています (LIKE ITS SUPPOSED TO) ここに画像があります

4

0 に答える 0