Form pop-ups in light boxes are a great feature, but you need to be careful
how you design them, and there are several things to take into
consideration.

If you're injecting you're content from an ajax call into you lightbox you
may find it useful to have the same content running on a page without a
lightbox. This way users with JS disabled can still perform the same
functionality. Disabling the layout for all ajax calls will give you just
your view content, which is exactly what you would want to inject into a
light box.

    // disable the layout by default for any ajax calls
    if ($this->_request->isXmlHttpRequest())
    {
      $this->_helper->layout->disableLayout();
    }

Now, onto the JS side of things. Things you need to consider are:

* Do you need a file upload on this form?
If you're doing file uploads, then you cant pass this via AJAX you're best
bet is to ditch the lightbox concept and forward the user onto a page that
handles the form, or load the form within an iframe.

* Do I want to add JavaScript behaviours to elements that are being injected
into my lightbox?
Most sites will have a main JavaScript file that takes care of initialising
any events that need to be added to elements after the page has loaded.
Typically we use window.load to run a group of initialisations, or with
jQuery $('document').ready. Now, to add behaviours to my injected content I
would want to run the same initializations I'm setting if loading the
content on its own page (as mentioned above). So I would suggest adding
these to a single callable function. Like so..

// To be run upon document load
$('document').ready(function(){
        siteInit();
});

Now I can start adding my initializations within this

function siteInit()
{
  // init methods
}

* Are form submission on a lightbox going to immediately effect the content
of my main page?
This can start to get quite tricky as your essentially going to have to
handle injecting the content into the page upon successful form submission.
Of which there may be several components, which may also require JS
behaviours adding to. Although this can be done, I personally find simply
reloading the parent page after the box is closed a much easier way of
handling these. You're going to have reload the page eventually, and I
believe continuously trying add hook, trigger event and inject content
problematic. Lets not abuse and over use it. Upon page reload you now have
your fresh content driven from the DB.


I would then go onto to create a function that I can simply pass a page
element (typically an anchor tag)  that ties all the functionality I need
for adding the click event, retrieving the content and posting submissions.
Here's an example using the colorbox from http://colorpowered.com/colorbox/


function configureColorBox(obj)
{
        obj.click(function(){
          var location = $(this).attr('href');
          $.get(location, function(data){
              $.fn.colorbox({
                html: data,
                opacity: 0.7,
                height: "650",
                width: "780",
                onClosed: function(){
                  window.location.href = window.location.href
                }
              });
              initColorBox(location);
           });
           return false;
        });                       
}


I'm adding the click event, as its an anchor tag I know the location of my
page from the href. Upon click I want to bring up the colorbox which will
retrieve its content from the href location. If the box is closed at any
point lets refresh the page (as discussed above).

Once the colorbox is up, I now need to add my behaviours which we discussed
earlier. Because we seperated out our initializations into a seperate method
we can now call it from within the initialisation of the colorBox.

function initColorBox(path) 
{
        // re-run the document load initialiser, this will append any JS events
required to the page
        siteInit();

        $('#submit').click(function(){
                submitColorBox(path);
            return false;
        });
}

You can see I've also created a custom click event on the forms submit
button. This way I can catch the click and instead of allowing the page to
perform a submit (page refresh) I can instead gather up all the form values
and post / get to the submit location. You can also add in additional hooks
for things like a back button for example.

        $('#back_button').click(function(){
           $.fn.colorbox.close();
           return false;
        });

So now we submit the content, and any response will get injected back into
the lightbox. I wrapped my form within a div (ajax_wrapper) in my view so I
can get a hook on a parent element. I can then replace anything retrieved
back from my request into the lightbox.


function submitColorBox(path) 
{
        var variables = $('#ajax_wrapper form').serialize();
        $.post(path, variables,
           function(data){
                // callback
                 $('#ajax_wrapper').replaceWith(data);
                 initColorBox(path);
        });
}

I then re-run my lightbox initializations to ensure all my behaviours and
additional hooks are re-added. Now this is all set up we simply have to
start adding elements we would like to trigger the lightbox functionality
into out site initialization.

function siteInit()
{
  // init methods

  configureColorBox($('#link1'));       
  configureColorBox($('.link-class'));
}

With this configuration I dont have to worry about injecting specific
results back into my page. Error messages that are typically produced on the
page are simply returned with the rest of my content. You also have
completely the same functionality between the content injected into the
light box, and the non-js friendly page.



Hope that helps.


Lee Davis




--
View this message in context: 
http://zend-framework-community.634137.n4.nabble.com/Zend-form-in-a-popup-fancybox-lightbox-etc-tp3436591p3436812.html
Sent from the Zend Framework mailing list archive at Nabble.com.

-- 
List: fw-general@lists.zend.com
Info: http://framework.zend.com/archives
Unsubscribe: fw-general-unsubscr...@lists.zend.com


Reply via email to