jquery 将数据发布到colorbox iframe?

r3i60tvu  于 2023-06-05  发布在  jQuery
关注(0)|答案(6)|浏览(441)

下面是我正在使用的代码。从我看到的其他例子来看,这应该起作用,但事实并非如此。而且已经确保我使用的是最新的彩盒。

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

mjqavswn1#

您正在将iframe设置为true。它的作用是打开一个colorbox,创建一个iframe,并将iframe的src属性设置为href指定的位置。所以从逻辑上讲,这不能处理POST请求。这可能会实现你想要的,但我不确定。

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

这不会像iframe方法一样,你可能需要重新修改你的端点。如果你的端点不需要只接收POST请求,那么就使用earlonrails的答案。
编辑:我在查看源代码后得出了这个结论:Source
相关的行是行800和行856。iframe和href似乎不兼容,所以我检查了Firebug中加载的元素,注意到它是一个iframe,src属性设置为href变量。

waxmsbnn

waxmsbnn2#

上面确实写着:“.load(url [,data] [,complete(responseText,textStatus,XMLHttpRequest)])url包含请求发送到的URL的字符串。data随请求一起发送到服务器的Map或字符串。”
你确实有一个href对象,但我不认为它们在本例中一起使用。要使用.load或在这种情况下使用data,我认为您需要指定一个URL。我想这两种方法都可能行得通。

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/

k4emjkb1

k4emjkb13#

你可以在iframe中打开一个空白页面,它从首页获取数据,然后像这样自己发布:

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

在打开colorbox的页面上,创建一个函数来提供值

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

6uxekuva4#

我通过将colorbox导航到about:blank解决了这个问题,然后在onComplete回调中呈现一个带有隐藏字段的表单,该表单与POST数据一起提交。完美地为这个目的工作。

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

xytpbqjk5#

在示例代码中,data是一个对象。在本例中,它是由对象文字语法创建的。
这到底是怎么回事
1.您在哪些浏览器(包括版本号)中试用过?
1.你用的是什么jQuery版本?
1.您在控制台中遇到任何错误吗?
1.你有没有在Firebug(或其他开发工具/ Fiddler /等)的网络选项卡中查看请求,以确切地了解请求中的内容(例如:请求方法)和服务器的响应?
1.你有没有直接使用jQuery.load()来尝试请求,看看会发生什么?

tct7dpnv

tct7dpnv6#

也面临着同样的问题。并且在几次不成功的尝试后,使POST方法在colorbox中工作。我写了这段代码,在最新版本的colorbox(ver.1.6.4)中运行良好。也许这会保存一些时间。
联系我们

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

});

相关问题