Jump to content
MilenKo

User profile fields edit/save from Frontend using Modal or Inline edit

Recommended Posts

Hello all.

Not sure if I would be able to describe the need properly, but I am building a custom frontend for logged on users which would have its own Profile template allowing to modify just some specific fields (email, password, skype, etc.)

Spoiler

image.png.f36063f5ea29b20ff30d05c81205196e.png

To allow modifications from the custom user profile, I am using a simple MODAL that would allow the user to define the desired value for the field and then click on Save to have it populated. Normally I've used a modal with a single button, however in this scenario I need to catch the click of Save button which would then trigger the page/template field to save.

image.png.eee87b7b428d4ba03478eb003ed00c25.png
So far I've found a few options using JavaScript to show the modal window and using the class to determine which of the buttons is saved, however I am not sure how would I populate the value of the form to the specific field once the Save button is clicked. Logically, I could open a specific URL using JavaScript including some segments /field_name/field_value/ and then point the POST action to another template that would read the segments and apply the changes, however I am not able to populate the field_name and field_value from the form to JavaScript URL.

I might be overthinking the things, however its worth mentioning that all the registered users should not have access to the admin so I am in doubt how to achieve that.

I was able to modify a JavaScript that might be a perfect fit for my needs, I just need to find a way to save the new field value to the user profile once the save button is clicked:

Spoiler

<!-- https://stackoverflow.com/questions/39290411/disable-and-enable-textbox-for-edit-and-save-information -->
<form name='' id='' action='' method='post'>
  <input type='text' name='txt_category' id='category' value='$category' disabled>

  <input type="button" name='edit' value='edit'>
  <input type="button" name='save' value='save'>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

  $(document).ready(function(){

    $("form input[type=text]").prop("disabled",true);

    $("input[name=edit]").on("click",function(){

      $("input[type=text]").removeAttr("disabled");
    })

    $("input[name=save]").on("click",function(){

      $("input[type=text]").prop("disabled",true);
    })


  })
</script>

 

If you have a working example or a simpler approach I could use, would be greatly appreciated as always.

Share this post


Link to post
Share on other sites

Is the profile going to be saved "outside" of the modal? And then you'll click Save on the profile page? Does the modal have some documentation? It probably has a save/close callback so you can then get the value of the modal form field and copy it to your main profile form. 

It seems a little strange to open up a modal to edit a text field, why not right there on the input? Obviously I might lack context. 

Share this post


Link to post
Share on other sites

Hello @elabx The idea to use the modal is to allow only the value of a specific field to be updated once the Save button is clicked. We won't be forwarding the user to edit his profile directly but would instead have a custom Profile template that would allow some fields to get updated. The need is to have a few fields locked for editing after the user register. All the other fields added to the user profile can be modified individually.

The modal would have just a small form with input field and some description text which would allow the registered user to modify the current profile field value (eg. email change, password change, Internet Messengers etc.)

Share this post


Link to post
Share on other sites

Since you didn't specify whether this was a front-end interface or back-end, I'll assume you want this functionality on the back-end.

You can add whatever fields you want to the user template.

Then you can enable fields the user is allowed to edit from the Modules > Configure page by selecting the Settings button for the User Profile option.

Let us know if you want something similar on the front-end.

Share this post


Link to post
Share on other sites

Hello @rick. I believe it must have slipped through with you as I did mention that the need is to modify specific fields after user confirmation from the FRONTEND which is in the title of the post and mentioned in it.

I am well aware that if the user has access to the admin area, it would be an easy task to achieve, however the project idea is to have users registering a profile or their own page with ought any direct access to the admin panel. For every login need there will be a dedicated template to be served and that is why I asked as so far I've not dealt with users that are not allowed to access PW admin and I don't have much experience with such need.

I've seen a few amazing modules that would have done the work for me (FEEL of @tpr and a few others), however I am not sure if the modules can modify a field from the currently logged on user and not from a page. For FEEL I know that can modify the page template, however so far I've not had much success with achieving what is needed.

