¿Es posible cargar dinámicamente contenido a través de ajax (en lugar de por adelantado) en la línea de tiempo símil

Question

los artículos Javascript símil línea de tiempo tiene línea de tiempo con grandes campos de descripción. No quiero inflar mi inicial de datos JSON de carga útil con todo esto como su único necesario para cuando clics alguien en un elemento de línea de tiempo.

Así, por ejemplo, en este resultado 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 querría quitar el campo de descripción de todos juntos (o envío nulo) de la JSON y hacer que cargue se OnDemand a través de otra llamada AJAX.

¿Hay alguna forma para que no envíe el campo desription abajo durante la carga inicial y cuando alguien hace clic en un elemento de línea de tiempo tienen que cargar la descripción a través de AJAX en ese punto

pensé que esto sería una característica común, pero no puedo encontrarlo

Answer 1

Creo que lo que tendría que hacer es algo parecido a lo @dacracot ha sugerido, pero se puede tomar ventaja de algunos de los manipuladores descritos en la documentación de la línea de tiempo, en concreto el onClick manejador . Así que lo que estoy imaginando que se hace es la siguiente:

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

Hay al menos una parte no he respondido, que es la forma de averiguar qué evento se ha hecho clic, pero probablemente podría comprenderlo a partir de evt.getID()

Editar : Oh la otra parte difícil podría ser la forma de insertar la descripción en los datos de línea de tiempo. No estoy lo suficientemente familiarizado con esto la línea de tiempo para ver cómo se hace.

Answer 2

Así que me pregunto si podía hacer una llamada escritura de la descripción.

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

Rompiendo hacia abajo un poco ...

Esto es donde se actualice el innerHTML en que javascript:

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

Este es el código JavaScript que hace que la llamada AJAX y actualiza el innerHTML:

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

Por último, se trata de la llamada javascript para obtener la descripción correcta en el lugar correcto:

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

Tengo que reconocer que no he probado esto, pero puede ser un comienzo.

Answer 3

También tuvo que hacer algo así en un asp.net MVC aplicación. En mi caso tuve que hacerlo en una carga de la página. Puede hacerlo en algunas condiciones \ eventos también.

Lo que hice fue, me hizo una petición GET cuando se cargó mi página, a mi controlador de vista parcial. A partir de ahí volví un "PartialViewResult". Luego, en la interfaz de usuario lo coloqué donde tenía que ser prestados. Tenga en cuenta que en el controlador que hay diferentes maneras de rendir vistas parciales. No lo hice codificar la interfaz de usuario HTML en el controlador. Eso no sería una buena práctica. Me la interfaz de usuario prestados por:

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

¿Qué es, básicamente, su motor de vista es la prestación de la interfaz de usuario HTML. :) Si usted quiere tener un vistazo a mi aplicación aquí está el enlace: http: // www .realestatebazaar.com.bd / compra / propiedad / search

Espero que ayude.

Answer 4

Esta es una solución fresca bonita que --could-- utilizar AJAX si estuviera tan inclinado a través de jQuery. Muy buen resultado!

http://tutorialzine.com/ 2010/01 / avanzado de eventos en línea de tiempo-con-php-css-jQuery /

Answer 5

Estoy asumiendo que usted está usando PHP, JSON y tener la muestra en una cadena de caracteres:

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

Obviamente és única salida de la descripción libre, o las únicas descripciones; dependiendo de lo que se solicita.

EDIT: Se ha corregido el código de decir correctamente unset () en lugar de unshift (), tipográficos error ...

Edit2:. MXHR (Multipart XmlHttpRequest) implica la realización de una serie de todas las descripciones, separadas por un delimitador

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

y hacer una solicitud de esa larga cadena. Como se viene abajo, se puede leer la secuencia y la división de descuento en cualquier que se completó mediante la búsqueda de ||.

Answer 6

Eso sería un problema del lado del servidor. No se pueden cambiar los datos en la parte delantera para que el resultado menor, ya que ya tiene el resultado.

Usar una llamada diferente o añadir parámetros.