Question

我目前正在使用python和Django开发一个Web应用程序，我有一个使用fancybox jquery插件弹出的屏幕。

点击链接后，它会在我的服务器上打开一个基本上是表单的网址。

我想要实现的是能够在弹出窗口关闭后将表单输入的值传递给我的主页面。

我有一种有趣的感觉，这是不可能的，我可能会更好地使用隐藏的div（隐藏命令）而不是弹出窗口。

我的测试页：

<div class='link'>
    <a class='fancy' href='create/' > click me </a>
</div

javascript atm：

$(function(){
  $('.fancy').fancybox(
   {
     type:'ajax',
     afterClose: function(){
        alert('done!');
     }
   }
});

主要思想是弹出窗口有一个表单，其中包含将添加到Django数据库的值，但主窗口上还有一个表格也显示这些表格。我想让主窗口成为创建对象的窗口，保存它然后将其加载到表单中（这是由我使用ajax的API调用处理的）

任何帮助都会很棒

Answer 1

以下是一个非常简单的pub / sub，它使用change表单输入事件创建存储对象并更新对象和页面元素

HTML：

<!-- table, match "data-bind" to form input name -->
<td data-bind="fname" class="subscriber">Foo</td>
<td data-bind="lname"  class="subscriber">Bar</td>
<!-- form -->
<input type="text" name="fname" class="data_source" />

JS：

/* declare empty object */
var storedData = {};

var $subscribers=$('.subscriber');
/* this event triggered when input changes*/
$(document).on('upDataData', function( event, key, value){
    storedData[key]=value;
    $subscribers.filter( '[data-bind="'+key+'"]').text( value );
});


/* change handler for form inputs*/
$(document).on('change', 'form input.data_source', inputChange);

function inputChange(){       
    $(document).trigger('upDataData',[ this.name, this.value]);
}
/* populate storedData from table elements when page loads*/
function createInitialData(){
    $subscribers.each(function(){
        storedData[ $(this).data('bind')]= $(this).text();
    });
}

 createInitialData()

然后在您的fancybox代码中将对象发送到服务器并使用服务器代码将值解析为表单：

$('.fancy').fancybox({
     type:'ajax',
     /* same as "options" for "$.ajax"*/
     ajax: { data : storedData},
     afterClose: function(){
        alert('done!');
     }       
});

DEMO：http://jsfiddle.net/xg9ML/2/

将表单值从花式框弹出窗口传递到主窗口

1 个答案: