इतिहास एपीआई के साथ वापस और आगे बटन का उपयोग करना

Question

मैं निम्नलिखित परीक्षण आवेदन किया है: http://dev.driz.co.uk/ajax/

आप लिंक क्लिक कर सकते हैं jQuery AJAX का उपयोग कर अन्य पन्नों में लोड करने के लिए और वहाँ दो प्रकार, globalTabs और localTabs में जो लोड कर रहे हैं विभिन्न पैनलों में सामग्री। नोट: कि प्रत्येक पृष्ठ वास्तव में पूर्ण पृष्ठ है, लेकिन हम केवल उस सामग्री को पकड़ते हैं जिसे हम jQuery खोज विधि का उपयोग करना चाहते हैं।

इसे बढ़ाने के लिए मैं HTML5 इतिहास API (क्रॉस-ब्राउज़र के लिए History.js) का उपयोग कर रहा हूं।

शीर्षक और यूआरएल ठीक बदलते हैं और इतिहास स्टैक को सफलतापूर्वक धकेल दिया जा रहा है और जब मैं बैक और फॉरवर्ड बटन का उपयोग करता हूं तो यूआरएल और शीर्षक वापस लौटता है।

अब जटिल हिस्सा पिछले राज्य की सामग्री में वापस लोड हो रहा है और सही प्रकार को अधिक जटिल लोडिंग उदा। वैश्विक या स्थानीय AJAX। इसे प्राप्त करने के लिए मुझे लगता है कि मुझे दोनों डेटा और प्रकार को पुश स्टेटस में पास करने की आवश्यकता है ताकि इसे पॉपस्टेट के लिए दोबारा उपयोग किया जा सके ...

क्या कोई मुझे सही दिशा में इंगित करने में मदद कर सकता है? मेरे पास काम करने वाले सभी पहले भाग हैं, केवल एजेक्स प्रकार को पुशस्टेट में पास करने का एक मामला है और फिर इसे पॉपस्टेट परिवर्तन के साथ पुन: उपयोग करना है।

नोट::

प्रकार और डेटा पारित करने के लिए मेरी योजना को दिखाने के लिए इस प्रकार यह मैं इसे फिर से लिखने पर सुधार करने के लिए अपरकेस इतिहास है, क्योंकि मैं History.js

var App = { 

    init: function() { 

     $(document).ready(function() { 

      $('.globalTabs li a').live('click', function (e) { 
       e.preventDefault(); 
       App.globalLoad($(this).attr('href')); 
      }); 

      $('.localTabs li a').live('click', function (e) { 
       e.preventDefault(); 
       App.localLoad($(this).attr('href')); 
      }); 

     }); 

     window.addEventListener('popstate', function(event) { 

      // Load correct content and call correct ajax request... 

     }); 

    }, 

    localLoad: function (url) { 

     $.ajax({ 
      url: url, 
      success: function (responseHtml) { 
       $('.localContent').html($(responseHtml).find('#localHtml')); 

       $data = { $(responseHtml).find('#localHtml'), 'local'}; 

       History.pushState($data, $(responseHtml).filter('title').text(), url); 
      } 
     }); 

    }, 

    globalLoad: function (url) { 

     $.ajax({ 
      url: url, 
      success: function (responseHtml) { 
       $('.mainContent').html($(responseHtml).find('#globalHtml')); 

       $data = { $(responseHtml).find('#globalHtml'), 'global'}; 

       History.pushState($data, $(responseHtml).filter('title').text(), url); 
      } 
     }); 

    } 

}; 

App.init(); 

उपयोग कर रहा हूँ

अद्यतन: इस प्रश्न को स्पष्ट करने के लिए, वे दो समस्याएं हैं जिनसे मैं सहायता चाहता हूं।

1.) AJAX अनुरोधों के साथ काम करने वाले बैक और फॉरवर्ड बटन प्राप्त करें ताकि वे सामग्री डेटा में सही डेटा वापस लोड कर सकें।

2.) पुशस्टेट विधि के साथ सामग्री को पास करके सही क्षेत्र में सामग्री लोड करना ताकि यह पता चल सके कि यह वैश्विक div या स्थानीय div अनुरोध है या नहीं।

