jquery Onglets avec ajaxOptions

Question

Gratter ma tête sur celui-ci. Avec les onglets jQuery, j'essaie d'utiliser ajaxOptions pour publier des données sur la page avant de la charger.

J'ai donc un formulaire sur la page avant mes onglets avec quelques champs de saisie. à savoir,

<form id="myform" method="post"> 
<!-- inputs etc --> 
</form> 

Puis mes onglets

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Preloaded</a></li> 
    <li><a href="ajax/content1.html">Tab 1</a></li> 
    </ul> 

    <div id="tabs-1"> 
    <p>Initital content</p> 
    </div> 
</div> 

ok maintenant je devrais pouvoir sérialiser ma forme alors quand cliquez sur un onglet, il devrait être une demande de poste-à-dire,

$("#tabs").tabs({ 
    ajaxOptions: { 
     type: 'post', 
     data: $("#myform").serialize(), 
     error: function(xhr, status, index, anchor) { 
      $(anchor.hash).html(
      "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
      "If this wouldn't be a demo."); 
     } 
    } 
}); 

Il effectue la demande de publication, mais les données du formulaire sont toujours vides.

Des idées pourquoi?

Merci

Lee

Answer 1

Depuis cette fonction lorsque vous créez les onglets:

data: $("#myform").serialize(), 

Les données sont tout ce qu'il était alors, il n'a jamais mis à jour. La solution est ici juste de mettre à jour ces données quand il est plus facile nécessaire, à l'aide select event de l'onglet, comme ceci:

$("#tabs").tabs({ 
    select: function() { 
    $(this).tabs("option", { ajaxOptions: { data: $("#myform").serialize() } }); 
    }, 
    ajaxOptions: { 
    type: 'post', 
    error: function(xhr, status, index, anchor) { 
     $(anchor.hash).html(
     "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
     "If this wouldn't be a demo."); 
    } 
    } 
}); 

You can test it out here, il suffit de regarder dans Firebug, etc pour voir les données de formulaire est mis à jour et envoyé à chaque onglet Demande AJAX.