Posting data to a colorbox iframe?

Question

Here is the code I'm working with. From other examples I've seen, this should work but it is not. And have already made sure that I am using the latest colorbox.

function updateFolderCate(ID,Type){
    $.colorbox({
        iframe:true,
        scrolling: false,
        innerWidth:'100',
        innerHeight:'100',
        href:"page.php",
        data:{LinkID:ID,itemType:Type},
        onClosed:function(){
            //Do something on close.
        }
    });
}

Elver

It mentions on the colorbox site - For submitting GET or POST values through an ajax request. The data property will act exactly like jQuery's .load() data argument, as ColorBox uses .load() for ajax handling. So I went to jquery site, .load needs the data to be object to assume post. How do I do this with colorbox? – Elver

Answer 1

You are setting iframe to true. What this does is opens a colorbox, creates an iframe, and sets the src attribute of the iframe to the location specified by href. So logically this can't do POST requests. This might accomplish what you want but I'm not sure.

function updateFolderCate(ID,Type){
    $.colorbox({
        open: true,
        scrolling: false,
        innerWidth:'100',
        innerHeight:'100',
        href:"page.php",
        data:{LinkID:ID,itemType:Type},
        onClosed:function(){
            //Do something on close.
        }
    });
}

This isn't going to behave exactly like the iframe method does, you may have to rework your endpoint. If your endpoint doesn't HAVE to only receive POST requests then go with earlonrails' answer.

EDIT: I came to this after diving the source code: Source

The relevant lines are line 800 and line 856. iframe and href didn't seem compatible, so then I inspected the element that was loaded in Firebug and noticed it was an iframe with the src attribute set to the href variable.

Blame

Thanks Erik! I tested this code out and it worked like a charm! I didn't want to pass the var through the URL and use GET. – Elver

Answer 2

It does say : ".load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] ) urlA string containing the URL to which the request is sent. dataA map or string that is sent to the server with the request."

And you do have a href object, but I don't think they are used together in this case. To use .load or in this case data I think you would need to specify a url. I think either of these ways might work.

   function updateFolderCate(ID,Type){
        $.colorbox({
            iframe:true,
            scrolling: false,
            innerWidth:'100',
            innerHeight:'100',
            href:"page.php?LinkID=" + ID + "&itemType=" + Type,
            // or data : { "page.php", { LinkID:ID,itemType:Type } } 
            onClosed:function(){
                //Do something on close.
            }
        });
    }

http://www.codingforums.com/showthread.php?t=158713

http://api.jquery.com/load/

Anthe

Answer 3

You can open a blank page in the iframe which gets the data from the top page and posts by itself like this:

var postData = window.top.getDataToPost()
$.post(postUrl,postData)

On the page which opens colorbox, create a function to provide the value

function getDataToPost() {
   return { param1 = value1 }
}

Madigan

Answer 4

I have solved this by navigating the colorbox to about:blank, and then, in the onComplete callback, rendering a form with hidden fields, that is submitted with POST data. Working perfectly for this purpose.

function createFormInputsFromObject(data, prefix) {
  prefix = prefix || '';
  var inputs = '';

  jQuery.each(data, function(name, value){
    if (prefix !== '') name = prefix + '[' + name + ']';
    if (Array.isArray(value) || value instanceof Object) {
      inputs += createFormInputsFromObject(value, name);
    }
    else {
      inputs += jQuery('<input>').attr({type: 'hidden', name: name, value: value}).prop('outerHTML');
    }
  });

  return inputs;
}

function showPdf(url, postData) {
  jQuery.colorbox({
    iframe: true,
    href: 'about:blank',
    width: '90%',
    height: '90%',
    onComplete: function() {
      var iframe = jQuery('#cboxLoadedContent iframe');
      var form = jQuery('<form>').attr({action: url, method: 'POST', target: iframe.attr('name')});
      if (!jQuery.isEmptyObject(postData)) {
        jQuery(createFormInputsFromObject(postData)).appendTo(form);
      }
      form.appendTo(iframe)
          .submit()
          .remove();
    }
  });
}


showPdf('/source/url', {sitName: 'sitka', items: [2, 4, 5, 6], extended: {i1: [10, 20], i2: {a: 0, b:1}}});

Xiphoid

Answer 5

In your example code, data is an object. In this case, it's created by object literal syntax.

What exactly is happening?

1. What browser(s) (including version number) have you tried it in?

2. What jQuery version are you using?

3. Do you get any errors in the console?

4. Have you looked at the request in the network tab of Firebug (or other developer tools / Fiddler / etc.) to see exactly what is in the request (e.g. request method) and the server's response?

5. Have you tried the request directly using jQuery.load() to see what happens?

Bowstring

Answer 6

Also faced the same problem. And after several unsuccessful attempts to get the POST method to work in colorbox. I wrote this code which works fine in the latest version of colorbox (ver.1.6.4). Maybe this will save someone some time.

html

<a class="open-colorbox" href="javascript:void(0)" target="_blank"> Open Colorbox </a>

javascript

$(document).ready(function(){
  $(".open-colorbox").colorbox({
    iframe:true, 
    fastIframe:false, /* required, waiting for the iframe to load */
    width:"90%", 
    height:"90%",
    onComplete: function(){
                   $.ajax({type: 'post',
                            url: 'mysite/index.php',
                           data: { param1:'value1', param2:'value2' },
                          cache: true,
                        success: function(response_data) {
                                   var $iframe = $('iframe')[0].contentDocument;
                                   $iframe.write(response_data);
                                 }
                    });
                }
  });


});

Nosology