jQuery Mobile pageCreate, sayfa revisitinde çalışmıyor

İşte senaryo: Gömülü sistem kullanıcı arayüzü için bir web uygulaması yapıyorum. Ben jQuery Mobile kullanmayı düşünüyorum çünkü inanılmaz kaygan. Dosya kalıbı başına tek bir sayfam var. Aşağıda gösterilen processinputs.html adlı bir dosyam var. Tek yapmanız gereken, kanal numarasını seçen bir sorgu parametresiyle input.html'ye gitmektir.

Sorun: processinputs.html'den inputs.html'ye ilk kez giriyorum? İ = 3 her şey harika çalışıyor. Üstbilgi ve bağlantı değiştirildi. Yine de, eğer processinputs.html 'e geri dönüp 3. giriş bağlantısına tekrar tıklarsam, olay tekrar devreye girmez ve bu yüzden başlığım güncellenmez.

Bunun, AJAX'ın önbelleğe alınmış bir sayfayı yüklemesi ve dolayısıyla "pagecreate" olayını tetiklememesi gerektiği varsayılıyor. Ayrıca "pageinit" ve "pagebeforecreate" ı da denedim. Project.js dosyasında domCache ve ajax'ı devre dışı bırakmaya çalıştım ama çalışmadığı görülüyor. Processinputs.html adresindeki Input 1 için "rel = external" kodunu kodladığımı göreceksiniz. Bu her zaman çalışır, ama jQMobile ajax yükleme ve animasyonlar nedeniyle gerçekten çok güzel. Önbelleğe alma işleminin nasıl yapılacağını anlamaya yardımcı olabilirseniz, çok fazla yükümlülüğüm olurdu.

$(document).bind("mobileinit", function(){
$.mobile.ajaxLinksEnabled=false;
$.mobile.ajaxFormsEnabled=false;
$.mobile.ajaxEnabled=false;
$.mobile.page.prototype.options.domCache = false;

});

Şimdi söz verilen processinputs.html için

<html>
<head>
    <link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/project.js"></script>
    <script src="js/jquery.mobile-1.0rc2.js"></script>

    <meta name="viewport" content="width=default-width, initial-scale=1" />
</head>
<body>
    <div data-role="page" data-add-back-btn="true" data-cache="never">
        <div data-role="header" data-position="inline">
            <div class="topTitle">Process Inputs</div>
            Home
        </div><!--  header -->

        <div data-role="content">   
            <div class="instructionText">Select an input</div>

            <div>  <!-- Container around button options -->
                Input 1
                Input 2
                Input 3
                Input 4
                Input 5
                Input 6
                Input 7
                Input 8
            </div>
        </div><!-- /content -->

        <div data-role="footer">
            <div class="footerText">A Senior Design G13 Project
        </div><!-- /footer -->

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

input.html takes the query param and uses it to modify the header of input.html as well as the query param for the three links on the page. The code is shown below:

    <link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/project.js"></script>

    <script type="text/javascript">
        $('.inputPage').live('pagecreate', function (event, ui) {
            var inum = $.urlParam('i');
            $('#inputTitle').text('Process Input ' + inum);
            $('#eqLink').attr('href','eq.html?i=' + inum)
        });

       //$('div').live('pagehide', function(event, ui){
       //      var page = jQuery(event.target);
       //      if(page.attr('data-cache') == 'never'){
       //        page.remove();
       //      };   
       //    });
    </script>
    <script src="js/jquery.mobile-1.0rc2.js"></script>
</head>
<body>
    <div data-role="page" data-add-back-btn="true" data-cache="never" class="inputPage">
        <div data-role="header" data-position="inline">
            <div class="topTitle" id="inputTitle"></div>
            Home
        </div><!--  header -->

        <div data-role="content">   
            <div class="instructionText">Select one.</div>

            <div>  <!-- Container around button options -->
                Equalization
                Compression
                Limiting
            </div>
        </div><!-- /content -->

        <div data-role="footer">
            <div class="footerText">A Senior Design G13 Project
        </div><!-- /footer -->

    </div><!-- /page -->
</body>
0
Her sayfa için tüm JavaScript'in kök sayfasında olması gerekir (index.html veya önce yüklediğiniz sayfa)
katma yazar Phill Pafford, kaynak
cevap olarak gönderildi
katma yazar Phill Pafford, kaynak
Harika! Bu yaptı. Aman Allah'ım ... basit şeyler.
katma yazar Matt Webb, kaynak

1 cevap

Her sayfa için tüm JavaScript'in kök sayfasında olması gerekir (index.html veya önce yüklediğiniz sayfa)

1
katma
@cherouvim daha sonra jQM'yi kontrol etmeniz gerekiyor: jsfiddle.net/jGT4B (jQM YÜKLENMEMİŞ) jsfiddle.net/jGT4B/1 (jQM IS yüklendi)
katma yazar Phill Pafford, kaynak
Ve kullanıcı doğrudan /input.html?i=2 adresini ziyaret ederse ne olur?
katma yazar cherouvim, kaynak