0

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

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

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

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

我的测试页面：

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

javascript自动取款机：

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

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

任何帮助都会很棒

4

1 回答 1

0

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

演示：http: //jsfiddle.net/xg9ML/2/

于 2013-01-31T14:23:44.073 回答