OOP MVC AJAX CRUD MODAL

[like_to_code]

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!

[requinix]

7 hours ago, like_to_code said:

what is the industry standard way of getting data into this modal window form?

Varies.

You're venturing into the territory of frameworks like React and Angular: the tag is managed as an object in code, then rendered into the table as a row. You can meet it halfway by embedding the tags as objects separately, like {{ tags|json_encode() }} in a script. The modal code can read the data from those objects instead of pulling them from the source. (Remember to update the edited object too.) Then the problem is getting the objects to the modal, which should be easier to deal with.

Otherwise you're basically stuck pulling the data from the source. Or else loading the modal through AJAX where the server can return the modal template.