2010-04-19 6 views
2

J'ai une boîte de dialogue jQuery. Tous les champs sont affichés correctement à l'exception des listes déroulantes, la valeur est passée comme nulle plutôt que la valeur sélectionnée.La valeur sélectionnée dans la liste déroulante ne s'affiche pas dans la boîte de dialogue jquery

<div id="popupCreateCompany" title="Create a new company"> 
    <form> 
    <fieldset> 
    <p> 
     <label for="company_name">Company Name:</label> 
     <%= Html.TextBox("company_name") %>  
    </p> 
    <p> 
     <label for="company_desc">Company Description:</label> 
     <%= Html.TextBox("company_desc") %> 
    </p> 
    <p> 
     <label for="address">Address:</label> 
     <%= Html.TextBox("address") %> 
    </p> 
    <p> 
     <label for="city">City:</label> 
     <%= Html.TextBox("city") %> 
    </p> 
    <p> 
     <label for="state">State:</label> 
     <%= Html.TextBox("state") %> 
    </p> 
    <p> 
     <label for="zip">Zip:</label> 
     <%= Html.TextBox("zip") %> 
    </p> 
    <p> 
     <label for="website">Website:</label> 
     <%= Html.TextBox("website", "http:/") %> 
    </p> 
    <p> 
     <label for="sales_contact">Sales Contact:</label> 
     <%= Html.DropDownList("sales_contact", Model.SelectSalesContacts, "** Select Sales Contact **") %> 
    </p> 
    <p> 
     <label for="primary_company">Primary Company:</label> 
     <%= Html.DropDownList("primary_company", Model.SelectPrimaryCompanies, "** Select Primary Company **") %> 

    </p> 
    </fieldset> 
    </form> 

jQuery:

$('#popupCreateCompany').dialog(
       { 
        autoOpen: false, 
        modal: true, 
        buttons: 
        { 
         'Add': function() { 
          var dialog = $(this); 
          var form = dialog.find('input:text'); 
          $.post('/company/create', $(form).serialize(), function() { 
           dialog.dialog('close'); 
          }) 
         }, 
         'Cancel': function() { 
          $(this).dialog('close'); 
         } 
        } 
       }); 

     $("#create-company").click(function() { 
      $('#popupCreateCompany').dialog('open'); 
     }); 

Mes définitions de SelectList:

public class SubcontractFormViewModel 
{ 
    public subcontract Subcontract { get; private set; } 
    public SelectList SelectPrimaryCompanies { get; set; } 
    public MultiSelectList SelectService_Lines { get; private set; } 
    public SelectList SelectSalesContacts { get; private set; } 

    public SubcontractFormViewModel(subcontract subcontract) 
    { 
     SubcontractRepository subcontractRepository = new SubcontractRepository(); 

     Subcontract = subcontract; 
     SelectPrimaryCompanies = new SelectList(subcontractRepository.GetPrimaryCompanies(), "company_id", "company_name"); 
     SelectService_Lines = new MultiSelectList(subcontractRepository.GetService_Lines(), "service_line_id", "service_line_name", subcontractRepository.GetSubcontractService_Lines(Subcontract.subcontract_id)); 
     SelectSalesContacts = new SelectList(subcontractRepository.GetContacts(), "contact_id", "contact_name"); 
    } 
} 

Répondre

3

Votre problème est cette ligne:

var form = dialog.find('input:text'); 

Vous ne sérialisation <input> éléments, pas d'autres éléments de formulaire.

Vous pouvez ajouter les éléments de sélection en changeant ce à

var form = dialog.find('input:text, select'); 

ou

var form = dialog.find('input:text').add('select'); 
+0

Merci. C'était ça! – RememberME

0

Vous devez vous assurer que le dialogue est toujours dans la forme pour les valeurs pour afficher, par défaut, il n'est pas , comme ceci:

$('#popupCreateCompany').dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: 
    { 
     'Add': function() { 
      var dialog = $(this); 
      var form = dialog.find('input:text'); 
      $.post('/company/create', $(form).serialize(), function() { 
       dialog.dialog('close'); 
      }) 
     }, 
     'Cancel': function() { 
      $(this).dialog('close'); 
     } 
    } 
}).parent().appendTo("#myFormID"); 

Par défaut, jQuery UI (et d'autres modales aussi) ajoute à modal créé à la fin du <body>, donc l'élément réel <select> est en dehors de votre formulaire, ce qui signifie qu'il n'est pas inclus dans les valeurs POST. Si vous faites le .parent().appendTo() comme ci-dessus, il va déplacer la boîte de dialogue dans le formulaire et il devrait être affiché correctement.

Questions connexes