Again, if the project required to have the entire user profile edited the way the user needs it, it would have been super easy to achieve with LoginRegister Pro module which I use for user identification, however some of the fields that are required to be added during registration would NOT BE ALLOWED to modify after. Not sure if there are any hooks that would prevent a specific profile field to be restricted for editing (excluding the option to tackle/hide the fields with CSS etc.)

Btw, your puppy avatar RULLZZ 🙂

Share this post


Link to post
Share on other sites

Hello @MilenKo,

My bad. I apparently skipped right over the front-end spec in the title.

What css framework are you using for the front-end? For example, bootstrap.

The only difference between the back-end and the front-end is you have to do the manual procedure on the front-end. So, add the fields that you require to the user template. You populate whichever fields after registration/confirmation. When the need arises for a user to edit their profile, simply present a form with only the fields they are allowed to change. Users are accustomed to working with a complete form rather than clicking a fieldname in a list to add or edit the field data. Especially if there are quite a few fields.

Hope this helps.

PS. Thanks! Dogs are the best. They don't care what kind of day you had, they are always glad to see you.
In fact, lock your dog and your girlfriend in the trunk of your car for an hour, then let them out and see which one is glad to see you.

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 Raymond Geerts
      Trekkerweb Supply & Demand
      https://markt.trekkerweb.nl/
      Trekkerweb.nl brings agricultural mechanization news and supply & demand together in a single online platform for all the tractor and machine enthusiasts and others interested in the mechanization sector.

      The site is multi-language with English as default. None Dutch browsers will get the English version of the site, currently we are finetuning the German version which will be available somewhere in the near future.
      The search page in English and Dutch language
      - https://markt.trekkerweb.nl/search/
      - https://markt.trekkerweb.nl/nl/zoeken/

      Used modules
      Profields Table Profields Textareas MarkupLoadRSS (fetches brand related new from the main website) PageImageManipulator 2 (PIM2) (for placing watermark image) ProCache ProcessGetVideoThumbs TextformatterVideoEmbed WireMailSmtp LanguageSupport (Site is multi language: Dutch, German and Default English) Couple of custom made modules for user profiles and cross page linkage of the datamodel
      (Bower) components
      awesome-bootstrap-checkbox bootstrap-dropdowns-enhancement-sass bootstrap-sass bootstrap-select font-awesome formvalidation.io hashids jquery jquery-file-upload jquery-throttle-debounce jquery.mmenu js-cookie lifestampjs moment semantic-ui-sass verge
      Front-end user profiles (custom module)
      Account registration Customizable fields (in module settings) Per field privacy configurable (private, public, on a per user basis). Front-end login/ logout Reset password Email activation for account Request activation mail View profile Public profile Edit profile Set profile picture (cover image and avatar) Modify password Language choice Profile dashboard Front-end Ads management Create new ad Edit existing ad Manage media (images / video) Preview and approve ad Remove ad
      Data model
      Categories Subcategories Brands Input fields Options An intuitive data model drives the whole site. A couple custom made modules take care of the cross page assigning of categories to subcategories and brands. Per subcategory we are able to assign the related input fields and options which will be rendered on the 'Create new ad/ Edit ad' form page and combined with the given values rendered on the ad detail page.


      Database caching + Pro caching
      One of the challenges was to keep the whole project as low weight as possible. Since the data model with categories, subcategories, brands, inputfields and options is the backbone of the site we came up with the solution to have the names, titles, ids, and relations between them cached. Completely as json/javascript with pro cache and separated with database caching.
      With the Wire Fuel we made the $dm object available for accessing anywhere in PHP and globalJS.dm from within javascript. This means the whole data model is called only once per request, and while it exists in the database cache and pro-cache it is incredibly fast.

      Subcategory page
      The first image shown below represent one of the subcategories (Tractors) with assigned categories, brands, input fields and options. The image there after is a screenshot of the add ad page, where the input fields, options and brands are dynamicly rendered after being loaded via Ajax.



      Other features
      cookie based favourites cookie based last-viewed list advanced filter search related ads Thanks to the whole team (Ferdi, Bastiaan, Alex, John, Hessel) and last but not least Ryan for creating ProcessWire and all module developers out there
×
×
  • Create New...