PW3 - Frontend Create Page & Create Multiple Pages

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

 

[kongondo]

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. 

[ridgedale]

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

[kongondo]

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