Jump to content
alexcapes

Front-end editing reinitialize JS after save

Recommended Posts

Hi,

I'm using the excellent new front-end editing in PW 3.0.30 on a new project.

I have a slick carousel that contains editable content. I'm able to edit the content in the slideshow fine but when I save, the page shows without the carousel initialized.

Is it therefore possible to reinitialize something like slick after saving in front-end editing?

 

Share this post


Link to post
Share on other sites

Alex, an idea here, but I've not tried it yet. If you find it works, I can update our PageFrontEdit.js in a similar manner to trigger the events mentioned below.

What's needed is an event triggered that you could monitor and then re-initialize your carousel. First you'd need to update the /wire/modules/Page/PageFrontEdit/PageFrontEdit.js file

Starting at line 283, you'll see this:

copy.hide();
orig.show();

Update that to this:

copy.hide().trigger('pwreloaded');
orig.show().trigger('pwreloaded');

Then in your own JS, monitor the event and re-init your carousel when it occurs. Something like this:

$(document).on('pwreloaded', function() {
  // whatever your carousel init code is, for example: 
  $(this).find('.my-carousel').carousel(); 
}); 

Let me know if something like this provides what you are looking for?

  • Like 2

Share this post


Link to post
Share on other sites

Ryan, thanks for the quick answer. If I add in your updates to /wire/modules/Page/PageFrontEdit/PageFrontEdit.js and then add this to my JS:

$(document).on('pwreloaded', function() {
  console.log("reloaded");
});

Nothing appears in the console when I save edits on the front-end.

Any ideas on where it's going wrong?

 

 

Share this post


Link to post
Share on other sites

Make sure you've got the JS console in Chrome open or something, so that cached files aren't a factor. I'm trying to write about this without being at my computer where I can test it, so take these more as pointers rather than exact code. But you might need to expand that event handler to something like this: 

$(document).on('pwreloaded', '.pw-edit-orig', function() {
  // ...
});

The front-edit editor uses wrappers <div class='pw-edit-orig'> and <div class='pw-edit-copy'> where "orig" means the original container, and "copy" means the copy for editing. 

Share this post


Link to post
Share on other sites

This now works on editable text fields, only when a change to the text has been made:

$(document).on('pwreloaded', '.pw-edit .pw-edit-copy', function() {
  console.log("reloaded");
});

I'm looking at getting it working on a repeater field, which is the modal edit view. I've tried using:

$(document).on('pwreloaded', '.pw-edit-modal', function() {
  console.log("reloaded");
});

But no luck with it yet.

Share this post


Link to post
Share on other sites

For the modals, after line 352 of PageFrontEdit.js there is setBusy(false); Try adding this right before or after that line:

t.trigger('pwreloaded');

I think that will work. But another route is that when the modal window closes a 'pw-modal-closed' is triggered, and that can be captured. That line 352 is within such an event handler, which may serve as a potential implementation example. 

  • Like 1

Share this post


Link to post
Share on other sites
14 hours ago, ryan said:

For the modals, after line 352 of PageFrontEdit.js there is setBusy(false); Try adding this right before or after that line:

t.trigger('pwreloaded');

I think that will work. But another route is that when the modal window closes a 'pw-modal-closed' is triggered, and that can be captured. That line 352 is within such an event handler, which may serve as a potential implementation example. 

Thanks Ryan.

Adding:

t.trigger('pwreloaded');

After 352 and using this in my JS worked for me...

$(document).on('pw-modal-closed', '.pw-edit-modal', function() {
  // my code goes here
});

 

Share this post


Link to post
Share on other sites
On 17.8.2016 at 9:26 PM, ryan said:

Make sure you've got the JS console in Chrome open or something, so that cached files aren't a factor. I'm trying to write about this without being at my computer where I can test it, so take these more as pointers rather than exact code. But you might need to expand that event handler to something like this: 


$(document).on('pwreloaded', '.pw-edit-orig', function() {
  // ...
});

The front-edit editor uses wrappers <div class='pw-edit-orig'> and <div class='pw-edit-copy'> where "orig" means the original container, and "copy" means the copy for editing. 

Just wanted to note that there seems to be a typo.

$(document).on('pw-reloaded', '.pw-edit-modal', function() {
    console.log("reloaded");
});

This will work just fine and is probably the better approach than going with "pw-modal-closed"

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Majesrse
      Hey i have a problem with the code:
      $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3) because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

       
      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

       
      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

       
      The Problem
      Time Slots and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you select a date 2 times or when you select a date 1 time and then close the datepicker and reopen it again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version  
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      InputfieldDatetime.zip
       
      Kind Regards
      Orkun
    • By dragan
      What the f*ck JavaScript? A list of funny and tricky JavaScript examples
      Some really odd stuff there... worth scanning through. I chuckled more than once...
      "b" + "a" + +"a" + "a"; // -> 'baNaNa' NaN === NaN; // -> false (![] + [])[+[]] + (![] + [])[+!+[]] + ([![]] + [][[]])[+!+[] + [+[]]] + (![] + [])[!+[] + !+[]]; // -> 'fail' typeof NaN; // -> 'number' (It ain't new, so sorry if this has been posted previously here)
    • By John Bates
      Which is better Elm or Typescript?
×
×
  • Create New...