Modifying content on user profile

Hey guys,

I’ve ran into quite a challenge for me. I have user profiles on my site, generated by a template via a route, and each user profile has posts on it. The posts come in snippets, with page names like ‘user/post-name’. Each post snippet has an “Edit” button to change the post text.

I’m stuck at figuring out how to handle the post editing. When the “Edit” link (or in my case div) is clicked, an overlay with a form is displayed on the profile page. I have no idea how I could retrieve the post page details in order to display the text value in the form textarea.

Can this be done via the controller provided the edit button is not a form element which could submit stuff? Is there a way to use the data attributes on the Edit element?

I’d use a route to handle the logic and send the page via a data attribute.

Thanks for the tip, but I’ve been thinking about this and I’m not sure how to do it.

Since it’s the same URL pattern, how do you do it? Because you hit ‘profiles/user4321’, you hit Edit, an overlay is opened via jQuery and after you edit the content you hit ‘Save’, which is supposed to close the overlay. I’m also not sure how to retrieve the right page since the snippet looks something like this:

<div class="box padSmall article">
    <div class="userDetails">
        <?php echo $site->user($uid)->avatar()->crop(44) ?>
        <p><strong class="focus"><?php echo $site->user($uid)->displayName() ?></strong><br><span class="secondaryDesc"><?php echo $post->date('d/m/Y H:i', 'dateCreated') ?></span>
        </p>
    </div>
    <div class="content">
        <?php echo kirbytext($post->text()) ?>
        <?php if($file = $post->file()): ?>
            <a href="<?php echo $file->url() ?>"><?php echo $file->resize(500); ?></a>
        <?php endif ?>
    </div>
    <?php if($site->user()) : ?>
        <?php if($site->user()->current()->username() === $uid || $site->user()->hasRole('admin')): ?>
            <div class="controls">
                <a href="<?php echo url('delete-post/' . $uid . DS . $post->dirname()) ?>" class="postLink">Delete</a>
                <div id="<?php echo 'posts' . DS . $uid . DS . $post->dirname() ?>" class="postLink modify">Edit</div>
            </div>
        <?php endif ?>
    <?php endif ?>
</div>

This is a basic outline:

Button with data page attribute

<button data-page="<?php echo url() . '/edit-post/' . $post->uri()) ?>" class="postLink modify">Edit</button>

JavaScript get route URL from data-page attribute

var element = $('.modify');
var url = element.data('page');
// in your ajax call, you can now use this url

In your route, get the uri of the page from the pattern

c::set('routes', array(
  array(
    'pattern' => 'edit-post/(:all)',
    'method' => 'POST',
    'action' => function($uri) {
      $page = page($uri);
      // fetch content of page field and send back as json response
    }
  )
));