Можно ли динамически загружать контент через ajax (вместо предварительной загрузки) на временной шкале сравнения
-
29-09-2019 - |
Вопрос
я использую временная шкала сравнения 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 в этот момент
Я думал, что это будет общая функция, но я не могу ее найти
Решение
Я думаю, что вам нужно сделать что -то вроде того, что предложил @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()
РЕДАКТИРОВАТЬ: О, другая сложная часть может быть, как вставить описание в данные временной шкалы. Я просто не достаточно знакомы с этим временной шкалой, чтобы увидеть, как это сделано.
Другие советы
Поэтому мне интересно, можете ли вы разместить сценарий, позвоните в описание.
{
'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>
Я признаю, что я этого не пробовал, но это может быть начало.
Я также должен был сделать что -то подобное в приложении ASP.NET MVC. В моем случае мне пришлось сделать это на загрузке страницы. Вы также можете сделать это в некоторых условиях события.
Я сделал, так это то, что я сделал запрос получить запрос, когда была загружена моя страница, в мой контроллер с частичным представлением. Оттуда я вернул «PartialViewResult». Затем в пользовательском интерфейсе я поместил его там, где его нужно было отображать. Обратите внимание, что в контроллере существуют разные способы отображать частичные представления. Я не жестко кодировал пользовательский интерфейс HTML в контроллере. Это не было бы хорошей практикой. Я получил пользовательский интерфейс:
return PartialView("~/UserControls/Search.ascx", model);
Который в основном является вашим двигателем вида, рендеринг пользовательского интерфейса HTML. :) Если вы хотите взглянуть на мою реализацию, вот ссылка: http://www.realestatebazaar.com.bd/buy/property/search
Надеюсь, это поможет.
Это довольно крутое решение, которое - должен-- использовать AJAX, если бы вы были настолько склонны через jQuery. Очень приятный результат!
http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/
Я предполагаю, что вы используете 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);
И сделайте запрос для этой длинной строки.По мере того, как он завершается, вы можете прочитать поток и отделить все, что завершено, выполнив поиск ||
.
Это была бы проблема на стороне сервера. Вы не можете изменить данные на переднем конце, чтобы сделать результат меньше, так как у вас уже есть результат.
Используйте другой вызов или добавить параметры.