Merge pull request #30 from jorgelaranjo/main

Fixing #29
edmondchuc · Dec 16, 2023 · d1501fa · d1501fa
2 parents 33fcf0a + 310edf0
commit d1501fa
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 19 deletions.
diff --git a/README.rst b/README.rst
@@ -72,7 +72,7 @@ A minimal working example.
 
 .. code-block:: python
 
-    from flask import Flask
+    from flask import Flask, render_template
     from flask_htmx import HTMX
 
     app = Flask(__name__)

diff --git a/run.py b/run.py
@@ -1,3 +1,4 @@
+from functools import partial
 from flask import Flask, render_template
 from flask_htmx import HTMX
 from flask_htmx.responses import HTMXResponseClientRedirect
@@ -8,6 +9,8 @@
 
 @app.route("/")
 def home():
+    if htmx:
+        return render_template("partials/thing.html")
     return render_template("index.html")
 
 

diff --git a/templates/index.html b/templates/index.html
@@ -1,26 +1,36 @@
 <html lang="en">
-    <head>
-        <title>title</title>
 
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+<head>
+    <title>title</title>
 
-        <!-- Bootstrap5 -->
-        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <!-- JavaScript Bundle with Popper -->
-        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <!-- Bootstrap5 -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 
-        <!-- HTMX -->
-        <script src="https://unpkg.com/[email protected]"></script>
+    <!-- JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"></script>
 
-        <!-- Alpine.js -->
-        <script src="//unpkg.com/alpinejs" defer></script>
-    </head>
+    <!-- HTMX -->
+    <script src="https://unpkg.com/[email protected]"></script>
+
+    <!-- Alpine.js -->
+    <script src="//unpkg.com/alpinejs" defer></script>
+</head>
+
+<body id="body">
+    <div id="app" class="">
+        <button hx-get="/redirect">Home</button>
+    </div>
+    <div id="app" class="">
+        <button hx-get="/partial" hx-target="#partial">Load Partial</button>
+    </div>
+
+    <div id="partial"></div>
+</body>
 
-    <body id="body">
-        <div id="app" class="">
-            <button hx-get="/redirect">Home</button>
-        </div>
-    </body>
 </html>
diff --git a/templates/partials/thing.html b/templates/partials/thing.html
@@ -0,0 +1 @@
+Partial html <b>content</b> loaded after clicking button