0

I have a form with a select list and if the item the user needs isn't listed, they can add it via another input box and then the item will be appended to the select list. 

$("#misc_userID").effect("transfer", { to: $("#group_misc_available") }, 500);

Now, my problem is if the user enters a multiple word item (e.g. 'John from HP'), the spaces in the phrase don't transfer correctly (see below via FireBug):

<option hp="" from="" value="John">John from HP</option>

I'm using the following jQuery code to append the item from my other question:

$(document).ready(function() {
    $('select').change(function() {
        var $this = $(this);
        $this.siblings('select').append($this.find('option:selected')); // append selected option to sibling
        $('select', this.parent()).each(function(i,v){ // loop through relative selects
            var $options = $(v).find('option'); // get all options
            $options = $options.sort(function(a,b){ // sort by value of options
                return a.value - b.value;
            });
        (this).html($options); // add new sorted options to select
        });
    });   
});

it is almost like I need to encode it before the transfer and then a decode afterwards.

I coudln't get the jsfiddle to work so here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>

<body>
<p>
    <input type="text" name="misc_userID" id="misc_userID" value="" size="30" max="100" />
</p>
<p>
    <input type="button" name="misc_AddUpdate_btn" id="misc_AddUpdate_btn" value="Save Contributor" />
</p>
<p>
    <select name="group_misc_available" size="10" multiple="multiple" id="group_misc_available" class="group_misc_selects_control" style="width:140px;">
        <option value="Option 1">Option 1</option>
        <option value="option 2">Option 2</option>
    </select>
    <img src="../Common/MultiSelect/img/switch.png" width="30" height="30" />
    <select name="group_misc_selected" size="10" multiple="multiple" id="group_misc_selected" class="group_misc_selects_control"  style="width:140px;">
    </select>
</p>
<script>
$(document).ready(function() {
    $('select').change(function() {
        var $this = $(this);
        $this.siblings('select').append($this.find('option:selected')); // append selected option to sibling
        $('select', $this.parent()).each(function(i,v){                 // loop through relative selects
            var $options = $(v).find('option');                         // get all options
            $options = $options.sort(function(a,b){                     // sort by value of options
                return a.value - b.value;
            });
            $(this).html($options);                                     // add new sorted options to select
        });
    });   
    $('#misc_AddUpdate_btn').click(function(){
            var contributor = $('#misc_userID').val();
            if ( (contributor==null) || (contributor=="") ){
                //    do nothing
                alert('You must enter the Miscellaneous Contributor first.');
            }
            else {
                //    console.log('button pressed');
                var path_to_save_contributor = '/vtil/ajax/GroupContributor_Misc_lookup.cfm';
                var data_to_send = 'misc_userID='+contributor;

                $("#misc_userID").effect("transfer", { to: $("#group_misc_available") }, 500);
                setTimeout(function() {AddElement(contributor);}, 500);
            }
        });

        function AddElement(contributor){
                    $('#misc_userID').val('');    // reset value back to null    
                    var UpdateItem=decodeURIComponent(contributor);
                    $("#group_misc_available").append('<option value=' + UpdateItem + '>' + UpdateItem + '</option>');
                }
    });
</script>


</body>
</html>
Community
  • 1
  • 1
HPWD
  • 2,232
  • 4
  • 31
  • 61
  • `this.parent()`? you cannot use jQuery's `parent()` method for Raw DOM objects. Do you mean `$this.parent()`? – Ram Oct 03 '12 at 20:03
  • Encoding is probably a good idea. Have you tried that? What where the results of it? – Derek Adair Oct 03 '12 at 20:07
  • I used encodeURIComponent to encode it. Using the text from the question, `John from HP` became `John%20from%20HP` but I don't know how to decode it. :blush: – HPWD Oct 03 '12 at 20:09

1 Answers1

1

Nitpicks:

  • this.parent() should be $this.parent().
  • (this).html($options); should be $this.html($options); (or maybe $(this).html($options);?).

Those aside, John%20from%20HP can be converted to John from HP using unescape(), though I recommend using decodeURIComponent() in this case, instead. (Since you used encodeURIComponent() initially.)

Since you can't encode/decode something recovered by find() (since it's a jQuery object, not a string), you can reorganize your code like so:

$this.find('option:selected')
     .html(decodeURIComponent($this.find('option:selected').html()))
     .appendTo($this.siblings('select'));

You can see the code in action in this jsFiddle (ignored the sorting code here).

If this code still isn't exactly working, we'd need to see an example in action.

Cat
  • 66,919
  • 24
  • 133
  • 141
  • the nitpicks just didn't come through when I pasted the code. Your code looked good but unfortunately the sorting is a requirement for this project. I added a the code above - I couldn't get it to work right in the jsfiddle. – HPWD Oct 03 '12 at 20:51
  • You can add the sorting yourself. I just removed it for simplicity of the fiddle. Does the code I provided not work when you add the sorting? – Cat Oct 03 '12 at 20:59
  • Oh, I see what you are saying now. Let me try. – HPWD Oct 03 '12 at 21:15
  • I've put your code in a fiddle and it's just... a bit mixed up. The sorting code is not even called until you click an option. But when I add a name, it doesn't give me a `%20`. [Clicky for fiddle](http://jsfiddle.net/6J8dy/1/). – Cat Oct 03 '12 at 21:35
  • Thanks for putting it so um, delicately. LOL :) and thanks for getting the fiddle to work. Using your fiddle, I added 'Hello World' and then used FireBug to see what was saved as the option and it was ``. Now /THAT/ is messed up. :) The select boxes are working orshould I say the client is happy with that part. I'm trying to make it where they can dynamically add new items without a page refresh since there are a LOT of other elements on this page. – HPWD Oct 03 '12 at 21:50
  • Also, I've removed the ajax stuff that saves the value entered into the input text box. That might be the missing gap you are referring too. – HPWD Oct 03 '12 at 21:52
  • If AJAX is just saving the value, it shouldn't be adding `%20`. And yes, I see that weird `world=""` part, and that's in your `AddElement` method. So what part of this is still not working properly for you? – Cat Oct 03 '12 at 23:18
  • The option should be `` when hello World was entered into the input field with id of misc_userID but it isn't. The second part of the entry "world" is being added as its own attribute. – HPWD Oct 04 '12 at 13:03
  • 1
    Ah, okay. Take a look at my changes to `AddElement` in [this fiddle](http://jsfiddle.net/6J8dy/2/). Basically, I made the ` – Cat Oct 04 '12 at 17:20
  • OMG, you did it! I can't believe you hung with me this long! Thank you! I'll mark this as the answer now. – HPWD Oct 04 '12 at 19:18
  • Note to anyone else, your select box should NOT have `multiple="multiple"` or else if the user selects several at a time, the values selected all become the same. Removing the `'multiple="multiple"'` removes that from happening. – HPWD Oct 04 '12 at 19:28