Front-end editing reinitialize JS after save

[alexcapes]

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?

 

[ryan]

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?

[alexcapes]

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?

 

 

[ryan]

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. 

[alexcapes]

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.

[ryan]

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. 

[alexcapes]

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
});

 

[hettiger]

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"