passer des valeurs de formulaire de popup boîte de fantaisie à la fenêtre principale

Question

Je travaille actuellement sur une application web en utilisant python et Django, et j'ai un écran avec une popup en utilisant le plugin fancybox jquery.

Lorsque le lien est cliqué, il ouvre une URL sur mon serveur qui est essentiellement un formulaire. Ce que j'essaye de réaliser est la capacité de passer les valeurs des entrées de forme à ma page principale une fois que la popup est fermée. J'ai un drôle de sentiment que ce ne sera pas possible et je ferais mieux d'utiliser des divs cachés (qui masquent la commande) plutôt qu'un popup.

ma page de test:

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

ATM javascript:

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

L'idée principale est la fenêtre a une forme qui a des valeurs qui seront ajoutées à la base de données de Django, mais il est aussi une table sur la fenêtre principale qui affiche également ceux-ci. Je voulais faire la fenêtre principale pour être celui qui crée l'objet, l'enregistre et charge ensuite dans la forme (ce qui est pris en charge à partir d'un appel API que j'utilise ajax)

toute aide tout serait être grand

Answer 1

Voici une pub très simpliste/sous qui crée un objet stocké et des mises à jour objet et des éléments de la page en cas change des entrées de forme

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() 

Puis dans votre code fancybox envoyer objet au serveur et analyser les valeurs en forme avec le code du serveur:

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

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