Prevent page reload – Stephen Sherrard Plugins

This topic has 6 replies, 2 voices, and was last updated 8 years, 9 months ago by Matt Stern.

Viewing 6 reply threads

Author

Posts
- July 28, 2015 at 6:56 AM #4559
  
  Matt Stern
  Participant
  
  Hi there,
  
  I was wondering if it was a possibility to prevent page reload when clicking “Sign up”. I have a page with multiple sign up sheets on it, and when it reloads, it reloads to the top of the page, leaving the user to scroll down and find the correct form.
  
  Is there some way we can specify a specific div id for each form to reload to? That would work perfectly – I don’t care if the page reloads, I just need it to stay at the correct place.
  
  Thanks!
- July 28, 2015 at 8:15 AM #4561
  
  Stephen Sherrard
  Keymaster
  
  That’s not possible without some custom coding.
  
  There are really only two ways to do that:
  
  1. Disable the default POST form submit and process the form via jQuery/AJAX so the page doesn’t have to reload. This would involve coding and loading custom jQuery code on the sign-up page, as well as adding a PHP function for the AJAX call to process and save the form data and return it to the jQuery script to display any messages/results.
  
  2. You could put anchor tags on the page and have the form post action specify the anchor tag to go to. However, you would still need to modify the signup form plugin code with some kind of conditional check so that you know which signup form is being generated and which anchor tag it should go to. Right now the action for the forms is simply a blank screen since the plugin posts the form to the same page that you are already on (so that plugin users can use it on any page).
  
  Neither solution is quick or simple, and would require quite a bit of custom programming. #1 is probably the preferred solution that is used more often these days. If you have a working budget, I’m happy to discuss privately what it might take to program that for you. But, since the free plugins are open source, if you or anyone you know has the programming skills, you can certainly give it a shot on your own.
- July 28, 2015 at 4:21 PM #4563
  Matt Stern
  Participant
  I actually fixed a lot of my problem by showing and hiding the forms using :target CSS. One last problem would be appending the correct anchor to the url so that the correct form stays showing after:
  1) Clicking “Sign Up >”
  and
  2) Clicking “< Go back to sign up sheet”
  
  Currently, this is what happens:
  1) Starting URL: site.com/volunteer
  2) After user selects form name from menu: site.com/volunteer/#formX
  3) Form appears, user selects “Sign Up >”: site.com/volunteer/?sheet_id=1&task_id=2&date=2016-06-30
  *needs to have #formX still appended to the end.
  4)Manually adding #formX to the end, it works – then click “back to sign up sheet”, it once again drops the fragment.
  
  Would this be fairly easy to do using JavaScript in combination with the plugin’s php?
  
  For example, at line 778 of class-pta_sus_public.php, could you pass in a variable containing the fragment, which was collected using JavaScript?
  <a href="'.esc_url($go_back_url).' . $FRAGMENT">
  
  I’m not sure if your form is GET or POST or exactly how to complete this – I have very limited knowledge of PHP.
  
  Is there a short PHP function that could accomplish grabbing the fragment from the JavaScript function?
  
  Thanks in advance for your help, as well as creating a great free plugin.
  - This reply was modified 8 years, 9 months ago by Matt Stern.
- July 28, 2015 at 4:59 PM #4574
  
  Stephen Sherrard
  Keymaster
  
  Maybe you need to explain a bit further:
  
  Are you putting several individual sign-up sheet shortcodes on the same page so that you see several sheets worth of tasks on one page? Or are you just using the main shortcode but have a really long list of sign-up sheets? Or are you talking about one specific sign-up sheet that has a very long list of tasks that the user needs to scroll through?
  
  Right now, any links that you click on for my plugin are adding arguments to the URL, so my plugin is checking the global GET variables to figure out sheet id, task id and date. The final signup form is a standard form that must is POSTed by clicking on the button to submit, and keeps you on the same page. If the form’s POST parameters are set, then my plugin processes the form data and gives you the success or error message on the same page. At that point, the URL in your browser has not changed.
  
  The Go Back link uses a function to remove all my query arguments from the current URL, so that everything is reset and you see the main list of sheets again.
  
  Unfortunately, as far as I know, there is nothing built into javascript that allows you to retrieve query parameters, but if you do a search for that, you can find some code snippets that others have written to get that from the window object. You would then need to search through the dom elements to find the links on the page (that were already generated by my plugin) and append your anchor fragment to the end of the links. It would also have to get that anchor fragment value from your page’s CSS, but then when you get to the next page, you have no way of knowing which of your forms generated the link that was clicked on.
  
  If you have several of my plugin’s shortcodes generating different output sections on the main volunteer page you are using, my plugin has no way of being aware of any additional CSS elements you may have added to the page. Each one of those shortcodes calls a function in my plugin, and that function simply returns some html content that WordPress uses to replace where that shortcode was. My plugin has no way of knowing what is before or after the shortcode, unless it was already part of the global GET or POST variables.
  
  There is also no direct communication between PHP (server side, all executed before returning html outpu) and javascript (browser side, all executed after the html content has alread been generated and downloaded to the browser). To communicate between javascript and PHP, you need to do an AJAX call, where the javascript posts some data back to the server, which runs a pre-specified PHP callback function that then returns a response back to the javascript.
  
  Unfortunately, unless I’m totally misunderstanding what you want to do, there is no simple and easy solution to what you want to do.
  
  I’m happy to talk with you privately if you want to discuss hiring me to code a custom solution for you, otherwise you could put your ideas into the feature request section.
