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

я бы хотел удалить поле описания все вместе (или отправить null) из JSON и заставить его загрузить его по требованию через другой вызов 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'
    },

Разбивайте его немного ...

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

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

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

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

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

Answer 4

Это довольно крутое решение, которое - должен-- использовать AJAX, если бы вы были настолько склонны через jQuery. Очень приятный результат!

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

Очевидно, что вы бы выводили только описание свободно или только описания;в зависимости от того, что будет запрошено.

Редактировать:Исправлен код, в котором вместо unshift() было правильно написано unset(), типографская ошибка...

РЕДАКТИРОВАТЬ 2:MXHR(Multipart XMLHttpRequest) предполагает создание строки из всех описаний, разделенных разделителем.

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

И сделайте запрос для этой длинной строки.По мере того, как он завершается, вы можете прочитать поток и отделить все, что завершено, выполнив поиск ||.

Answer 6

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

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