TYPO3（v9.5）使用Ajax加载新闻扩展

Question

I would like to load the Details view of a news list via Ajax. The page reload is not a good UX - would be better for the old detail to fade out while the list stays in place on the left (or wherever) and just the detail view of the article change.

Problems:

• SEO might break
• Unique URLS for an article might be a problem without extending News

I am trying to get this to work: https://gist.github.com/markhowellsmead/98de3dbaaec2faf52e0863907b5e403e

also looking at: http://unterricht.lacheiner.net/index.php?id=217 Which is an example of loading more News List Items

I am also looking at getting the full detail URL and use that to load the detail from a page with a unique detail only template as www.example.com/?type=9999 that only has the detail

lastly looking at URL Routing http://www.softfinity.com/blog/an-simple-introduction-to-url-routing/

Answer 1

I would not recommend this, as this will break default browser behavior like back and forward, will make it hard to link directly to a news item, etc. But if you really want to do this, I would do this by adding an click event to the a-tag for the link to the detail page in the list view, get the URL, fetch the detail page using ajax, then only get the part of the page I want and display it.

For example (using jQuery):

$('div.newsList div.item a').click(function() {
    doStuffToShowItsLoading();

    //
    $.ajax(this.href, {
        dataType: 'html',
        success: function(jqXHR, textStatus) {
            var detailHtml = $(jqXHR.responseText).find('div.newsDetails');
            $('div.newsDetail').html(detailHtml);

            doStuffToStopShowingItsLoading();
        },
        error: function() {
            alert('Something went wrong');
        }
    });
    return false;
});

That way, the links can still be followed by search engines or people who have JavaScript disabled.