Objective:
Use jQuery to dynamically update a p element with user input from an input field when a button is clicked.
fromIPython.displayimportdisplay,HTML,Javascript# Define the HTML and JavaScript
html_content="""
<input type="text" id="userInput" placeholder="Enter text">
<button id="updateButton">Update</button>
<p id="output">This will change based on your input.</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#updateButton').click(function() {
var inputText = $('#userInput').val(); // Get the value from the input field
$('#output').text(inputText); // Update the <p> element with the input value
});
});
</script>
"""# Display the content in the notebook
display(HTML(html_content))
This will change based on your input.
jQuery Dynamic Update
# Question 2: Thymeleaf - Displaying a List of Items
Objective:
Use Thymeleaf to display a list of students stored in a backend Java controller.
Info you may need:
- student.getStatus(): Returns True if the student passed, returns False if the student failed
- student.getName(): Returns student name
- student.getGrade(): Returns student grade
```python
from IPython.display import display, HTML
# Sample data representing the students
students = [
{"name": "Alice", "grade": "A", "status": True},
{"name": "Bob", "grade": "C", "status": False},
{"name": "Charlie", "grade": "B", "status": True}
]
# HTML structure for the table
table_html = """
<!DOCTYPE html>
Student List
Student List
Name
Grade
Status
"""
# Loop through students and create a table row for each student
for student in students:
status_text = "Passed" if student["status"] else "Failed"
status_class = "failed" if not student["status"] else ""
table_html += f"""
{student['name']}
{student['grade']}
{status_text}
"""
# Closing tags for the table and the rest of the HTML
table_html += """
"""
# Display the HTML in the notebook
display(HTML(table_html))
```
<!DOCTYPE html>
Student List
Student List
Name
Grade
Status
Alice
A
Passed
Bob
C
Failed
Charlie
B
Passed
# Bonus Question:
Why is Thymeleaf better than creating a regular table? What are any potential pros and cons of Thymeleaf tables?
Thymeleaf is a tool that helps create dynamic tables on the server side, keeping the code clean and separate. It automatically protects against security issues but doesn't support things like real-time updates or interactive features. If you need those, you'd have to use JavaScript or other tools. Thymeleaf works best for simpler applications where the server handles most of the work.