Est-il possible de charger le contenu dynamiquement par ajax (au lieu d'upfront) dans la ligne de temps de similitude

Question

J'utilise the javascript simile timeline avoir un éléments de timeline avec de très grands champs de description. Je ne veux pas gonfler mes données de charge utile json initiales avec tout cela comme c'est seulement nécessaire lorsque quelqu'un clique sur un élément de la chronologie.

Ainsi, par exemple, sur ce résultat 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' 
    }, 

je voudrais supprimer le champ de description tous ensemble (ou envoyer null) du JSON et avoir le charger OnDemand par un autre appel ajax.

est là de toute façon de ne pas envoyer le champ Desription vers le bas au cours de la charge initiale et quand quelqu'un clique sur un élément de calendrier avoir charger la description par ajax à ce moment

Je pensais que ce serait une caractéristique commune, mais je ne peut pas le trouver

Answer 1

Je pense que ce que vous devez faire est quelque chose comme ce que @dacracot a suggéré, mais vous pouvez tirer parti de certains des gestionnaires décrits dans la documentation de la timeline, en particulier le onClickhandler. Alors, que j'imagine que vous faites est la suivante:

//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 
} 

Il y a au moins une partie, je ne l'ai pas répondu, ce qui est de savoir comment savoir quel événement a cliqué, mais vous pouvez probablement le comprendre de evt.getID()

EDIT: Oh l'autre partie difficile pourrait être comment insérer la description dans les données chronologiques. Je ne suis pas assez familier avec ce scénario pour voir comment ça se passe.

Answer 2

Ce serait un problème côté serveur. Vous ne pouvez pas modifier les données sur le frontal pour réduire le résultat puisque vous avez déjà le résultat.

Utilisez un autre appel ou ajoutez des paramètres.

Answer 3

Donc je me demande si vous pouvez placer un appel de script la description.

{ 
'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' 
    }, 

Décomposant un peu ...

C'est là que vous mettez à jour le innerHTML en javascript:

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

Ceci est le javascript qui fait l'appel ajax et met à jour la innerHTML:

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

Enfin, il s'agit de l'appel javascript pour obtenir la bonne description. Je suis au bon endroit:

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

J'avoue que je n'ai pas essayé cela, mais cela peut être un début.

Answer 4

Ceci est une solution assez sympa qui - peut - utiliser AJAX si vous étiez si incliné via Jquery. Très beau résultat!

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

Answer 5

Je suppose que vous utilisez PHP, et ont l'échantillon JSON dans une chaîne:

//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); 

Il est évident que vous vouliez seulement la description sortie libre, ou seulement des descriptions; en fonction de ce qui est demandé.

EDIT: Correction du code pour dire correctement unset() au lieu de unshift(), erreur typographique ...

EDIT2: MXHR (multipart XMLHttpRequest) consiste à faire une chaîne de toutes les descriptions, séparés par un séparateur .

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

Et faites une requête pour cette longue chaîne.Comme il descend, vous pouvez lire le flux et séparer tous ceux qui sont complétés en recherchant ||.

Answer 6

J'ai aussi dû faire quelque chose comme ça dans une application asp.net MVC. Dans mon cas, je devais le faire sur un chargement de page. Vous pouvez le faire sur certaines conditions \ events aussi.

Ce que j'ai fait, j'ai fait une demande GET lorsque ma page a été chargée, à mon contrôleur de vue partielle. De là, j'ai retourné un "PartialViewResult". Ensuite, dans l'interface utilisateur, je l'ai placé là où il devait être rendu. Veuillez noter que dans le contrôleur, il existe différentes manières de rendre des vues partielles. Je n'ai pas codé en dur l'UI Html dans le contrôleur. Ce ne serait pas une bonne pratique. J'ai eu l'interface utilisateur rendue par:

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

Ce qui est fondamentalement votre moteur de vue est le rendu de l'interface utilisateur HTML. :) Si vous voulez jeter un oeil à ma mise en œuvre ici est le lien: http://www.realestatebazaar.com.bd/buy/property/search

Espérons que cela aide.