Post preview - Passing data with AJAX and Fancybox

Question

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?

is either ajax or iframe ... try without `data-fancybox-type` — JFK, Jan 14 '13 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 '13 at 18:04
#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 '13 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 '13 at 02:19
Yes, this is what I want to do. Im also trying with do call preview window this way: and then all data from the form appears, but in a new page, not in a Fancybox window... Maybe there is some way to join this two ways? — kacper, Jan 15 '13 at 09:37

score 18 · Accepted Answer · answered Jan 15 '13 at 17:40

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)

answered Jan 15 '13 at 17:40

JFK

40,963
31
133
306

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 '13 at 22:46
My reputation is too poor to click "up", so I just can click "OK" :) – kacper Jan 15 '13 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 '13 at 23:53
@kacper most likely your preview.php is also loading some js scripts or jQuery that creates conflict afterwards – JFK Jan 16 '13 at 00:20
JFK, you're a GENIUS! You can't imagine how much you helped me - your script is a solution for my two main problems in a big CMS. I will use it to preview a post (offer precisely) and to pass data to generate PDF files. I think your script also can help other webmasters, because I saw couple of similiar questions to my. :) – kacper Jan 16 '13 at 11:32
Can someone explain what the url variable in the AJAX call does? I'm not sure what to set it to in my own code. – thumbtackthief Jun 19 '13 at 21:46
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 http://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 '13 at 22:29
@JFK, It does not disable vertical scrollbar(scrollbar of viewport not of fancybox) in my case. – shweta Aug 22 '13 at 07:55
@shweta : I guess your issue has nothing to do with this post and may have different settings. Why you don't open a new question with your own particular code? – JFK Aug 22 '13 at 09:04
@JFK Unfortunately, it did not worked for me. Could you please have a look at [this](http://stackoverflow.com/questions/31351626/jquery-fancybox-with-ajax/31352383) question? Thanks in advance. – Jack Jul 11 '15 at 13:54
Does this also work for fancybox V1 (for example 1.2.4) ? I've tried it, but it didn't work for me. – Tim Aug 07 '15 at 12:54
@Tim It should, just bear in mind that `.on()` requires jQuery v1.7+ – JFK Aug 07 '15 at 14:23

score 2 · Answer 2 · edited May 23 '17 at 12:09

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

@JFK maybe something wrong with your `loginTest2.php`? here is [fiddle](http://jsfiddle.net/vladkras/5s2e73tq/) and it does work. Also read a little about [serialize() and serializeArray() difference](http://stackoverflow.com/a/10430571/1713660) — vladkras, Jan 17 '15 at 05:54
@JFK as far as you deleted your css, let me post [updatedd fiddle](http://jsfiddle.net/vladkras/5s2e73tq/1/) 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 '15 at 06:20
@JFK Really? You need an explanation? Ok, that means, that sometimes `aceppted != correct` I edited my post with working solution and [fiddle](http://jsfiddle.net/vladkras/5s2e73tq/3/), but of course you can keep ignoring or downvoting and trying to delete answer that is better than yours — vladkras, Jan 19 '15 at 04:46

score 0 · Answer 3 · answered May 01 '13 at 11:28

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

answered May 01 '13 at 11:28

Theresa Forster

1,914
3
19
35

Thanks Theresa, I'll try this way in my new project :) – kacper Jan 13 '14 at 14:52

Post preview - Passing data with AJAX and Fancybox

3 Answers3

Linked

Related