E 'possibile caricare in modo dinamico contenuti attraverso ajax (invece che in anticipo) in linea temporale similitudine

Question

gli elementi javascript similitudine linea temporale Hanno una timeline con molto grandi campi di descrizione. Non voglio gonfiare miei dati iniziali JSON carico utile con tutto questo come il suo necessario solo quando clic su una voce di qualcuno 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.

c'è comunque di non inviare il campo desription giù durante il caricamento iniziale e quando fa clic su una voce di qualcuno linea temporale l'hanno caricare la descrizione tramite la tecnologia AJAX in quel punto

ho pensato che questo sarebbe stato una caratteristica comune, ma io non riesco a trovarlo

Answer 1

Penso che quello che si avrebbe bisogno di fare è qualcosa di simile a ciò che @dacracot ha suggerito, ma si potrebbe approfittare di alcuni dei gestori descritte nella documentazione Timeline, in particolare la onClick handler . 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 cliccato, ma probabilmente si riusciva a capire da evt.getID()

Modifica : Oh dall'altra parte difficile potrebbe essere come inserire la descrizione nei dati della timeline. Solo che non sono abbastanza familiarità con questa cosa temporale per vedere come è fatto.

Answer 2

Quindi, mi chiedo se si poteva effettuare 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 vuole aggiornare l'innerHTML in voi JavaScript:

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

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

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

Infine, questa è la chiamata JavaScript per ottenere la descrizione a destra nella giusta posizione:

<script>getDescription("rightHere","NR096_b")</script>

Ammetto che non ho provato questo, ma può essere un inizio.

Answer 3

ho avuto anche a che fare una cosa del genere in un asp.net MVC Application. Nel mio caso ho dovuto farlo su un caricamento della pagina. È possibile farlo su alcune condizioni \ eventi troppo.

Quello che ho fatto è stato, ho fatto una richiesta GET quando la mia pagina è stata caricata, al mio controller della vista parziale. Da lì sono tornato un "PartialViewResult". Poi nell'interfaccia utente ho messo dove doveva essere reso. Si prega di notare che nel controllore ci sono diversi modi per rendere una vista parziale. Non ho codificare l'interfaccia utente Html nel controller. Non sarebbe una buona pratica. Mi sono l'interfaccia utente resi da:

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

che è fondamentalmente il vostro motore di visualizzazione sta rendendo l'interfaccia utente Html. :) Se si vuole avere uno sguardo a mia implementazione ecco il link: http: // www .realestatebazaar.com.bd / acquisto / proprietà / search

La speranza che aiuta.

Answer 4

Questa è una soluzione fresca piuttosto che --could-- usare AJAX se si stesse così inclinato tramite jQuery. Molto bel risultato!

http://tutorialzine.com/ 2010/01 / avanzato event-temporale-con-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 faresti solo l'uscita della descrizione libera, o le uniche descrizioni; a seconda di ciò che è richiesto.

EDIT: Risolto il codice di dire correttamente unset () al posto di 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 così tanto tempo stringa. Come è venuta giù, si può leggere il flusso e dividere fuori qualsiasi che sono stati completati attraverso la ricerca di ||.

Answer 6

Questo sarebbe un problema lato server. Non è possibile modificare i dati sul front-end per rendere il risultato più piccolo dal momento che hai già il risultato.

Usa un invito diverso o aggiungere parametri.