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