Hotwire Blog

<h2>Turbo Drive</h2>
<div>
  <a href="/greeting/?person=Josh">Click here to greet Josh (fast)</a>
</div>
<div>
    <a href="/greeting/?person=Josh&sleep=true">Click here to greet Josh (slow)</a>
</div>
<div data-turbo="false">
    <h2>Regular</h2>
    <div>
        <turbo-frame id="greeting_frame">
            <!--
            This <turbo-frame> obviously isn't needed, but in combination with the data-turbo="false" property on the containing element shows the progressive enhancement aspect of Turbo Frames.
            -->
            <a href="/greeting/?person=Josh">Click here to greet Josh (fast)</a>
        </turbo-frame>
    </div>
    <div>
        <!--
        This use a standard anchor, so no Turbo enhancement is applied.
        -->
        <a href="/greeting/?person=Josh&sleep=true">Click here to greet Josh (slow)</a>
    </div>
</div>
<h2>Turbo Stream (Form)</h2>
<form action="/pinger" method="post">
	<button type="submit">Ping</button>
</form>
<div>
    <p>Ping times</p>
    <ol id="pings"></ol>
</div>
<h2>Regular Form</h2>
<form action="/pinger" method="post" data-turbo="false">
  <button type="submit">Ping</button>
</form>
@RequestMapping(produces = [MediaType.TEXT_HTML_VALUE, CustomMediaType.TURBO_STREAM_VALUE])
suspend fun pinger(model: Model): String {
    model.addAttribute("pingTime", pingService.ping(hostname, port))
    return "ping.turbo-stream"
}
<h2>Turbo Stream (Form)</h2>
<form action="/pinger" method="post">
	<button type="submit">Ping</button>
</form>
<div>
    <p>Ping times</p>
    <ol id="pings"></ol>
</div>
<h2>Turbo Frame</h2>
<turbo-frame id="greeting_frame">
  <a href="/greeting/?person=Josh">Click here to greet Josh</a>
</turbo-frame>
    @GetMapping(produces = [MediaType.TEXT_EVENT_STREAM_VALUE])
    suspend fun load(model: Model): String {
        model.addAttribute("loadStream", dataDrivenEach(loadService.stream()))
        return "load.turbo-stream"
    }
<h2>Turbo Stream (SSE)</h2>
<div>
  <p>System Load Average</p>
  <span id="load">waiting...</span>
</div>
<!DOCTYPE html>
<html lang="${lang}"
      xmlns="http://www.w3.org/1999/xhtml"
      data-th-lang="${lang}" data-th-with="lang=${#locale.language}">
<head data-th-replace="~{fragments/html-head :: html-head}"></head>
<head>
    <title>Greetings</title>
</head>
<body>
<h1>The Greeting Page</h1>
<turbo-frame id="greeting_frame">
    <p><span id="hello">Hello</span>,
        <span id="person">[[${person}]]</span>!</p>
</turbo-frame>
</body>
</html>
    @GetMapping(produces = [MediaType.TEXT_EVENT_STREAM_VALUE])
    suspend fun load(model: Model): String {
        model.addAttribute("loadStream", dataDrivenEach(loadService.stream()))
        return "load.turbo-stream"
    }
<turbo-stream action="replace" target="load" data-th-each="load : ${loadStream}">
    <template>
        <span id="load">[[${load.at}]]: [[${load.avg}]]</span>
    </template>
</turbo-stream>
<!DOCTYPE html>
<html lang="${lang}"
      xmlns="http://www.w3.org/1999/xhtml"
      data-th-lang="${lang}" data-th-with="lang=${#locale.language}">
<head data-th-replace="~{fragments/html-head :: html-head}"></head>
<head>
    <title>Ping</title>
</head>
<body>
<h1>The Ping Page</h1>
<p>Ping time: <span id="pingTime">[[${pingTime}]]</span></p>
<a href="javascript:history.back()">🔙 Back</a>
<turbo-stream action="append" target="pings">
    <template>
        <li>[[${pingTime}]]</li>
    </template>
</turbo-stream>
</body>
</html>

Similiar Collections

Python strftime reference pandas.Period.strftime python - Formatting Quarter time in pandas columns - Stack Overflow python - Pandas: Change day - Stack Overflow python - Check if multiple columns exist in a df - Stack Overflow Pandas DataFrame apply() - sending arguments examples python - How to filter a dataframe of dates by a particular month/day? - Stack Overflow python - replace a value in the entire pandas data frame - Stack Overflow python - Replacing blank values (white space) with NaN in pandas - Stack Overflow python - get list from pandas dataframe column - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to lowercase a pandas dataframe string column if it has missing values? - Stack Overflow How to Convert Integers to Strings in Pandas DataFrame - Data to Fish How to Convert Integers to Strings in Pandas DataFrame - Data to Fish create a dictionary of two pandas Dataframe columns? - Stack Overflow python - ValueError: No axis named node2 for object type <class 'pandas.core.frame.DataFrame'> - Stack Overflow Python Pandas iterate over rows and access column names - Stack Overflow python - Creating dataframe from a dictionary where entries have different lengths - Stack Overflow python - Deleting DataFrame row in Pandas based on column value - Stack Overflow python - How to check if a column exists in Pandas - Stack Overflow python - Import pandas dataframe column as string not int - Stack Overflow python - What is the most efficient way to create a dictionary of two pandas Dataframe columns? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow python - How do I get the row count of a Pandas DataFrame? - Stack Overflow python - How to save a new sheet in an existing excel file, using Pandas? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow How do I select a subset of a DataFrame? — pandas 1.2.4 documentation python - Delete column from pandas DataFrame - Stack Overflow python - Convert list of dictionaries to a pandas DataFrame - Stack Overflow How to Add or Insert Row to Pandas DataFrame? - Python Examples python - Check if a value exists in pandas dataframe index - Stack Overflow python - Set value for particular cell in pandas DataFrame using index - Stack Overflow python - Pandas Dataframe How to cut off float decimal points without rounding? - Stack Overflow python - Pandas: Change day - Stack Overflow python - Clean way to convert quarterly periods to datetime in pandas - Stack Overflow Pandas - Number of Months Between Two Dates - Stack Overflow python - MonthEnd object result in <11 * MonthEnds> instead of number - Stack Overflow python - Extracting the first day of month of a datetime type column in pandas - Stack Overflow