Answer 1

डेटा ऑब्जेक्ट गलत है, यही कारण है कि आपको वह समस्या मिलती है। एक वस्तु कुंजी के द्वारा परिभाषित किया गया है, को महत्व देता जोड़ी:

object = {key:'value'}; 
$data = { text:$(responseHtml).find('#globalHtml'), type:'global', url:'the_url'}; 

नहीं

$data = { $(responseHtml).find('#globalHtml'), 'global'}; 

वस्तु परिभाषा का उपयोग करते हुए आप अपने डेटा वापस इतिहास का उपयोग मिल जाएगा।getState()

History.Adapter.bind(window,'statechange',function(){ 
    var data = History.getState().data; 
    if(data){ 
     var html = data.text; 
     var type = data.type; 
     var type = data.url; 
     if(html && type){ 
      if(type == 'global'){ 
       // just change html 
       $('.mainContent').html(html); 
       // call the App object's function 
       if(url) App.localLoad(url); 
      }else{ 
       $('.localContent').html(html); 
      } 
     } 
    } 
}) 

नोट:

• जब statechange घटना के निकाल दिया मिलता है किसी भी डेटा को ajax कॉल
• यह सिर्फ भी शीर्षक बदलने किए बिना ajax कॉल अनुकरण करने के लिए सक्रिय कर देगा मौजूद है , मुझे लगता है कि यह

संपादित को कवर किया जाएगा

• डेटा वस्तु वास्तव में History.getState() से लिया जाता है। डेटा नहीं History.getState()
• संग्रहीत वस्तु के लिए एक और परम जोड़ा यूआरएल
• संरक्षित करने के लिए यूआरएल और प्रकार का उपयोग करने के लिए आप एक कॉल कर सकते onClick ईवेंट में के रूप में ही समारोह

समस्या:

Uncaught TypeError: Converting circular structure to JSON

एक वस्तु ही कहीं संदर्भित कर रहा है; इसलिए संदेश "परिपत्र संरचना"। इसका मतलब है कि आप किसी ऑब्जेक्ट को स्ट्रिंग करने की कोशिश कर रहे हैं जिसमें स्वयं का संदर्भ है, यह सामान्य रूप से डोम तत्वों के साथ होता है। , इस तरह से आप अभ्यस्त अनावश्यक भेज वस्तु (एचटीएमएल और प्रकार) और html समारोह कॉल (.html()) के लिए

$data = { html:$(responseHtml).find('#localHtml').html(), type:'local'}; 

सूचना कुंजी: आप वास्तव में

$data = { $(responseHtml).find('#localHtml'), 'local'}; 

बदल रहा पर विचार करना चाहिए डेटा, बस एचटीएमएल। आप जब यह एक डोम वस्तु के रूप में लोड हो रहा है एचटीएमएल डेटा का उपयोग करने की जरूरत है तो बस इस का उपयोग करें:

var DOM_Element_loaded = $('<div>').html(html_loaded); 

अब आप DOM_Element_loaded खोज करने के लिए डेटा एचटीएमएल शरीर में अटैच करने की जरूरत के बिना लोड में उपयोग कर सकते हैं/हेरफेर।

Answer 2

नोट: यह वास्तव में एक उत्तर से अधिक टिप्पणी है, लेकिन आपको उत्तर प्रतिक्रियाओं के साथ बेहतर वाक्यविन्यास हाइलाइटिंग मिलता है।

जब मैंने इस समस्या में भाग लिया तो मैंने यही किया। अगर मुझे सही याद है, तो इससे डबल-अनुरोध समस्या को रोका गया।

window.onpopstate = function(event) { 
    if (event.state && event.state.initialHref) { 
    // make an AJAX request 
    // URL for AJAX request is event.state.initialHref 
    } 
} 

जब मैं history.pushState()/history.replaceState() उपयोग करते हैं, मैं 1 तर्क के लिए वस्तु में एक initialHref संपत्ति को परिभाषित कर रहा हूँ। मैं इस मूल्य के लिए एक पूर्ण यूआरएल का उपयोग कर रहा हूं, रिश्तेदार नहीं।