SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Populating mutliple select box with JSON via ajax. Is this a bug or me being dumb?

    I hope I can articulate this well enough...

    I have a multiple select box that is dynamically populated based on a selection from another select box. There are 3 possible results:

    1. Every click on the parent select box replaces the html of the child <select> with a "Loading..." message. Then it runs an ajax request to a server side page that returns JSON data back to the post-processing function.
    In that post-processing function I check to see if any data was returned for that selection.

    2. If data was returned, replace the child multi-select with the data.

    3. If no data was returned then replace the child multi-select with a default message.

    Now the problem I'm seeing. When I select an item from the parent select that I know returns data, the child multi-select seemingly doesn't update, but when I mouse over the select I see the changes.

    BUT! On a whim, I created another <div> just to see if it was in fact a problem with the select, so everytime I updated the <select> I also updated this new <div>. Magically it all worked. So what I ended up doing is keeping the <div> there, just set it to display:none and now it works like it "should".

    Any ideas as to what this is all about!?

    Oh and I'm using jQuery.ajax and jQuery.html to handle the processing.


    Thanks!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Seems pretty weird. Do you have any mouseover events on the select or this div? The purpose of the DIV is a bit mysterious. Is this simply a container for the SELECT?

    Also, replacing the HTML of the <select> with a message sounds like invalid HTML. A <select> can only contain <option> or <optgroup> elements.

    Another possibility is some browser bug (particularly if testing on IE) to do with creating <option> elements on the fly. I can't remember what the exact bug is, but I think it's that you can't create them with innerHTML.

    Anyway, code is worth a thousand words. If you can provide a working link then we can Firebug it and get to the bottom of this.

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Seems pretty weird. Do you have any mouseover events on the select or this div? The purpose of the DIV is a bit mysterious. Is this simply a container for the SELECT?
    The intial purpose was just to see if the behavior was the same using a different element. To debug whether it was my ajax or overall js methodology. And when it actually snapped the <select> in gear I was shocked.


    Quote Originally Posted by Raffles View Post
    Also, replacing the HTML of the <select> with a message sounds like invalid HTML. A <select> can only contain <option> or <optgroup> elements.
    Well, the message is this:
    <option value="" disabled="disabled">Loading...</option> , so it's all good

    Quote Originally Posted by Raffles View Post
    Another possibility is some browser bug (particularly if testing on IE) to do with creating <option> elements on the fly. I can't remember what the exact bug is, but I think it's that you can't create them with innerHTML.

    Anyway, code is worth a thousand words. If you can provide a working link then we can Firebug it and get to the bottom of this.
    It is in IE and it's an intranet site. It would take quite a bit to get an online test version working.

    At least I'm not crazy. I'll look into that IE bug, thanks!

    Paul

  4. #4
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hah! We were both right.

    If you don't want to have the extra DIV, just use normal DOM methods (i.e. createElement).


Bookmarks

Posting Permissions

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