È possibile caricare il contenuto dinamicamente tramite ajax (anziché in primo piano) nella timeline analogica

Question

sto usando the javascript simile timeline avere una sequenza temporale con campi di descrizione molto grandi. Non voglio gonfiare i miei dati di payload json iniziali con tutto questo solo quando è necessario quando lo fa clic su un elemento di timeline.

Così, per esempio, su questo risultato JSON:

{ 
'dateTimeFormat': 'iso8601', 
'wikiURL': "http://simile.mit.edu/shelf/", 
'wikiSection': "Simile Cubism Timeline", 

'events' : [ 

    {'start': '1880', 
    'title': 'Test 1a: only start date, no durationEvent', 
    'description': 'This is a really loooooooooooooooooooooooong field', 
    'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg', 
    'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm' 
    }, 

vorrei rimuovere il campo descrizione tutti insieme (o inviare nullo) dal JSON e lo hanno caricarlo OnDemand attraverso un'altra chiamata AJAX.

Esiste un modo per non inviare il campo desription giù durante il caricamento iniziale e quando un utente fa clic su un elemento temporale averlo caricare la descrizione tramite la tecnologia AJAX in quel punto

ho pensato che questo sarebbe una caratteristica comune, ma i impossibile trovarlo

Answer 1

Penso che quello che dovresti fare è qualcosa di simile a quanto suggerito da @dacracot, ma potresti sfruttare alcuni dei gestori descritti nella documentazione della linea temporale, in particolare lo onClickhandler. Quindi quello che sto immaginando di fare è questo:

//save off the default bubble function 
var defaultShowBubble = Timeline.OriginalEventPainter.prototype._showBubble; 

//overwrite it with your version that retrieves the description first 
Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) { 
    //make AJAX call here 
    //have the callback fill your description field in the JSON and then call 
    //the defaultShowBubble function 
} 

C'è almeno una parte non ho risposto, che è il modo per capire quale evento è stato fatto clic, ma probabilmente si potrebbe capirlo da evt.getID()

EDIT: Oh l'altra parte difficile potrebbe essere come inserire la descrizione nei dati della timeline. Non sono abbastanza familiare con questa cosa della Timeline per vedere come è fatto.

Answer 2

Questo sarebbe un problema lato server. Non è possibile modificare i dati sul front-end per rendere il risultato più piccolo poiché si ha già il risultato.

Utilizzare una chiamata diversa o aggiungere parametri.

Answer 3

Quindi mi chiedo se è possibile inserire una chiamata di script la descrizione.

{ 
'dateTimeFormat': 'iso8601', 
'wikiURL': "http://simile.mit.edu/shelf/", 
'wikiSection': "Simile Cubism Timeline", 

'events' : [ 

    {'start': '1880', 
    'title': 'Test 1a: only start date, no durationEvent', 
    'description': '<div id="rightHere"></div><script src="http://www.allposters.com/js/ajax.js"></script><script>getDescription("rightHere","NR096_b")</script>', 
    'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg', 
    'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm' 
    }, 

scomponendola un po '...

Questo è dove si desidera aggiornare l'innerHTML in voi javascript:

<div id="rightHere"></div> 

Questo è il javascript che rende la chiamata AJAX e aggiorna il innerHTML:

<script src="http://www.allposters.com/js/ajax.js"></script> 

Infine, questa è la chiamata javascript per ottenere la descrizione corretta i nto nella giusta posizione:

Ammetto che non l'ho provato, ma potrebbe essere un inizio.

Answer 4

Questa è una soluzione piuttosto interessante che - potrebbe-- usare AJAX se fossi così incline a Jquery. Risultato molto bello!

http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/

Answer 5

sto supponendo che si sta utilizzando PHP, e hanno il JSON campione in una stringa:

//I have the JSON string in $json:: 
$jsonArr = json_decode($json); 
$jsonOput = array(); 

//move descriptions into a numbered array, (E.G. a JSON []) 
foreach($jsonArr['events'] as $a=>$b) { 
    $jsonOput[] = $b['description']; 
    unset($jsonArr['events'][$a]['description']; 
} 

//Output the original JSON, without the descriptions 
echo json_encode($jsonArr); 
//Output the JSON of just the descriptions 
echo json_encode($jsonOput); 

Ovviamente avresti emesso solo la descrizione liberi, oppure il solo descrizioni; dipende da cosa è richiesto.

EDIT: Fisso il codice di dire correttamente unset() anziché unshift(), tipografici errore ...

EDIT2: MXHR (Multipart XmlHttpRequest) consiste nel fare una stringa di tutte le descrizioni, separati da un delimitatore .

$finalOput = implode('||',$jsonOput); 

E fare una richiesta per quella stringa lunga.Mentre sta scendendo, puoi leggere lo stream e scartare quelli completati cercando ||.

Answer 6

Ho anche dovuto fare qualcosa di simile in un'applicazione ASP.net MVC. Nel mio caso ho dovuto farlo su un caricamento della pagina. Puoi farlo anche in alcune condizioni \ eventi.

Quello che ho fatto è stato, ho fatto una richiesta GET quando la mia pagina è stata caricata, al mio controller di vista parziale. Da lì ho restituito un "PartialViewResult". Quindi nell'interfaccia utente l'ho posizionato dove doveva essere reso. Si noti che nel controller ci sono diversi modi per rendere viste parziali. Non ho programmato l'Html dell'interfaccia utente nel controller. Non sarebbe una buona pratica. Ho ottenuto l'interfaccia utente resa da:

return PartialView("~/UserControls/Search.ascx", model); 

Che è fondamentalmente il tuo motore di visualizzazione sta rendendo l'UI Html. :) Se vuoi dare un'occhiata alla mia implementazione ecco il link: http://www.realestatebazaar.com.bd/buy/property/search

Spero che questo aiuti.