PW3 - Frontend Blank Field Edit Query

[ridgedale]

Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.

I've setup a page where a member can edit contact details via the frontend displaying the field content using the <edit> ... </edit> tags.

This works fine when the fields actually contain data. However fields that contain no data (i.e. empty) do not appear to be editable. No edit cursor appears (- possibly owing to the field width being 0px?)

Is the only solution to recreate the page using a form, for example,  or is there a simple way to allow blank fields to be editable on the frontend?

I wondered if anyone else has found a solution to this problem. Any assistance would be appreciated.

[horst]

I encountered this issue too. Maybe one can call it a bug?

I only used this functionality once, so I added a quick workaround in my template file. If the fields content is empty, I injected some chars " ... ", so the field is clickable. (The spacers are added to the $page->fieldnames in memory, it does not get saved into the DB.)

Following the dirty copy/paste of my used code

Spoiler

<?php
        // einmal Tabellenkopf ausgeben für die Haupttabelle
        echo "<table class='motive' id='tblMotive'>\n";

        // jedes Motiv als Tabelleneintrag ausgeben
        foreach($page->children() as $p) {
            if(empty($p->motiv_notizen)) {
                $p->of(false);
                $p->motiv_notizen = ' ... ';
                $p->of(true);
            }
            if(empty($p->motiv_personen)) {
                $p->of(false);
                $p->motiv_personen = ' ... ';
                $p->of(true);
            }
?>
        <tr class='<?=$p->motiv_single_1->title?>'>
            <td class='id'><?=($user->isSuperuser() ? "<a href='{$p->editUrl}'>{$p->id}</a>" : $p->id)?></td>
            <td class='title'><?=$p->edit('title')?></td>
            <td class='typ'><?=$p->motiv_single_2->title?></td>
            <td class='location'><?=$p->motiv_single_3->title?></td>
            <td class='persons'><?=$p->edit('motiv_personen')?></td>
            <td class='styling'><?=($p->motiv_schminke ? 'X' : '')?></td>
            <td class='notes'><?=$p->edit('motiv_notizen')?></td>
        </tr>

<?php
        }
        echo "</table>\n";

 

 

[ridgedale]

@horst ,

Thank you for your reply. 

I've tried the code you kindly provided and initially got an undefined $p error so I added $p = '' the top of the template and then refreshed the page and now I'm getting the following error:

Fatal error: Call to a member function edit() on string in /home/.../templates/club.php on line 71

