2017-09-14 5 views
0

Je suis nouveau sur jquery avec JSON et j'essaie de remplir mon menu déroulant avec les résultats que je reçois. J'ai essentiellement un bouton qui va ouvrir une vue partielle dans un appel ajax et ensuite récupérer les données de la liste déroulante à travers un autre appel ajax.Remplir une liste déroulante en vue partielle avec Jquery AJAX

Voici mon button-

<button type="button" id="createIssueBtn" class="btn btn-lg btn-info" data-toggle="collapse" data-target="#PopUpDiv">I need to create an issue</button><br/> 
<div id="PopUpDiv"></div> 

Voici le javascript sur la page-

<script type="text/javascript"> 

    $(document).ready(function() { 

     $('#createIssueBtn').bind("click", function() { 
      $.ajax({ 

       url: '@Url.Action("OpenPopUp", "Issues")', 
       dataType: 'html', 
       success: function (html) { 
        $('#PopUpDiv').html(html); 
       } 
      } 
     ) 
      $.ajax({ 

       dataType: "json", 
       url: '@Url.Action("GetIssueTypes", "Issues")', 
       success: function (data) { 

        $.each(data.IssueTypes, function (index, item) { 

         $("#selectIssueType").append(
          $("<option></option>") 
           .text(item.IssueType) 
           .val(item.IssueID) 
          ) 
        }) 
       } 
      }) 
     }) 

    }) 
</script> 

Et ceci est la vue- partielle

<div id="AddIssues"><br/> 


<div > 
<select id="selectIssueType"> 
    <option value="0">Select Issue Type...</option> 
</select> 
    </div> 
    <br/> 
    <div>Enter the details of the issue (be specific):</div> 
    <div><input type="text" id="IssueDetails" /></div> 
    <br/> 
    <p>Location of Issue:</p> 
    <div><input type="text" id="IssueLocation" /></div> 
    <div>&nbsp;<br/></div> 
</div> 

Je suis en train de peupler le select. Je récupère les données mais la liaison est ce qui me décourage.

Merci!

EDIT

Voici mes IssueTypes objets-

public class IssueTypes 
    { 
     public int IssueID { get; set; } 

     public string IssueType { get; set; } 
    } 

EDIT

Voici ma fonction GetIssueTypes dans les CONTROLLER- questions

public ActionResult GetIssueTypes() 
     { 
      List<IssueTypes> issuesList = new List<IssueTypes>(); 

      issuesList = issueService.GetAllIssueTypes().data.Select(w => new IssueTypes() 
      { 
       IssueID = w.IssueID, 
       IssueType = w.IssueType 
      }).ToList(); 

      return Json(issuesList, JsonRequestBehavior.AllowGet); 
     } 
+0

Pourquoi ne pas utiliser '$ ('# createIssueBtn') cliquez sur (function() {...});' – JustinJmnz

+0

que vous avez. pas expliqué ce qui ne fonctionne pas dans votre question !. Mais vous avez plusieurs problèmes avec votre code, le plus important étant que ajax est asynchrone et que le 2ème appel ajax peut être exécuté avant le premier ajax, ce qui signifie que vous ajoutez des éléments '