Jump to content
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 dps
      Hi
      I'm creating a site where people can vote on dogs.
      To start with, I need the dog owners to register and then upload text, images, and videos about their dog. What I thought I could do is to create a page when the user registers. The page would be unique by using the member ID. So I would end up with:
      Home
           - Members
                -1001
                -1021
                -1025
       
      Then each member page would have 1 or more children which would be the dogs that they have added.
      I just wanted to ask if that is a good way of doing things or if there's maybe a much simpler way of doing this.
      Thanks in advance for any advice.
    • By muzzer
      Existing PW site version 2.7.2 core running on php7.1. Site is perhaps 7 yrs old and never misses a beat. Can't speak highly enough about this solid version, but....
      As new php versions are released (v8 in the next year I think?) and each seems to get quicker I'm looking at upgrading to php7.3 or 7.4 and upgrading the site to PW v3.x.
      I've been away from the forums since v3 was released so don't know much about it. I guess it's stable as it's been around for ages now, but what I'm wondering is:
      what are the real advantages of upgrading to v3 for a site which is actively used but with only periodic development. And what are the disadvantages if any? Is there any speed impact (good or bad) in either general site speed under 3.x or admin-use speed/ease of use? any issues with either PW version with newer php versions (>7.1) I should know about? is there any good write-ups/vids about new features etc of v3 compared to v2.7? Thank you
       
    • By rushy
      Hi all
      Continuing my first project where I am creating and manipulating stuff from the frontend. Till now I've always added things like images from the backend, but in this project I need to add and move images from a frontend control. This is a photo album where images are stored in albums, each album being a page containing a Pageimages array in the usual way. So what I want to know is how do I move an image from one album (page) to another in the frontend? I just need some guidance on how to approach this.  I suppose I need to do a copy and delete - but how do I copy an image or images from one page to another? What function should I use to create a new image on an existing page? I include a code snippet from the server side of my delete image request and it works fine. I'd like to implement something similar for a move and upload new image request. 
      Many thanks for any help. Paul 
      <?php namespace ProcessWire; // sanitize inputs as 1-line text $action = $sanitizer->text($input->post('action')); $instr = $sanitizer->text($input->post('input')); $sel = $input->post('selected'); // Expect JSON for image selected image list $selected = json_decode($sel); $nosel = count($selected); $response = array(); // for building JSON response switch($action) { // delete selected images case 'delete': $out = "<p>Deleted $nosel image(s)</p>"; foreach($selected as $item){ $album = $pages->get($item->album); $album->of(false); $out .= "<p>Image {$item->file} from album {$album->title}</p>"; $album->images->delete($item->file); $album->of(true); } $out .= saveUpdatedAlbums($pages, $selected); // add the response message for the delete $response['message'] = $out; break; ...... // save any album that had an image deleted function saveUpdatedAlbums($pages, $selected) { $cur = ''; $out = ''; foreach($selected as $item){ $album = $pages->get($item->album); if($album->id != $cur) { $album->of(false); $album->save('images'); $album->of(true); $cur = $album->id; $out .= "<p>Updated album {$pages->get($cur)->title}</p>"; } } return $out; }  
       
       
    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
    • By rushy
      Bit of a newbie type question, even though I've been using PW for quite a while, I've not had to manipulate assets from the front end before.  I now have a need to update image properties from the front end and I'm trying to update an image description and tags when clicking on a link. I get the selected image and for example I can delete it with the code below. But I am missing some basic understanding when updating image description field as nothing happens, no errors but the description field remains empty. Any idea what steps I am missing? Many thanks. 
      // how to update image description? $al = $pages->get($album); $pgfile = $al->images->getFile($file); $al->of(false); $pgfile->description = "Test description"; $al->save(); // to delete an image - this works $al->of(false); $al->images->delete($file); $al->save();  
×
×
  • Create New...