Binding the data from xml to dropdown with Javascript RSS

• • Reply
  

  Rangineni

  0 Points

  19 Posts

  Binding the data from xml to dropdown with Javascript

  Apr 26, 2012 12:15 PM|LINK

  Hi to all
             I am new to mvc 3. I want bind the data from xml to select with Javascript.
      
  Here is my code
  Javascript code
  function onSelectedChanged() {

          var countryId = $("#ddlCountry option:selected").val()       
          var url = 'url' + parseInt(countryId);
          var xmlhttp = null;
          if (window.XMLHttpRequest) {
              xmlhttp = new XMLHttpRequest();
              if (typeof xmlhttp.overrideMimeType != 'undefined') {
                  xmlhttp.overrideMimeType('text/xml');
              }
          }
          else if (window.ActiveXObject) {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          else {
              alert('Perhaps your browser does not support xmlhttprequests?');
          }
          xmlhttp.open('GET', url, true);
          xmlhttp.send(countryid = countryId);
          xmlhttp.onreadystatechange = function () {

  
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  var select = $('#ddlState');
                 
                  var data = xmlhttp.responseText;
                  $(data).find('StateDTO').each(function () {

                      var StateId;
                      var StateName;
                      StateId = $(this).find('StateId') ;
                      StateName = $(this).find('StateName');
                      select.append("<option value='" + StateId + "'>'" + StateName + "'</option>");
                  });

  
                  select.append("<option value=1>Please</option>");

              } else {

              }

   

          };
      }

  Here is my xml data
  - <ArrayOfStateDTO xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  - <StateDTO>
    <StateId>1</StateId>
    <StateName>Tamil Nadu</StateName>
    </StateDTO>
    </ArrayOfStateDTO>
   
   I am not able to bind data. I dont know where i went wrong? Please can anyone help me pls. Past four hours i was trying.
   
   Regards
   Kumar

• • Reply
  

  somnathmali

  Contributor

  2816 Points

  450 Posts

  Re: Binding the data from xml to dropdown with Javascript

  Apr 26, 2012 12:24 PM|LINK

  when you are using jQuery .. then you can use $.ajax method

  var jsonData = null;
  $.ajax({
          type: 'GET',
          cache: false,
          url: url,
          dataType: 'text',
          async: false,
  
          success: function (data) {
              //data will be string XML
              //convert this data to JSON
  
              // Refer : http://www.fyneworks.com/
              jsonData = $.xml2json(xml);
             //And call bind
              BindList(jsonData);
          }
      });
  
  function BindList(jsonData)
  {
  var select = $('#ddlState');
  $(jsonData).each(function(){
  //this - will be each item
  var op  = $("<option/>"); // new item
  $(op).attr('value' , $(this).ID );
  $(op).text($(this).Title);
  $(select).append(op);
  });
  
  
  })
  }

  
  
  

  Somnath Mali
  .NET Developer , Pune INDIA.
  Please Mark As Answer If my reply helped you.
• • Reply
  

  Rangineni

  0 Points

  19 Posts

  Re: Binding the data from xml to dropdown with Javascript

  Apr 26, 2012 12:59 PM|LINK

  Hi Somnath Thanks for ur reply. where do you assign the nodes for example (StateId,StateName). I am getting the xml data fine. But i am not able to bind the data to select. Please help me. its very urgent.

  Regards

  Kumar

• • Reply
  

  RichardY

  Star

  8376 Points

  1573 Posts

  Re: Binding the data from xml to dropdown with Javascript

  Apr 26, 2012 01:06 PM|LINK

  Use the jquery text() function to extract the innerText from the node:

  StateId = $(this).find('StateId').text();

• • Reply
  

  Rangineni

  0 Points

  19 Posts

  Re: Binding the data from xml to dropdown with Javascript

  Apr 26, 2012 01:12 PM|LINK

  No Richardy. I am not getting any solution. Please

  Regards

  Kumar

• • Reply
  

  bruce (sqlwo...

  All-Star

  36852 Points

  5446 Posts

  Re: Binding the data from xml to dropdown with Javascript

  Apr 26, 2012 01:31 PM|LINK

  lots of error in you xml parsing.

  1) $(data) --- converts string to dom not xml, use $.parseXML()
  2) $(this).find('StateId') -- returns a node not a value, you want the text() of the node.

  also, why are you using responseText instead of responseXml. why aren't you use $.ajax?

   

  bruce (sqlwork.com)
• • Reply
  

  Rangineni

  0 Points

  19 Posts

  Re: Binding the data from xml to dropdown with Javascript

  Apr 27, 2012 03:21 AM|LINK

  Hi Bruce,
  Sorry to distrub. I dont know Javascript and Jquery. Now only i am learning. Please can u help me pls..

  Here is my javascript code
  function onSelectedChanged() {

          var countryId = $("#ddlCountry option:selected").val()       
          var url = url + parseInt(countryId);
          var xmlhttp = null;
          if (window.XMLHttpRequest) {
              xmlhttp = new XMLHttpRequest();
              if (typeof xmlhttp.overrideMimeType != 'undefined') {
                  xmlhttp.overrideMimeType('text/xml');
              }
          }
          else if (window.ActiveXObject) {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          else {
              alert('Perhaps your browser does not support xmlhttprequests?');
          }
          xmlhttp.open('GET', url, true);
          xmlhttp.send(countryid = countryId);
          xmlhttp.onreadystatechange = function () {

  
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  var select = $('#ddlState');

                  var data = xmlhttp.responseXml;

  
                  $parseXML(data).find('StateDTO').each(function () {

                      var StateId;
                      var StateName;
                      StateId = $(this).find('StateId').text();
                      StateName = $(this).find('StateName').text();
                      select.append("<option att='" + StateId + "'>" + StateName + "</option>");
                  });

  
                  select.append("<option value=1>Please</option>");

              } else {

              }

   

          };
      }

  Can help me with this code.
  My xml will be

  - <ArrayOfStateDTO xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  - <StateDTO>
    <StateId>1</StateId>
    <StateName>Tamil Nadu</StateName>
    </StateDTO>
    </ArrayOfStateDTO>
   
  Thanks
  Kumar

• • Reply
  

  RichardY

  Star

  8376 Points

  1573 Posts

  Re: Binding the data from xml to dropdown with Javascript

  Apr 27, 2012 12:33 PM|LINK

  The syntax of the parseXML() function should be $.parseXML(data).  You omitted the period.  Also, the parseXML() function returns an xml document not a jquery object so the find() function will not work the way you are trying.  I, also doubt that the way you are building the option will work, either.

  This works for me (assuming the $('#ddlState') will return a select element):

  var xmlDoc = $.parseXML(data);
  
  $(xmlDoc).find('StateDTO').each(function () {
   
                       var StateId;
                       var StateName;
                       StateId = $(this).find('StateId').text();
                       StateName = $(this).find('StateName').text();
  
                       var newOption = $('<option></option>');
                       newOption.val(StateId).text(StateName);
                       newOption.appendTo('#ddlState');
                   });

  • Marked as answer by Young Yang - MSFT on May 07, 2012 01:54 AM