Можно ли загружать контент динамически через 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'
    },

iхотел бы удалить поле описания все вместе (или отправить ноль) из JSON и заставить его загружать его по требованию через другой вызов ajax.

в любом случае есть, чтобы не отправлять поле описания во время начальной загрузки и когдакто-то нажимает на элемент шкалы времени, чтобы он загружал описание через ajax в этот момент

Я думал, что это будет распространенная функция, но я не могу ее найти

Answer 1

Я думаю, вам нужно что-то вроде того, что предложил @dacracot, но вы можете воспользоваться некоторыми из обработчиков, описанных в документации Timeline, в частности обработчиком 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'
    },

Немного разбив его на части ...

Здесь вы должны обновить innerHTML в своем javascript:

<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. В моем случае я должен был сделать это при загрузке страницы. Вы также можете сделать это на некоторых условиях \ событиях.

Что я сделал, я сделал запрос GET, когда моя страница была загружена, в мой контроллер частичного просмотра. Оттуда я возвратил "PartialViewResult". Затем в пользовательском интерфейсе я поместил его туда, где он должен быть отрендерен. Обратите внимание, что в контроллере есть разные способы визуализации частичных представлений. Я не жестко закодировал интерфейсный HTML в контроллере. Это не будет хорошей практикой. Я получил пользовательский интерфейс:

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

Каким движком вашего представления является рендеринг HTML-интерфейса пользователя. :) Если вы хотите взглянуть на мою реализацию, вот ссылка: http://www.realestatebazaar.com.bd/buy/property/search

Надеюсь, это поможет.

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, если вы так склонны через Jquery.Очень хороший результат!

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

Answer 6

Это было бы проблемой на стороне сервера. Вы не можете изменить данные на внешнем интерфейсе, чтобы уменьшить результат, так как у вас уже есть результат.

Используйте другой вызов или добавьте параметры.