Jquery मोबाइल 1.2RC-1 लोडिंग संदेश

Question

नहीं दिखा रहा है, मैं जेक्यूएम 1.2 आरसी -1, प्रारंभिक एप्लिकेशन/साइट इनिट के दौरान संदेश लोड करने और हर बार उपयोगकर्ता #index पृष्ठ पर लौटने के लिए संदेश दिखाने की कोशिश कर रहा हूं। ऐसा करने के तरीके की मेरी समझ निम्नानुसार होगी, हालांकि, यह काम नहीं कर रहा है जैसा कि मैं उम्मीद करता हूं। यह लोडिंग संदेश नहीं दिखाता है।

$('body').on('pagebeforeshow', '#index', function(){ 

    $.mobile.loading('show') 

    $('#index ul li').remove() 

    var post_data = { 
     action: 'an_action', 
     method: 'method' 
    } 

    $.ajax({ 
     type: 'POST', 
     url: ajaxurl, 
     data: post_data, 
     cache: false, 
     dataType: 'text', 
     cache: false, 
     success: function(response) { 

      $('#index ul').append(response) 

      $('#index ul').listview('refresh') 

      $.mobile.loading('hide') 

     }, 
     error: function(jqXHR, textStatus, errorThrown) { 

      console.log(' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown) 

     } 
    }) 


}) 

वैकल्पिक हल मैं यहाँ (stackoverflow) पर पाया लोड पर लोड हो रहा है संदेश दिखाने के लिए काम करता है।

$('#index').live('pageshow', function(event) { //Workaround to show page loading on initial page load 

    $.mobile.loading('show') 

}) 

समस्या मैं का सामना कर रहा हूँ जब मैं वापस #INDEX पर जाएँ और लोड हो रहा है संदेश कभी कभी हटा दिया और दूसरी बार ऐसा बनी हुई है।

यदि लोडिंग संदेश सक्रिय है और मैं वर्तमान पृष्ठ को छोड़ने के लिए एक लिंक पर क्लिक करता हूं, तो लोडिंग संदेश अपेक्षित के रूप में हटा दिया जाता है। जब मैं एक ही लिंक से #index पर वापस आ जाता हूं तो लोडिंग संदेश को ब्राउज़र में पृष्ठ को रीफ्रेश किए बिना कभी-कभी हटा दिया जाता है।

प्रारंभिक एप्लिकेशन/साइट लोड पर लोडिंग संदेश प्राप्त करने के लिए कोई और तरीका है?

अतिरिक्त जानकारी:

एक ही परिणाम के साथ सफारी iOS 6 और क्रोम, मैक OSX क्रोम, सफारी, फ़ायरफ़ॉक्स, ओपेरा चल iDevice पर परीक्षण किया गया।

jQuery मोबाइल 1.2 आर सी-1

मैं एक पृष्ठ टेम्पलेट का उपयोग कर रहा हूँ और सूचियों तो अलग पेज # आईडी के में संक्रमण में सर्वर डेटा इंजेक्शन।

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

    $.mobile.loading('show') 

}) 

$ .ajax() को सफलतापूर्वक शुरू हो जा रहा है और जैसा कि मैंने सर्वर डेटा को बदल सकते हैं पूरी की और यह लगातार आवेदन के भीतर बदल गई है:

मुझे कोई सफलता के साथ की कोशिश की है।

यह $ .mobile.loading ('छुपाएं') से भ्रमित हो रहा है क्योंकि लोडिंग संदेश को ट्रिगर और छुपाया जाना चाहिए क्योंकि प्रतिक्रिया सफल है। इससे मुझे विश्वास होता है कि यह एक कैशिंग मुद्दा नहीं है।

Answer 1

यह मैं क्या किया है, मैं वर्ग = "my_style" जो शुरू में छिपा हुआ है और जब showpageloading संदेश प्रदर्शित किया जाता है, इन दो कस्टम कार्यों यह प्रदर्शित करने और इसे छिपाने के लिए कर रहे हैं के साथ मेरी सामग्री के लिए एक div कहा:

function showCustomPageLoadingMsg(){ 
    $('.my_style').css('display','inline'); 
} 

function hideCustomPageLoadingMsg(){ 
    $('.my_style').css('display','none'); 
} 

और यह कैसे मैं कार्यों कहा जाता है: $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); और $.mobile.hideCustomPageLoadingMsg();

मेरी कोड और तुम्हारा बीच एक और अंतर यह है कि मैं ajax कॉल डाल दिया और अंदर कि समारोह कहा जाता है।रहते हैं: अपने कोड में

function test(){ 
    $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); 

$('#index ul li').remove() 

var post_data = { 
    action: 'an_action', 
    method: 'method' 
    } 

$.ajax({ 
    type: 'POST', 
    url: ajaxurl, 
    data: post_data, 
    cache: false, 
    dataType: 'text', 
    cache: false, 
    success: function(response) { 
     $.mobile.hideCustomPageLoadingMsg(); 
     $('#index ul').append(response) 

     $('#index ul').listview('refresh') 



     }, 
    error: function(jqXHR, textStatus, errorThrown) { 

     console.log(' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown) 

     } 
    }) 

} 

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

test(); 

}); 

लूप छेद:

1. कोड का एक बहुत कोड ; की पंक्ति के अंत में एक अर्धविराम याद आ रही है यह एक मानक सीमांकक
2. आप छुपा रहे है आपके आपके सफल फ़ंक्शन में HTML सामग्री को जोड़ने के बाद संदेश। यह से पहले किया जाना चाहिए।
3. आखिरकार कार्यात्मक प्रोग्रामिंग को नियोजित करने का प्रयास करें ताकि आप अलग-अलग परिदृश्यों में कोड का पुन: उपयोग कर सकें और यदि आपको कोड बदलना है तो आप लंबे समय तक आप केवल एक ही स्थान पर परिवर्तन करेंगे।
4. एक और बात यह है कि, कार्यात्मक प्रोग्रामिंग के साथ, आप उन चरों को पेश कर सकते हैं जो परीक्षण() परीक्षण की परिभाषा में उन्हें ले जा सकते हैं और उन्हें प्रतिस्थापित कर सकते हैं।

हैप्पी हैकिंग !!!