populating Drop down with items frmo server.
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 8 of 8

Thread: populating Drop down with items frmo server.

Hybrid View

  1. #1
    Join Date
    Mar 2003
    Location
    London
    Posts
    198

    [RESOLVED]populating Drop down with items frmo server.

    I want to fill a drop down/combo with list of items, when a user clicks a button,
    I am calling my php page using http request of AJX and then fill up the combo
    using
    combo.blala.innerHtml= "code to fill combo"

    I want to know whats the best approach to generate code,
    should I genreate complete html at server side and return or should I return only the list of items seperated by something or XML and then generate the HTML at client side, ..

    which approach is clean and much prefered, any ideas..
    Regards,
    Ahmed
    Last edited by xs2ahmed; September 26th, 2007 at 08:45 AM. Reason: putting resolved tag in subject
    He is not strong and powerful, who throws people down, but he is strong who withholds himself from anger
    MyWeb

  2. #2
    Join Date
    Jul 2007
    Location
    Sweden
    Posts
    331

    Re: populating Drop down with items frmo server.

    The cleanest approach by far (in my opinion) is to only have PHP generate a delimited list of the options, and then programmatically add them to the list with JavaScript. You could for example separate items with commas:
    PHP Code:
    // Output comma-delimited list of items (assuming $items is an array.)
    die(implode(","$items)); 
    Then in JavaScript you would add it programmatically:
    Code:
    var items = request.responseText.split(",");
    for (var i = 0; i < items.length; i++) {
        // ...
    }
    If you want it to be true AJAX (Asynchronous JavaScript and XML), you could generate an XML response (and use the responseXml property):
    Code:
    <?xml version="1.0"?>
    <items>
      <item>Item One</item>
      <item>Item Two</item>
    </items>
    In any case, I don't like the idea of generating HTML in one application and just blindly inserting it into another (using innerHTML.)
    Last edited by andreasblixt; September 26th, 2007 at 07:46 AM.

  3. #3
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,869

    Re: populating Drop down with items frmo server.

    Make a delimiter and use the JavaScript split() function. Then read the array while populating.

    Code:
    var theSelect = document.getElementById('SELECT_TAG_ID');
    theSelect.length = 0;
    var theOptions = string.split(',');
    for(i = 0; i < theOptions.length; i++) {
      theSelect.options[i] = new Option(theOptions[i], theOptions[i]);
    }
    EDIT: Looks like Andreas beat me to it!
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  4. #4
    Join Date
    Mar 2003
    Location
    London
    Posts
    198

    Re: populating Drop down with items frmo server.

    Your responses are very helpful,
    I would like to ask further that If I use XML instead of comma seperated text, could you give me an example as to how would I parse the XML in the java script code to extract my item values.
    Thanks.

    your example to demonstarte that we can manipulate dropdown using its reference gave me a better idea, Initially i was thinking that generating html is the only way to add items ..
    Last edited by xs2ahmed; September 26th, 2007 at 08:24 AM.
    He is not strong and powerful, who throws people down, but he is strong who withholds himself from anger
    MyWeb

  5. #5
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,869

    Re: populating Drop down with items frmo server.

    Well, if you are going to do it that way. You should just make the output be the whole <select> tag, with the <option> tags in between, and </select>. Then write that to the innerHTML where you want it.

    EDIT: And I agree with Andreas...it's NOT the smartest/best/cleanest way of doing it.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  6. #6
    Join Date
    Mar 2003
    Location
    London
    Posts
    198

    Re: populating Drop down with items frmo server.

    Quote Originally Posted by PeejAvery
    EDIT: And I agree with Andreas...it's NOT the smartest/best/cleanest way of doing it.
    So I am going to use the cleanest way by sending pure XML as Andreas said, it s the Best use of AJAX, and not the XML with <Options> tags, as you said it not smart way.


    I only need to know how can I parse XML , so that In the next step I can use those Items read from XML, into the for loop which you gave me an example of

    var theOptions = will create array of values read from XML elements.
    for(i = 0; i < theOptions.length; i++) {
    theSelect.options[i] = new Option(theOptions[i], theOptions[i]);
    }

    thanks for Help.. I will mark my POST resolved but just in case if you could put up some code to read XML elements..that would be highly appreciated.

    Thanks to Both of you ..
    He is not strong and powerful, who throws people down, but he is strong who withholds himself from anger
    MyWeb

  7. #7
    Join Date
    Jul 2007
    Location
    Sweden
    Posts
    331

    Re: populating Drop down with items frmo server.

    You don't have to parse any XML, you can just output a comma-delimited text like I first wrote. The thing about XML was more informational (because that was the original intention of AJAX, and what it stands for.) So for the sake of simplicity, output a comma-delimited list from PHP and parse it using split() like me and PeejAvery showed in our code examples.

    If you really must know, here's how you could do it with an XML output:
    Code:
    // Variable 'response' is an XmlHttpRequest object that has just finished a request.
    var items = response.responseXML.documentElement;
    for (var i = 0; i < items.childNodes.length; i++) {
        var text = items.childNodes[i].nodeValue;
        select.options[i] = new Option(text, text);
    }
    Note that the above code has not been tested, I'm just assuming the browser handles DOM properly, in which case the above code would work.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center