Front-end editing and empty value

[celfred]

Hello,

 

I can't find my way out of this. I'm trying to use the front-end editing capabilities of PW. It works quite well so far, except if the user sets an empty value. Indeed, in such a case my field just disappears until I reload my page.

Here's my code :

          $out .= '<edit informations>';
          if ($page->informations != '') {
            $out .= '<p>'.$page->informations.'</p>';
          } else {
            $out .= '<p>No infos.</p>';
          }
          $out .= '</edit>';

The idea is to have a paragraph showing 'No infos' if field is empty so the user can double-click on it. He/She then gets the inline editor which works perfectly well as lon as he/she sets a value. But let's say he/she decides (or by mistake) to set an empty value and save, then my paragraph disappears completely and the user must reload the page if he/she wants to edit the field again.

I wish I could add some kind of default value if field is empty. Maybe I'm misunderstanding something ?

If you have an advice, I'd appreciate

PS : I've tried all A/B/C/D front-end possibilities and read and re-read docs, but still the same issue...

[Robin S]

I don't think there is going to be an satisfying solution for this. Front-end editing is nifty for simple needs but there are many situations where it is a poor substitute for editing a page within the dedicated Page Edit environment in admin. I think dealing with empty fields might be one of those situations.

The simplest thing would be just to train your editors to reload the page if they accidentally save an empty field.

If you want to try other things, you'll have to approach it via Javascript because there isn't any hookable method in PageFrontEdit.module that will be useful here. You could give this a go:

$('body').on('pw-reloaded', 'span[data-name="informations"] .pw-edit-copy', function() {
    if(!$(this).html().length) $(this).siblings('.pw-edit-orig').html('<p>No infos.</p>');
});

 

 

[celfred]

Thanks for your explanatory reply.

I understand the JS snippet here, but I am not able to make it work yet. The function seems not to be triggered unless I get rid of the "span[data-name="informations"] before the .pw-edit-copy (but then I imagine this works because my field is unique for my test).

I tried all sorts of changes with no luck  and I am unable to find a way to actually SEE what's going on when my field is being saved after I front-end edit it (so I can find out the correct parent to spot the exact field that's being edited).

Not sure of being clear there. Sorry if I'm not !

EDIT (before sending !) : I kept digging with my 'novice' tools and habits : I went back to my Firefox debugging console and displayed the infos of the parent while working only out of .pw-edit-copy selector and I SAW it : it was div[data-name="informations"], not <span>  As easy as it might sound to many of you, I'm glad I've managed this ! 

Thanks again for this answer which helps me improve.