Est-il possible de charger dynamiquement le contenu par ajax (au lieu de l'avance) dans le scénario simile

StackOverflow https://stackoverflow.com/questions/3092781

Question

J'utilise le javascript calendrier simile-il un échéancier des éléments avec de très grands champs de description. Je ne veux pas enfler ma première charge utile de données JSON avec tout cela comme nécessaire que lorsque clics quelqu'un sur un élément de montage chronologique.

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 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 l'ont charger la description par ajax à ce point

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

Était-ce utile?

La solution

Je pense que ce que vous devez faire est quelque chose comme ce que @dacracot a suggéré, mais vous pouvez profiter de certains des gestionnaires décrits dans la documentation Timeline, en particulier le onClick gestionnaire . Ce que je vous imaginer faire 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 été cliqué, mais vous pourriez probablement figurer dehors de evt.getID()

EDIT : Oh l'autre partie délicate pourrait être comment insérer la description dans les données de chronologie. Je ne suis pas assez familier avec cette chose Timeline pour voir comment cela se fait.

Autres conseils

Alors, je me demande si vous pouvez passer 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 ...

est où vous mettez à jour le innerHTML en javascript:

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

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

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

Enfin, voici l'appel javascript pour obtenir le droit de description dans le bon endroit:

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

Je reconnais que je ne l'ai pas essayé, mais il peut être un début.

Je devais aussi faire quelque chose comme ça dans un asp.net MVC application. Dans mon cas, je devais le faire sur une charge de page. Vous pouvez le faire sur les événements de certaines conditions aussi.

Ce que je ne l'étais, je fait une requête GET lorsque ma page a été chargé, à mon contrôleur partiel de vue. De là, je suis retourné un « PartialViewResult ». Ensuite, dans l'interface utilisateur je l'ai placé là où il devait être rendu. S'il vous plaît noter que dans le contrôleur, il existe différentes façons de rendre une vue partielle. Je ne l'ai pas coder en dur l'interface utilisateur Html dans le contrôleur. Ce ne serait pas une bonne pratique. Je suis l'interface utilisateur fournis par:

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

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

L'espoir qui aide.

Ceci est une solution assez de cool que --could-- utiliser AJAX si vous étiez si incliné par Jquery. Très beau résultat!

http://tutorialzine.com/ 2010/01 / avancé événement-timeline avec-php-css-jquery /

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 feriez sortie seule la description libre, ou les seules 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 caractères de toutes les descriptions, séparés par un délimiteur

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

Et faire une demande de cette chaîne longue. Comme il vient vers le bas, vous pouvez lire le flux et divisé hors tout qui a terminé en recherchant ||.

Ce serait un problème côté serveur. Vous ne pouvez pas modifier les données sur l'avant pour rendre le résultat plus petit puisque vous avez déjà le résultat.

Utilisez un autre appel ou ajouter des paramètres.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top