ridgedale

PW3 - Frontend Create Page & Create Multiple Pages

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites
1 hour ago, ridgedale said:

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?

No; they need not. 

You need to show us a bit more code.

  1. What does clicking on your buttons do?
  2. Are they in a form?
  3. How are you submitting the form?
  4. How are you handling form submission server-side?
  5. What is page.php? 

It seems to me you've created a file named page.php. If it is not a template file, and you've placed it in some restricted locations, e.g /site/templates/ it is being rejected for security reasons.

A few thoughts.

  1. For simplicity, have the template file where you output your buttons handle the form submission. I wouldn't call it page.php though. It's confusing.
  2. If you are using Ajax, it is even easier. See below.

Your code could look like this. You can also use <a> and control capture using JavaScript.

<button type="button" value="1" name="new_1">New 1</button>
<button type="button" value="1" name="new_2">New 2</button>

You can have JavaScript listen to the button that was clicked and submit that. If you had a form, the action would be:

<form action="./" method="post">

In your template file, follow what's in this post

Hope this makes sense. 

Share this post


Link to post
Share on other sites

@kongondo ,

Thank you for your reply. Apologies for the confusion caused by my sample code. In answer to your questions:

1 hour ago, kongondo said:
  1. What does clicking on your buttons do?
  2. Are they in a form?
  3. How are you submitting the form?
  4. How are you handling form submission server-side?
  5. What is page.php? 

1. At present the buttons do nothing. They are buttons with a hashed link.

2. They are located on the club (parent) page and not in a form as I thought the idea might be to link to the page that runs the code required to create the page(s) - the members (child) page.

3. I haven't got that far yet as I wasn't sure where the form should be run from. Should the form be run from the parent to create the page(s) using the child template?

4. Yes the intention is for the form handling to be server-side.

5. I can see /path/page.php was unhelpful, if not, misleading. My thinking was that it represented the path to the template where the processing is to take place. In this case I am not sure if the target should be the parent template (i.e. the template of the page the buttons are located on) or the child template (the target for the creation of the page(s)

I have no experience of working with AJAX. Is it not possible to use PHP, Javascript and/or JQuery to achieve the same goal? Or is this a case of those tools not being the right tools for the job?

Below is some code for the form:

<div id="member-form">
	<form id="memform" action="./" method="post" class="uk-grid-small" uk-grid> 
		<div class="uk-width-1-2@s">
            <label for="First_Name" class="uk-form-label">First Name: <span class="required">*</span></label>
            <input  placeholder="First Name..." class="uk-input" type="text" tabindex="1" name="First_Name" value="" />
            <span class="form-error"></span>
        </div>
		<div class="uk-width-1-2@s">
            <label for="Last_Name" class="uk-form-label">Last Name: <span class="required">*</span></label>
            <input  placeholder="Last Name..." class="uk-input" type="text" tabindex="2" name="Last_Name" value="" />
            <span class="form-error"></span>
        </div>
        <div class="uk-width-1-2@s">
            <label for="Licence" class="uk-form-label">Licence: <span class="required">*</span></label>
            <input  placeholder="Licence..." class="uk-input" type="number" tabindex="3" name="Licence" value="" />
            <span class="form-error"></span>
        </div> 
		<div class="uk-width-1-2@s">
            <label for="Date_of_Birth" class="uk-form-label">Date of Birth: <span class="required">*</span></label>
            <input  placeholder="Date of birth..." class="uk-input" type="date" tabindex="4" name="Date_of_Birth" value="" />
            <span class="form-error"></span>
        </div>
		<div class="uk-width-1-2@s">
            <label for="Gender" class="uk-form-label">Gender: <span class="required">*</span></label>
            <select class="uk-select" tabindex="5" name="Gender">
                <option value="" >Select a gender...</option>
                <option value="1" >Female</option>
                <option value="2" >Male</option>
            </select> 
            <span class="form-error"></span>
        </div> 
		<div class="uk-width-1-2@s">
            <label for="Category" class="uk-form-label">Category: <span class="required">*</span></label>
            <select class="uk-select" tabindex="6" name="Category">
                <option value="" >Select a category...</option>
                <option value="1" >A</option>
                <option value="2" >B</option>
                <option value="3" >C</option>
                <option value="4" >D</option>
                <option value="5" >E</option>
            </select> 
            <span class="form-error"></span>
        </div> 
        <div class="uk-width-1-1">
            <p class="my-note"><span class="required">Note:</span> The fields marked <span class="required">*</span> are required.</p>
        </div>
        <div class="uk-width-1-1 buttons-center">
            <button id="myform-submit" class="uk-button uk-button-primary uk-button-small" type="submit" name="submit" value="submit">Submit</button>  
            <button id="myform-reset" class="uk-button uk-button-secondary uk-button-small" type="reset" name="reset">Reset</button>
        </div>
    </form>
</div>

The new child page needs to be created using the child template.

In addition, the contents of the logged in user's  profile Club_Code field needs to automatically be copied into an equivalent field of the newly created (member) child page.

There is also no title field included in the member template as there is no need for it.

Can the page name be generated as an auto-incrementing id number?

I think I am beginning to understand. The form needs to be run from the parent page in order to create the child page(s). Is that correct? Is it possible for the form to be displayed in a pop-up window? If so that would appear to me to be a more logical user interface. The user clicks on the button to launch the form in the pop-up window or launch a form to upload a .csv file.

I will read through the information you provided via the link now.

Thanks for your patience.

Share this post


Link to post
Share on other sites
On 10/12/2018 at 7:48 PM, ridgedale said:

I haven't got that far yet as I wasn't sure where the form should be run from. Should the form be run from the parent to create the page(s) using the child template?

It doesn't matter where it is run from; as long as when the form is sent, there is a process server-side to receive it.

On 10/12/2018 at 7:48 PM, ridgedale said:

I have no experience of working with AJAX. Is it not possible to use PHP, Javascript and/or JQuery to achieve the same goal? Or is this a case of those tools not being the right tools for the job?

You don't have to use Ajax. Ajax is just a method that uses JavaScript. Using Ajax does not exclude the use of PHP. You can use a normal form, no worries.

 

On 10/12/2018 at 7:48 PM, ridgedale said:

In addition, the contents of the logged in user's  profile Club_Code field needs to automatically be copied into an equivalent field of the newly created (member) child page.

There is also no title field included in the member template as there is no need for it.

Can the page name be generated as an auto-incrementing id number?

Maybe let's deal with successfully submitting the form first. If you are not using a form, then you need JavaScript to submit the details without using a form (basically mimicking a form submission). 

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.
      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'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.
    • 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.