Question

我正在使用the javascript simile timeline的时间轴项目包含非常大的描述字段。我不希望膨胀我的初始json有效载荷数据与所有这些，因为它是唯一需要的时候有人点击了时间轴项目。

例如，在这个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'
    },

我想要从JSON中一起删除描述字段（或发送null），并通过另一个ajax调用将其加载到onmand中。

无论如何都没有在初始加载期间发送desription字段，当有人点击时间轴项目时，它会通过ajax加载描述

我认为这是一个常见的功能，但我找不到它

Answer 1

我认为您需要做的是像@dacracot建议的那样，但您可以利用时间轴文档中描述的一些处理程序，特别是onClick handler。所以我想象你做的是：

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

至少有一部分我没有回答，这是如何确定点击了哪个事件，但你可以从evt.getID()找出它

编辑：哦，另一个棘手的部分可能是如何将描述插入时间轴数据。我对这个时间轴的事情不太熟悉，看看它是如何完成的。

Answer 2

所以我想知道你是否可以在脚本中调用描述。

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

稍微分解......

这是你在javascript中更新innerHTML的地方：

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

这是进行ajax调用并更新innerHTML的javascript：

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

最后，这是javascript调用，以便将正确的描述放到正确的位置：

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

我承认我没有尝试过，但这可能是一个开始。

Answer 3

这是一个非常酷的解决方案 - 可以 - 如果你是通过Jquery倾向于使用AJAX。非常好的结果！

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

Answer 4

我假设您正在使用PHP，并在字符串中包含示例JSON：

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

显然你只是免费输出描述，或者只是描述;取决于要求。

编辑：修正代码正确说unset（）而不是unshift（），印刷错误......

EDIT2：MXHR（Multipart XmlHttpRequest）涉及制作所有描述的字符串，用分隔符分隔。

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

并请求该长字符串。当它下降时，您可以通过搜索||来阅读流并拆分完成的任何内容。

Answer 5

那将是服务器方面的问题。由于已有结果，因此无法更改前端的数据以使结果更小。

使用其他电话或添加参数。

是否可以通过ajax（而不是前期）在simile时间轴中动态加载内容

6 个答案: