Ist es möglich, Inhalte dynamisch über Ajax (statt im Voraus) in Simile Timeline zu laden

Question

Ich bin mit die Javascript Simile Timeline Haben Sie einen Zeitplan Artikel mit sehr großen Beschreibungsfeldern. Ich möchte nicht meine ersten json Nutzdaten mit allen diesem aufblasen als nur benötigt, wenn wenn jemand auf einer Zeitleiste Elemente.

So zum Beispiel auf diesem JSON Ergebnis:

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

Ich möchte das Beschreibungsfeld zu entfernen, alle zusammen (oder senden null) aus dem JSON und haben sie es laden ondemand durch eine andere Ajax-Aufruf.

ist es ohnehin nicht das desription Feld herabs während der Anfangslast und wenn jemand Klicks auf einer Zeitleiste Elemente, um es zu der Beschreibung über Ajax an diesem Punkt

haben laden

Ich dachte, das ein gemeinsames Merkmal sein würde, aber ich kann es nicht finden

Answer 1

Ich denke, was man braucht ist etwas zu tun, wie das, was @dacracot vorgeschlagen hat, aber man konnte die Vorteile einiger der Handler in der Timeline-Dokumentation beschrieben nehmen, insbesondere die onClick Handler . Also, was ich mir vor, was Sie tun, ist dies:

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

Es ist zumindest ein Teil ich nicht beantwortet haben, die wie aus dem Ereignis Figur ist angeklickt wurde, aber man konnte es wahrscheinlich heraus von evt.getID()

Bearbeiten : Oh der andere schwierige Teil sein könnte, wie die Beschreibung in die Timeline-Daten einzufügen. Ich bin einfach nicht vertraut genug mit dieser Timeline, was zu sehen, wie das gemacht wird.

Answer 2

Also ich frage mich, ob Sie ein Skript Aufruf der Beschreibung platzieren könnte.

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

Breaking es ein wenig nach unten ...

Hier können Sie die Innerhtml aktualisieren würde in Javascript:

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

Dies ist das Javascript, das den Ajax-Aufruf macht und aktualisiert die innerHTML-:

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

Schließlich ist dies der JavaScript-Aufruf die richtige Beschreibung in die richtige Position zu bekommen:

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

Ich gebe zu, dass ich nicht versucht haben, aber es kann ein Anfang sein.

Answer 3

Ich habe auch so etwas wie die in einer asp.net MVC-Anwendung zu tun. In meinem Fall hatte ich es auf einer Seite zu laden, zu tun. Sie können auch auf einige Bedingungen \ Ereignisse tun.

Was ich tat, war, machte ich eine GET-Anfrage, wenn meine Seite geladen wurde, um meine Teilansicht Controller. Von dort kehrte ich eine „PartialViewResult“. Dann in den UI Ich legte es, wo es gebraucht gemacht werden. Bitte beachten Sie, dass verschiedene Möglichkeiten der Steuerung gibt es Teilansichten zu machen. Ich habe nicht hart Code der UI Html in der Steuerung. Das wäre keine gute Praxis. Ich habe die UI gemacht durch:

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

, die im Grunde ist Ihre Ansicht-Engine die Benutzeroberfläche Html rendert. :) Wenn Sie einen Blick auf meine Implementierung hier haben wollen, ist der Link: http: // www .realestatebazaar.com.bd / kaufen / Immobilien / search

Ich hoffe, das hilft.

Answer 4

Dies ist eine ziemlich coole Lösung, dass --could-- AJAX verwenden, wenn Sie so über Jquery geneigt waren. Sehr schönes Ergebnis!

http://tutorialzine.com/ 2010/01 / advanced-Event-Timeline-mit-php-css-jquery /

Answer 5

Ich nehme an, Sie PHP verwenden, und haben die Probe JSON in einem String:

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

Offensichtlich würden Sie die Beschreibung frei nur dann ausgegeben, oder die nur Beschreibungen; je nachdem, was angefordert wird.

EDIT: Der Fehler, der Code korrekt ungesetzt sagen () anstelle von unshift (), typographischen Fehlern ...

EDIT2. MXHR (mehrteiliger XmlHttpRequest) beinhaltet eine Reihe von allen Beschreibungen machen, durch ein Trennzeichen getrennt

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

Und machen Sie eine Anfrage für die lange Zeichenfolge. Wie es kommt nach unten, können Sie den Strom und abgespaltenen jeder lesen, die von der Suche nach || abgeschlossen sind.

Answer 6

Das wäre ein Server-Seite Problem sein. Sie können die Daten nicht auf dem vorderen Ende ändern das Ergebnis kleiner zu machen, da Sie bereits das Ergebnis haben.

Verwenden Sie einen anderen Anruf oder Parameter hinzuzufügen.