是否可以在明式时间表中通过Ajax（而不是前期）动态加载内容

Question

我在用 JavaScript显着时间表 具有一个非常大的描述字段的时间轴项。我不想将我的初始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调用将其加载到点数。

无论如何，是否可以在初始加载期间不发送删除字段，当某人单击时间轴项时，请通过Ajax加载描述

我认为这是一个共同的功能，但我找不到

Answer 1

我认为您需要做的是@Dacracot建议的事情，但是您可以利用时间表文档中描述的一些处理程序，特别是 onClick 处理程序. 。所以我想象的是这样做：

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

这是javaScript，可以进行Ajax调用并更新InnerHTML：

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

最后，这是将正确描述进入正确位置的JavaScript调用：

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

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

Answer 3

我还必须在ASP.NET MVC应用程序中执行类似的操作。就我而言，我必须在页面加载上进行。您也可以在某些情况下进行事件。

我所做的是，当我的页面加载时，我向部分视图控制器提出了一个请求。从那里我返回了一个“ partialviewResult”。然后，在UI中，我将其放置在需要渲染的地方。请注意，在控制器中，有不同的方法来呈现部分视图。我没有在控制器中硬编码UI HTML。那不是一个好习惯。我得到了UI的渲染：

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

基本上，您的视图引擎正在渲染UI HTML。 :)如果您想查看我的实现，这里是链接： http://www.realestatebazaar.com.bd/buy/property/search

希望有帮助。

Answer 4

这是一个非常酷的解决方案，如果您是如此通过jQuery倾斜，请使用Ajax。非常好的结果！

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

Answer 5

我假设您正在使用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 6

那将是服务器端问题。您无法更改前端的数据以使结果较小，因为您已经有了结果。

使用其他呼叫或添加参数。