Hi, I am creating my first OOP MVC content management system.
I created a CRUD where on the Tag view page, you click edit and it takes you to the Tag edit page.
But I want to improve the user experience, so when a user clicks edit, a modal window displays allowing editing of Tag, upon clicking save, modal window closes and AJAX updates Tag view page without refresh.
You can see my Tag view.html here which is using Twig template system:
{% extends "backendbase.html" %}
{% block title %}Manage Tags{% endblock %}
{% block body %}
<h1 class="ui header">View Tags</h1>
{% if tags.errors is not empty %}
<div class="ui error message">
<p>Errors:</p>
{% for error in tags.errors %}
<div>{{ error }}</div>
{% endfor %}
</div>
{% endif %}
<table class="ui striped table">
<thead>
<tr>
<th>Id</th>
<th>Tag</th>
<th>Directory</th>
<th>Synonyms</th>
<th>Edit</th>
<th>Test</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{% for tag in tags %}
<tr>
<td>{{ tag.id }}</td>
<td>{{ tag.tag }}</td>
<td>{{ tag.tag_dir }}</td>
<td>{{ tag.synonyms }}</td>
<td><a class="edit" onclick="return false;" href="../edit/?edit={{ tag.id }}">Edit</a></td>
<td><a href="../test/?test={{ tag.id }}">Test</a></td>
<td><a href="../delete/?delete={{ tag.id }}">Delete</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
Edit Tag
</div>
<div class="image content">
<!--<div class="ui medium image"></div>-->
<div class="description">
<!--
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
-->
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Cancel
</div>
<div class="ui positive right labeled icon button">
Save
<i class="checkmark icon"></i>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui pagination menu">
{% for page in pages %}
<a href="{{ page.number|e }}" class="{{ page.isactive|e }}">{{ page.number|e }}</a>
{% endfor %}
</div>
{% endblock %}
If I add a form in the modal window with {{ tag.id }} and {{ tag.name }}, nothing displays obviously because it is not in the for in loop. My question is, what is the industry standard way of getting data into this modal window form? I could use a $_GET["id"] but then I am breaking MVC model by including code in template. Is the solution to use JavaScript to get ID from edit link, in the background get data from database then use JavaScript to create form in modal?
Your help would be much appreciated!
