6

I'm trying to do a post preview, which will appears in a new Fancybox iframe. Since couple of weeks I'm looking for some help or best practices, but I can't find it.

My main problem is to pass the data from form (before updating database) to Fancybox window. My AJAX skills are very poor, so maybe my problem isn't so hard.

Please check the code:

$('.preview2').fancybox({
fitToView    : false,
width        : 905,
height        : 505,
autoSize    : false,
closeClick    : false,
openEffect    : 'none',
closeEffect    : 'none',
ajax: {
    type: "POST",
    cache : false,
    url: "preview.php",
    data: $('#postp').serialize()
}
});

And a calling link:

<a class="preview2" data-fancybox-type="iframe" href="preview.php" id="preview2">Preview</a>

I'm almost sure everything is fine with preview.php file, just posting the variables and printing it in right places.

Can someone check Fancybox / AJAX part?

6
  • is either ajax or iframe ... try without data-fancybox-type
    – JFK
    Jan 14, 2013 at 17:53
  • Good day JFK, it's me once again. Removing data-fancybox-type causes a "The requested content cannot be loaded. Please try again later" error.
    – kacper
    Jan 14, 2013 at 18:04
  • what is in #postp ? ... got any demo site ?
    – JFK
    Jan 14, 2013 at 18:05
  • #postp is an ID of the form. Do you think demo site will help you? It can be problematic to giving someone else access to panel, but if it's needed I can try to do this ;)
    – kacper
    Jan 14, 2013 at 21:56
  • beware that in order to "preview" the form, you have to submit it (via ajax) ... is that what you want to do? If so, I am afraid that you would need to move to a manual method in any case.
    – JFK
    Jan 15, 2013 at 2:19

3 Answers 3

18

As I mentioned in my comments, your preview button should submit the form via ajax to get the POST preview values (we'll use ajax instead of iframe) so :

<a class="preview2" data-fancybox-type="ajax" href="preview.php" id="preview2">Preview</a>

Then you would need to bind the preview button to a manual on("click") method to submit the form via ajax firstly ....and then post the results in fancybox secondly like :

$(document).ready(function () {
  $('.preview2').on("click", function (e) {
    e.preventDefault(); // avoids calling preview.php
    $.ajax({
      type: "POST",
      cache: false,
      url: this.href, // preview.php
      data: $("#postp").serializeArray(), // all form fields
      success: function (data) {
        // on success, post (preview) returned data in fancybox
        $.fancybox(data, {
          // fancybox API options
          fitToView: false,
          width: 905,
          height: 505,
          autoSize: false,
          closeClick: false,
          openEffect: 'none',
          closeEffect: 'none'
        }); // fancybox
      } // success
    }); // ajax
  }); // on
}); // ready

See DEMO (feel free to explore the source code)

12
  • Thanks a lot! Your DEMO works perfect, it's what I need. I'm trying to run your script in my CMS. At this moment after clicking link nothing happens, so I think some other scripts disturbing. I'll give feedback later, I think it'll work. Thanks once again! :)
    – kacper
    Jan 15, 2013 at 22:46
  • My reputation is too poor to click "up", so I just can click "OK" :)
    – kacper
    Jan 15, 2013 at 23:24
  • It works! The problem was some part of the code in my preview.php file... But I discovered another problem - I can open preview file only one time (without refreshing of course) - at second, third, etc. time in Firebug appears error: TypeError: $.fancybox is not a function closeClick: false
    – kacper
    Jan 15, 2013 at 23:53
  • @kacper most likely your preview.php is also loading some js scripts or jQuery that creates conflict afterwards
    – JFK
    Jan 16, 2013 at 0:20
  • 1
    @thumbtackthief : the url refers to a file (normally a php file) that will pre-process the form and, in this case, will return the value of the input fields into fancybox. Check here stackoverflow.com/a/16956120/1055987 for an example of that php file.... if you don't know your way around in php, it won't help that much though
    – JFK
    Jun 19, 2013 at 22:29
2

I don't like the solution, so I will post my own investigation.

Why writing code with 1. .on("click", ... 2. e.preventDefault 3. $.ajax 4. this.href just to call fancybox on success, that already has all this functions inside?

If you decide to use ajax instead of iframe (like in accepted answer) you could simply add type property to fancybox() call, cause it's beening checked, and pass all other

$('.preview2').fancybox({
    type: "ajax",
    ajax: {
        data:  $('#postp').serialize() 
     // url: "someurl.php" not needed here, it's taken from href
     //                    if you need it, e.g. you have a button, not a link
     //                    use "href" property that overrides everything
     //                    not attribute, cause it's invalid
    }
 // href: "url_to_add_or_override_existing_one",
 // all other effects
 // afterLoad: function () { // other cool stuff }
});

EDIT As @JFK pointed it's not enough, you have to get form data each time you click the link, so beforeLoad() needed instead of data. Finnaly:

$('.preview2').fancybox({
    type: "ajax",
    beforeLoad: function() {
        this.ajax.data = $('#postp').serialize();
    }
});

You can remove all data-* atrributes too

FIDDLE

KISS

3
  • @JFK maybe something wrong with your loginTest2.php? here is fiddle and it does work. Also read a little about serialize() and serializeArray() difference
    – vladkras
    Jan 17, 2015 at 5:54
  • @JFK as far as you deleted your css, let me post updatedd fiddle with css from CDN. Also I have to confess, that serializing form doesn't work properly in fancybox when you change input's value. It seems to be freezed on initializing state
    – vladkras
    Jan 17, 2015 at 6:20
  • @JFK Really? You need an explanation? Ok, that means, that sometimes aceppted != correct I edited my post with working solution and fiddle, but of course you can keep ignoring or downvoting and trying to delete answer that is better than yours
    – vladkras
    Jan 19, 2015 at 4:46
0

I have tried a more interesting way with fancybox that works,

in the fancybox page

var myvar;
$(document).ready(function(){
    myvar = parent.$("#formvariwant").val();
});
1
  • Thanks Theresa, I'll try this way in my new project :)
    – kacper
    Jan 13, 2014 at 14:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.