Jump to content

OOP MVC AJAX CRUD MODAL


like_to_code

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.