Ajaxを介して（事前の代わりに）Simile Timelineでコンテンツを動的にロードすることは可能ですか

StackOverflow https://stackoverflow.com/questions/3092781

質問

使ってます JavaScript Simile Timeline 非常に大きな説明フィールドを備えたタイムラインアイテムがあります。誰かがタイムラインアイテムをクリックしたときにのみ必要なので、最初の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経由で説明をロードしてもらうことができますか

これは一般的な機能だと思いましたが、見つかりません

役に立ちましたか？

解決

あなたがする必要があるのは@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
}

私が答えたことのない部分は少なくとも1つあります。これは、どのイベントがクリックされたかを把握する方法ですが、おそらくからそれを理解することができます 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'
    },

少し分解します...

これは、JavaScriptのInnerHtmlを更新する場所です。

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

これは、ajaxコールを作成し、innerhtmlを更新するJavaScriptです。

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

最後に、これは正しい説明を適切な場所に入れるためのJavaScriptコールです。

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

私はこれを試していないことを認めますが、それは始まりかもしれません。

また、ASP.NET MVCアプリケーションでそのようなことをしなければなりませんでした。私の場合、ページの読み込みでそれをしなければなりませんでした。いくつかの条件イベントでもそれを行うことができます。

私がしたことは、私のページがロードされたときに、部分的なビューコントローラーにGetリクエストをしました。そこから「partialViewResult」を返しました。その後、UIでレンダリングする必要がある場所に配置しました。コントローラーには、部分的なビューをレンダリングするさまざまな方法があることに注意してください。コントローラーのUI HTMLをハードコード化しませんでした。それは良い習慣ではありません。私は次のようにuiをレンダリングしました：

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

これは基本的にあなたのビューエンジンがUI HTMLをレンダリングしています。 :)ここに私の実装を見たい場合は、リンクがあります。 http://www.realestatebazaar.com.bd/buy/property/search

それが役立つことを願っています。

これは、JQueryを介してそのように傾いている場合はAjaxを使用できる非常にクールなソリューションです。とてもいい結果！

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（）を正しく言うようにコードを修正しました...

edit2：MXHR（MultiPart XMLHTTPREQUEST）には、区切り文字で区切られたすべての説明の文字列を作成します。

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

そして、その長い文字列をリクエストします。降りてくると、ストリームを読んで、検索して完了したものを分割することができます ||.

それはサーバー側の問題です。既に結果があるため、結果を小さくするためにフロントエンドのデータを変更することはできません。

別の呼び出しを使用するか、パラメーターを追加します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top