That relates to the first instance of: <?=$p->edit('...

I don't know if this makes a difference but the code I'm currently using to display the fields is as follows:

<edit field='Field_Name'><?=page()->Field_Name?></edit>

I'm clearly not doing something right or have misunderstood how to implement the code. Any help would be greatly appreciated.

[horst]

You need to enable the use of the Functios API in your site/config.php:

$config->useFunctionsAPI = true;  // pages()->find(), sanitizer()->pageName(), region('content', $markup),

 

[ridgedale]

Thanks for the heads-up, @horst .

I presume I just need to add this the end of the site/config.php file.

Is that quote from your site/config.php file and are those your comments to yourself for reference?

[ridgedale]

@horst ,

Further update. Does Processwire need to somehow be restarted after the config change?

I've added the following to the end of the site/config.php file

1 hour ago, horst said:

$config->useFunctionsAPI = true;

and refreshed the browser in the backend.

I have tried the following changes to the table elements without any success:

<edit field='First_Name'><?=page()->$p->First_Name?></edit>

or

<edit field='First_Name'><?=$p->First_Name?></edit>

and both return the following error:

Quote

Notice: Trying to get property of non-object in /.../site/templates/club.php on line ...

When I try the following code:

<?=$p->edit('First_Name')?>

I get the following error:

Quote

Fatal error: Call to a member function edit() on string in /.../site/templates/club.php on line ...
Error: Call to a member function edit() on string (line ... of /.../site/templates/club.php)

In each case the errors are referring to the <td></td> element containing $p.

I can't see what I'm doing wrong. The initial php code is inserted in the same manner directly after <table>. The full code for the template is as follows:

<?php namespace ProcessWire;

// this template is very much like the basic-page template except that it
// demonstrates making the headline, body and sidebar fields editable on the
// front-end, using the <edit> tags

$p = '';
?>

<h1 id='content-head'>Name Profile</h1>

<div id='content-body'>
    <h3><?=page()->Name?> - <?=page()->Code?></h3>
<div class="uk-grid uk-grid-small xzxzx-grid-spacer">
    
    <div class="uk-width-1-1@s uk-width-1-2@m xzxzx-grid-block-spacer">
        <h5><?php echo $M_Title ?></h5>
        <table class="uk-table">
            
            <tbody>
                <tr>
                    <td class="xzxzx-field-label">First Name:</td>
                    <td class="xzxzx-field"><edit field='M_First_Name'><?=page()->M_First_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Last Name:</td>
                    <td class="xzxzx-field"><edit field='M_Last_Name'><?=page()->M_Last_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Phone:</td>
                    <td class="xzxzx-field"><edit field='M_Phone'><?=page()->M_Phone?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label xzxzx-last-row">Email:</td>
                    <td class="xzxzx-field"><edit field='M_Email'><?=page()->M_Email?></edit></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="uk-width-1-1@s uk-width-1-2@m xzxzx-grid-block-spacer">
        <h5><?php echo $D_Title ?></h5>
        <table class="uk-table">
            <tbody>
                <tr>
                    <td class="xzxzx-field-label">First Name:</td>
                    <td class="xzxzx-field"><edit field='D_First_Name'><?=page()->D_First_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Last Name:</td>
                    <td class="xzxzx-field"><edit field='D_Last_Name'><?=page()->D_Last_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Phone:</td>
                    <td class="xzxzx-field"><edit field='D_Phone'><?=page()->D_Phone?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label xzxzx-last-row">Email:</td>
                    <td class="xzxzx-field"><edit field='D_Email'><?=page()->D_Email?></edit></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="uk-width-1-1@s uk-width-1-2@m xzxzx-grid-block-spacer">
        <h5><?php echo $C_Title ?></h5>
        <table class="uk-table">
            <tbody>
                <tr>
                    <td class="xzxzx-field-label">First Name:</td>
                    <td class="xzxzx-field"><edit field='C_First_Name'><?=page()->C_First_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Last Name:</td>
                    <td class="xzxzx-field"><edit field='C_Last_Name'><?=page()->C_Last_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Phone:</td>
                    <td class="xzxzx-field"><edit field='C_Phone'><?=page()->C_Manager_Phone?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label xzxzx-last-row">Email:</td>
                    <td class="xzxzx-field"><edit field='C_Email'><?=page()->C_Manager_Email?></edit></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="uk-width-1-1@s uk-width-1-2@m xzxzx-grid-block-spacer">
        <h5><?php echo $S_Title ?></h5>
        <table class="uk-table">
            <tbody>
                <tr>
                    <td class="xzxzx-field-label">First Name:</td>
                    <td class="xzxzx-field"><edit field='S_First_Name'><?=page()->S_First_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Last Name:</td>
                    <td class="xzxzx-field"><edit field='S_Last_Name'><?=page()->S_Last_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Phone:</td>
                    <td class="xzxzx-field"><edit field='S_Phone'><?=page()->S_Phone?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label xzxzx-last-row">Email:</td>
                    <td class="xzxzx-field"><edit field='S_Email'><?=page()->S_Email?></edit></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="uk-width-1-1@s uk-width-1-2@m xzxzx-grid-block-spacer">
        <h5><?php echo $T_Title ?></h5>
        <table class="uk-table">
            <?php
			foreach($page->children() as $p) {
				if(empty($p->T_First_Name)) {
					$p->of(false);
					$p->T_First_Name = ' ... ';
					$p->of(true);
				}
				if(empty($p->T_Last_Name)) {
					$p->of(false);
					$p->T_Last_Name = ' ... ';
					$p->of(true);
				}
				if(empty($p->T_Phone)) {
					$p->of(false);
					$p->T_Phone = ' ... ';
					$p->of(true);
				}
				if(empty($p->T_Email)) {
					$p->of(false);
					$p->T_Email = ' ... ';
					$p->of(true);
				}
			}
            ?>
            
            <tbody>
                <tr>
                    <td class="xzxzx-field-label">First Name:</td>
                    <td class="xzxzx-field"><edit field='T_First_Name'><?=$p->T_First_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Last Name:</td>
                    <td class="xzxzx-field"><edit field='T_Last_Name'><?=$p->T_Last_Name?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Phone:</td>
                    <td class="xzxzx-field"><edit field='T_Phone'><?=$p->T_Phone?></edit></td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label xzxzx-last-row">Email:</td>
                    <td class="xzxzx-field"><?=$p->edit('T_Email')?></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>

<?php include('./_sidebar.php'); ?>

It doesn't seem to matter where I place php foreach declaration. The same errors occur. I clearly must be doing something wrong. ?

Any ideas appreciated and thanks for your patience.

[ridgedale]

@horst ,

Just a quick update. I've made some progress. I realised this particular instance of PW3 had not been upgraded to 3.0.111. Apologies for that oversight. Following the upgrade to 3.0.111 the additional text is now being injected and displayed using the following code.

22 hours ago, ridgedale said:

<edit field='T_First_Name'><?=$p->T_First_Name?></edit>

This is the code that now allows the field to be edited. The original style code did not allow the field to be edited:

On 10/12/2018 at 11:18 AM, horst said:

<?=$p->edit('motiv_notizen')?>

However, when I edit and save any changes the field continues to display the ellipsis even though the changed data appears on the page in the backend. So I tried changing the above code as follows:

<?php if(!empty(page()->T_First_Name)) { page()->T_First_Name; } else { $p->T_First_Name; }?>

But that causes the field to apparently display as blank again event though again the field contains the edited data in the backend.

I also tried editing the foreach statement similarly with the same results.

I can't see what I'm doing wrong. Any ideas?

 

[ridgedale]

Finally, I've managed to get the frontend editing and data display working as I think it is intended. Below is an excerpt of the sample data posted earlier that has been updated and appears to work:

    <div class="uk-width-1-1@s uk-width-1-2@m xzxzx-grid-block-spacer">
        <h5><?php echo $T_Title ?></h5>
        <table class="uk-table">
            <?php
			foreach($page->children() as $p) {
				if(empty($p->T_First_Name)) {
					$p->of(false);
					$p->T_First_Name = ' ... ';
					$p->of(true);
				}
				if(empty($p->T_Last_Name)) {
					$p->of(false);
					$p->T_Last_Name = ' ... ';
					$p->of(true);
				}
				if(empty($p->T_Phone)) {
					$p->of(false);
					$p->T_Phone = ' ... ';
					$p->of(true);
				}
				if(empty($p->T_Email)) {
					$p->of(false);
					$p->T_Email = ' ... ';
					$p->of(true);
				}
			}
            ?>
            
            <tbody>
                <tr>
                    <td class="xzxzx-field-label">First Name:</td>
                    <td class="xzxzx-field">
                    <?php if(!empty($page->T_First_Name)): ?>
                        <edit field='T_First_Name'><?=page()->T_First_Name?></edit>
                    <?php endif; ?>
                    <?php if(empty($page->T_First_Name)): ?>
                        <edit field='T_First_Name'><?=$p->T_First_Name?></edit>
                    <?php endif; ?>
                    </td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Last Name:</td>
                    <td class="xzxzx-field">
                    <?php if(!empty($page->T_Last_Name)): ?>
                        <edit field='T_Last_Name'><?=page()->T_Last_Name?></edit>
                    <?php endif; ?>
                    <?php if(empty($page->T_Last_Name)): ?>
                        <edit field='T_Last_Name'><?=$p->T_Last_Name?></edit>
                    <?php endif; ?>
                    </td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label">Phone:</td>
                    <td class="xzxzx-field">
                    <?php if(!empty($page->T_Phone)): ?>
                        <edit field='T_Phone'><?=page()->T_Phone?></edit>
                    <?php endif; ?>
                    <?php if(empty($page->T_Phone)): ?>
                        <edit field='T_Phone'><?=$p->T_Phone?></edit>
                    <?php endif; ?>
                    </td>
                </tr>
                <tr>
                    <td class="xzxzx-field-label xzxzx-last-row">Email:</td>
                    <td class="xzxzx-field">
                    <?php if(!empty($page->T_Email)): ?>
                        <edit field='T_Email'><?=page()->T_Email?></edit>
                    <?php endif; ?>
                    <?php if(empty($page->T_Email)): ?>
                        <edit field='T_Email'><?=$p->T_Email?></edit>
                    <?php endif; ?>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

The only problem with this is that if the text to be entered is long it will break out of the display area and make the page layout look very messy. The solution to this would appear to be to display the text to be entered or edited within inputs, but the various methods of incorporating the editable data into an <input> element I've tried so far but so far have failed to work. The data is either displayed outside of the <input> or the data becomes uneditable, or the data appears to be editable but does not get saved.

Has anyone found a way to display editable data within an input to allow the data to be edited and updated?

Any assistance would be appreciated.