🔄 AppML – Dynamic Updates Without Page Refresh: Create Live Data Apps in Pure HTML

🧲 Introduction – Why Use Dynamic Updates in AppML?

In modern web development, users expect real-time updates—like adding new data, filtering items, or updating a record—without refreshing the page. With AppML, you can build this functionality using simple HTML, JSON models, and the appml-data attribute—no JavaScript frameworks required.

🎯 In this guide, you’ll learn:

• How AppML updates content dynamically
• How to use appml-submit for live form updates
• How to insert, update, and filter data on the fly
• Real-world examples with code and step-by-step explanations

---

⚙️ How AppML Enables Dynamic Behavior

AppML uses AJAX behind the scenes. When you:

• Submit a form (appml-submit)
• Load data from a model (appml-data)
• Update a record (appml-key)
• Filter data dynamically (appml-filter)

…it reloads only the affected part of the page, not the whole document.

---

🧪 Example 1 – Add Data Without Refresh

Let’s build a simple contact list. Users can submit the form, and the list updates instantly.

✅ contacts-model.json

{
  "table": "contacts",
  "key": "id",
  "fields": [
    { "name": "name", "required": true },
    { "name": "email", "required": true }
  ]
}

✅ save-contact.php

<?php
include("appml.php");

$appml = new AppML();
$appml->model = "contacts-model.json";
$appml->run();
?>

✅ HTML Form + Live List

<!-- Form -->
<div 
  appml-model="contacts-model.json" 
  appml-data="save-contact.php" 
  appml-message>

  <h3>Add Contact</h3>
  <input name="name" placeholder="Name">
  <input name="email" placeholder="Email">
  <button appml-submit>Save</button>
</div>

<!-- Live Contact List -->
<div 
  appml-model="contacts-model.json" 
  appml-data="save-contact.php">

  <h3>Contact List</h3>
  <p>{{name}} – {{email}}</p>
</div>

---

🔍 Code Explanation

Code	Purpose
appml-submit	Sends the form data using AJAX
appml-data="save-contact.php"	Backend PHP file that saves and returns JSON
appml-message	Displays success/error messages
Second <div>	Automatically updates with new contact data after saving

✔️ When the form is submitted, the data is added to the server and the list updates—without reloading the page.

---

🧪 Example 2 – Inline Record Update

You can also edit a specific record dynamically using appml-key.

<div 
  appml-model="contacts-model.json" 
  appml-data="save-contact.php" 
  appml-key="3"
  appml-message>

  <h3>Edit Contact</h3>
  <input name="name">
  <input name="email">
  <button appml-submit>Update</button>
</div>

🔍 Explanation:

• appml-key="3": Loads the record with ID 3.
• Fields are pre-filled from the database.
• When submitted, the update is sent without refreshing the page.

---

🧪 Example 3 – Filter/Search Without Reload

You can also create live search filters.

<input 
  appml-filter="name" 
  placeholder="Search by name">

<div 
  appml-model="contacts-model.json" 
  appml-data="save-contact.php">

  <p>{{name}} – {{email}}</p>
</div>

🔍 Explanation:

• The input filters the contact list as the user types.
• appml-filter="name" applies a client-side filter on the name field.
• No backend or page reload required.

---

💡 Best Practices for Dynamic Updates in AppML

Tip	Why It Helps
✅ Use appml-message	Get instant feedback without alerts
✅ Split logic into components	Separate forms and lists for clarity
✅ Use appml-key smartly	Pre-fill forms for updates easily
✅ Keep models consistent	Ensure fields in JSON match input names

---

📌 Summary – Recap & Key Takeaways

AppML makes real-time UI updates easy without JavaScript frameworks. Using appml-submit, appml-data, and appml-filter, you can build responsive apps that update dynamically and instantly.

🔍 Key Takeaways:

• Submit and save data using appml-submit + appml-data
• Reload views instantly without refreshing the page
• Use appml-key to edit data live
• Use appml-filter to search/filter lists in real-time

⚙️ AppML empowers developers to build dynamic, fast interfaces with just HTML and JSON.

---

❓ FAQs – Dynamic Behavior in AppML

---

❓ How does AppML update without page reload?
✅ It uses AJAX behind the scenes to fetch and re-render only affected HTML.

---

❓ Can I update multiple views at once?
✅ Yes, but each view must be in its own div with separate appml-model.

---

❓ Does AppML support real-time push (WebSocket)?
❌ No. AppML uses pull-based AJAX, not real-time sockets.

---

❓ Can I customize the message shown after a save?
✅ Yes, via myAppML.message in a controller or using server response.

---

❓ Is page refresh ever needed in AppML apps?
❌ No, unless you’re performing a full app reload. AppML handles partial updates natively.

---

Share Now :