ridgedale

PW3 - Frontend Blank Field Edit Query

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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";

 

 

  • Like 1

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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),

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

@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?

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      Despite my searches of the forum I'm somewhat confused about how to create new child pages on the frontend when a user clicks on a button on the parent page. I also have an equivalent button that is intended for uploading a .csv file to automatically create multiple new pages. This basically relates to a club (parent) and members (child) template configuration. Hopefully this explanation makes sense.
      A button should be able to launch the code needed to initiate the script required to create a new page using something like:
      <a href="/path/page.php">New +</a> <a href="/path/page.php">New ++</a> Does the code to create the new page or new pages need to be run from the template file for the child or the parent?
      A new individual member page will need to be editable manually at the point of page creation as well as subsequently, whereas multiple new pages will need to be editable after they have created and populated with data, again, as well as subsequently.
      I would very grateful for any advice or pointers as to how to achieve this.
       
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      I was wondering if there is a way to restrict user navigation to specific pages.
      Login (home.php - not to be displayed)
          |__  About (not to be displayed)
          |__  Clubs (not to be displayed)
          |            |__ Club (to be displayed)
          |                       |__  Club Members (to be displayed)
          |__ League (not to be displayed)
          |            |__Season (not to be displayed)
          |                       |__  Match (not to be displayed)
          |__  News (blog.php -  to be displayed)
          |
      etc, etc
      Based on the above the navigation needs to appear simply as:
      ---------------------------------------------------------------------------
                           Club    Club Members    News    
      ---------------------------------------------------------------------------
      Any thoughts appreciated.
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      I am trying to create a process whereby when a user logs in to their profile page (the user is automatically redirected to their profile page on login) and they then go to their 'members' page and creates a child page ('club-member'), the data stored in the user template ($user->usercode) is automatically added to the equivalent field on the club-member page.  This will be applicable only to the template used for the 'club-member' pages. Once the new page has been created the equivalent 'usercode' field on the 'club-member' page should not be subsequently editable.
      Below is the page hierarchy for visual reference:
      Login (home)
          |__  profile
                      |__  members
                                     |__  club-members
      It seems like an AddHookBefore might be the solution here such as:
      wire()->addHookBefore("Pages::saveReady", function($event) { $page = $event->arguments(0); if($page->template == 'club-member') { $clubcode = $user->club_code; $field = $page->club_code; $field->set('value', $clubcode); } }); I am I on the right track or is there a better way to achieve this?
      Any thoughts appreciated.
    • By ridgedale
      Reference: PW 3.0.111 and uikit3 based site using the Regular-Master profile.
      I am trying to add a field that provides a dropdown menu but there are no Options or Selector(s) type available - see attached image of field types available.
      The following reference under the docs does not appear to be applicable any more:
      https://processwire.com/api/modules/select-options-fieldtype/
      I can't see how to achieve this. Any assistance would be appreciated.