Jump to content

Modal pop-up for page editing - problem with dynamically generated page tree


Rob
 Share

Recommended Posts

I am trying to write a module that adds a link to the page listing to allow for editing a page in a modal pop-up window rather than loading a new page for the edit.  The idea is that if I use a nested data-page structure to get around the inability to have nested repeaters then it would be nice to be a faster workflow to add/edit/save those child data-pages without leaving the site tree.

I had a look for existing modules/settings but couldn't find anything.

So next up, I'm thinking I can make the edit page appear in a fancybox modal. The problem I've run into is that I can't work out how to "attach" the fancybox to links that are being generated on-the-fly using AJAX which is how I believe the page tree is rendered.  So at the "page ready" state the links don't yet exist so the fancybox attach code doesn't do anything.

Can anyone suggest a way around this or point me in the direction of an existing module or code that can help?

Thanks!

Link to comment
Share on other sites

Thanks for your help, but I'm not sure that's what I'm after. I don't want to add edit links to my generated pages, I want to add an extra edit link to the page tree in the back-end so that I can click "modal edit" and have the regular page editor load but in a modal window so I don't have to leave the page tree.

This may well gives some pointers though, so thanks.

  • Like 1
Link to comment
Share on other sites

Thanks all.

I had the delegation+selectors correct, it's just that I needed to trigger('click') the fancybox manually.

Soma - learned a lot from examining your module code so thanks! I'll probably just use your module because it is ready-to-go, but always good to learn more about the plugin API but also JQuery in particular as it's one of my weak spots.

Link to comment
Share on other sites

  • 1 year later...

Hi there i open this old topic for a question....i'm trying for a few hours to get simple add a class and the modal=1 option on the pagelisttree....and i don't get it.

i've searched - studied somas module....

all i've got is this

1. I have a Custom Admin Page (djogos addon) with renders a PageListTree with a specific ParentPage and a template file under /site/templates/myadminpage.php like: (works great)

$formImages = $this->modules->get('InputfieldForm'); // prep the form

$wrapperImages = new InputfieldWrapper; // a wrapper
$wrapperImages->attr('value', '<h2>Bilder</h2>');

$i = $this->modules->get('ProcessPageList'); // get the pagelist process
$i->set('id', 1015); // setting the parent page

$pageTreeImages = new InputfieldMarkup; // the placeholder
$pageTreeImages->value = $i->execute(); // fill the InputfieldMarkup form field...

$wrapperImages->add($pageTreeImages); // put inside the wrapper...
$formImages->append($wrapperImages); // append the wrapper

echo $formImages->render();

2. I'm calling the Core scripts for the magnific lightbox like (works easy and great)

$this->modules->get('JqueryMagnific');

3. i'll try to add simple modal=1 and a lightbox class to the a tag with this jquery script

$(document).ready(function() {

    //add trigger class and modal setup
    $('.PageListActionEdit a').each(function(){
        $(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
    });

    //setup lightbox
    $('.lb-edit').magnificPopup({
        type: 'iframe',
        disableOn: 0
    });
});

so it seems to work only in the first level of the PageListTree....not in the second levels!!??

i don't get it - searched for :visible selector tried some other selectors to get it but no success...

maybe somebody knows why the hidden pagelists don't get it - are they build via ajax calls and i don't get this a href's to change?

i'm sadly not so skilled with jquery that i figure it out.

regards mr-fan

Link to comment
Share on other sites

so it seems to work only in the first level of the PageListTree....not in the second levels!!??
 
That's true, because other levels are not yet in the DOM. You have to wait for the AJAX complete event to run your scripts.
// maybe this is what you're searching
$(document).ajaxComplete(function() { console.log("Now, you can do something") });
  • Like 1
Link to comment
Share on other sites

Great BIG Thankyou!!!!

I tried so much - since i thought it should be an easy way here....it works like a charm.

I will present it on a casestudy - i've done my first project with a Adminpage for images (manage images as pages central) and since i don't wanna fall back to the /page/ while editing i search for some fancy way with a lightbox it works as expected.

here is the complete code for a simple template that runs with CustomAdminPage

http://modules.processwire.com/modules/process-admin-custom-pages/

<?php
// Bilderübersicht Custom Admin Page
?>
<style type="text/css" media="screen">
    /**
     * larget magnific popup
     */
    .mfp-iframe-holder .mfp-content {
        max-width: 1200px!important;
    }
</style>
<script type="text/javascript">
$(document).ajaxComplete(function() {

        //add trigger class and modal setup
        $('.PageListActionEdit a').each(function(){
            $(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
        });

        $('.PageListActionNew a').each(function(){
            $(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
        });

        //setup lightbox
        $('.lb-edit').magnificPopup({
            type: 'iframe',
            disableOn: 0
        });
});

</script>

<?php

//get Magnific css and js
$this->modules->get('JqueryMagnific');

//render PageListtree with setting the parent page
$formImages = $this->modules->get('InputfieldForm'); // prep the form
$wrapperImages = new InputfieldWrapper; // a wrapper
$wrapperImages->attr('value', '<h2>Bilder</h2>');
$i = $this->modules->get('ProcessPageList'); // get the pagelist process
$i->set('id', 1015); // setting the parent page
$pageTreeImages = new InputfieldMarkup; // the placeholder
$pageTreeImages->value = $i->execute(); // fill the InputfieldMarkup form field...
$wrapperImages->add($pageTreeImages); // put inside the wrapper...
$formImages->append($wrapperImages); // append the wrapper

echo $formImages->render();

So i've used the PageListTree with a preselected parent and the edit function works within the modal.....

It's not my threat so i couldn't vote for best answer!

Best Regards

  • Like 2
Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...