Jquery – How to initSelection() on a tag list of id/label pairs

jqueryjquery-select2

I'm initialising a Select2 tag list as follows:

<input type="text" name="users" value="" id="users" class="span3"  />

$("#users").select2({
    tags            : [
        {'id':1, 'text':'Ben'},  
        {'id':22, 'text':'Andrea'},  
        {'id':23, 'text':'Tim'},
        {'id':7, 'text':'Matt'}
    ]
    ,tokenSeparators    : [",", " "]
}).on('change', function(event){
    console.log(event.val.toString());
});

… which works a treat, when the input box is empty to begin with. Selecting people by name gives me back a simple array of ID's that I can send back to the database.

However, I'm confused about how I should initialise this list with an existing selection. Let's say I load the page with Ben and Andrea already selected:

<input type="text" name="users" value="Ben, Andrea" id="users" class="span3"  />

I can see that Select2 has an initSelection() method, but I'm unsure how I'd use it. Obviously the example above is wrong, as I'm not passing the ID along with the person name – but how should I be passing that data in? And what should my implementation of the initSelection callback function look like in order to correctly initialise Select2 from it?

Best Answer

Problem solved:

https://groups.google.com/forum/#!topic/select2/3UN3DSiv4lo

You can pass an list of ID's, either in the input value or via a val() call.

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Javascript – How to upload files asynchronously with jQuery

With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.

The HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

First, you can do some validation if you want. For example, in the .on('change') event of the file:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

Now the $.ajax() submit with the button's click:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.

Related Topic