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

Answer 1

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?

Answer 2

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.

Answer 3

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

Answer 4

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/

Answer 5

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 }
}