- July 28, 2015 at 5:30 PM #4576
  Matt Stern
  Participant
  Sure, let me just clarify a little to see if that helps-
  
  Originally, I had multiple different signup forms on the same page using the id=”” argument in the plugin shortcode.
  
  I then moved to surrounding each in a div with a unique id, so I could choose which to show and hide using a simple menu with an anchor/href/link to each div, and :target pseudo in CSS to show it.
  
  My final issue that I feel can be solved without too much effort – seeing from the post I found elsewhere that I will link to in a bit – is re-appending whatever the current fragment is after your plugin rewrites the url. This is the best possible option (besides rewriting the submission process to use jQuery/AJAX as you suggested) that I have found, as I am aware that your plugin wouldn’t know what div it was surrounded by.
  
  In “Option B” of this post http://stackoverflow.com/questions/2317508/php-get-value-from-url-after-sign/2317518#27370176 it describes how you can use javascript to pass this info to the PHP code used when those links are clicked. Whether this actually works, I don’t know, but it seemed like it was the right path.
  
  That’s why I am asking here, because I feel like it is tweaking of the code snippet in the SO link above, combined with simply adding the variable into the plugin code in a couple spots.
  
  Link to my signup page: http://summitsharks.net/volunteer-signup-page/
  
  Right now I have it all showing the same exact form (id=”1″) but once functional I’ll be creating a unique one for each link in the menu. Each is however surrounded by a uniquely id’ed div.
  
  Thanks again for taking the time to read through my essays here.
  - This reply was modified 8 years, 9 months ago by Matt Stern.
  - This reply was modified 8 years, 9 months ago by Matt Stern. Reason: add link
- July 28, 2015 at 7:50 PM #4580
  Stephen Sherrard
  Keymaster
  OK… I appreciate the detailed posts and what you are trying to do, and the link to a potential solution. However, it still involves modifying the plugin to add/enqueue some javascript as shown in that link, and then modifying the PHP part of the plugin to see if that parameter has been added to the form, and add it to all the generated links. Not something that would necessarily be useful to anyone else, and still belongs in the “feature requests” category with all the other requests that people ask for (plus all the others that people email me about without adding them to the feature requests section).
  
  However, there may be a slight work-around that may do what you want. In that link to your own signup page you gave me, seems like you have a simple list of dates/sheets that are clickable links that then open a sheet with the list of tasks.
  
  Here is what you can do, and that I have tested with my own plugin:
  - Create a separate page/post for each sheet and use one shortcode with the id argument that goes with the sheet you want to show on that page.
  - In my plugin settings where there is a select box to set the main volunteer page, leave that set to “none”
  - Create a page like your main volunteer page where you have links to each of those pages you just set up.
  If you do the above, and they go to one of those pages with the single id shortcode, and then click on something to signup for, after they signup and click to go back, they will go back to that specific signup sheet page they started (because you haven’t set up a default page in the options to return to).
  
  Optionally, you can also purchase my Groups extension:
  https://stephensherrardplugins.com/plugins/pta-volunteer-sign-up-sheet-groups/
  and then you can arrange sign-up sheets into groups and use a shortcode to display just that group’s list of sheets. When the groups shortcode argument exists, the return links will be reworded to direct them back to the page with the shortcode for that group.
  
  Perhaps one of these methods might work for you without any additional custom programming.
- July 29, 2015 at 12:56 AM #4582
  Matt Stern
  Participant
  Thanks a lot for your help – it has really guided me in the right direction to solve my issue. I believe I solved my issue by doing the following –
  
  I moved all of my forms onto another page – not separate pages though, one single page.
  
  I now have the following ajax/jquery code running that handles showing the correct form when it is selected:
```
;(function($){
var ahref1;
$(document).ready(function(){
  $(document).on('click', '.entry-content li a', function(e){
    e.preventDefault();
    ahref1 = $(this).attr('href');
    $('#formloader').load('/testpage ' + ahref1);
    return false;
  });
});
$(document).ready(function(){
  $(document).on('click', '.entry-content #formloader a', function(e){
    e.preventDefault();
    var ahref2 = $(this).attr('href');
    $('#formloader').load(ahref2 + ' ' + ahref1);
    return false;
  });
});
})(jQuery);
```
  This seems to work exactly as intended – once again, thank you for your time!
Author

Posts

Viewing 6 reply threads

You must be logged in to reply to this topic.