Tag Archives: jQuery

Selectize.js ComboBox: Cloning and Destroying

Selectize.js is a javascript library that allows you to offer more complex HTML select boxes, such as combining a select and an input box, commonly known as an autocomplete combobox. Most importantly, they have a built-in stylesheet for Bootstrap 3. However, I discovered a problem when you are trying to add another form field dynamically, specifically using jQuery’s .clone() function.

However, selectize() does not clone well… it breaks horribly. The key you must .destroy() the selectize() prior to cloning. Of course, another problem occurs then: The select element, upon selectize.destroy(), will reset the value to the last option. Solution? Store the value, destroy(), then set the value.

// When add button is clicked
$('#add').on('click',function(){
   $('.combobox').each(function(){ // do this for every select with the 'combobox' class
      if ($(this)[0].selectize) { // requires [0] to select the proper object
         var value = $(this).val(); // store the current value of the select/input
         $(this)[0].selectize.destroy(); // destroys selectize()
         $(this).val(value);  // set back the value of the select/input
      }
   });
   $('#monsters .form-group:first')
      .clone() // copy
      .insertAfter('#monsters .form-group:last'); // where
      selectizeme(); // reinitialize selectize on all .combobox
});

Here’s a working demo of the functionality.

jQuery Mobile Filterable Collapsible Listview with Smart Expansion

jQuery Mobile 1.3 Swipe to Reveal Panel with Demo

6 Replies

I wanted to make use of the new jQuery Mobile 1.3.0-beta1 feature called Panels, allowing you to overlay, push, or reveal a hidden panel of content on the left or right of the main window. This is most commonly used to provide extra navigation options. In my case, I wanted to show static content that is hyper relevant, but without crowding up the main window.

However, the docs recommend and demonstrate how to use a hyperlink to activate the panel, which is great in a header, footer, or in a button, but it seemed more natural to allow the user to swipe the screen either left or right to show the panel. Thus, I need to add the following code to the bottom of the page:

<script type='text/javascript'>
$(document).on('pageinit',function(){
	$("#content").on("swiperight",function(){
		$("#leftpanel").panel( "open");
	});
	$("#content").on("swipeleft",function(){
		$("#rightpanel").panel( "open");
	});
});
</script>

Continue reading →

HTML5 and jQuery Mobile Shortcut and Tip Sheet

Automatic Form Detection and Post with jQuery

1 Reply

After building custom jQuery on multiple websites to POST form data to a secondary PHP file for processing, I decided there has to be another way. I wanted to build a JavaScript (jQuery) chunk of code that executes when the document is ready and automatically performs the following functions:

Put the cursor (focus) in the form’s first input field (if multiple forms on the page, be smart enough to use only the first form).
Detect all forms and automatically generate the code to POST all of the form elements, via AJAX, to the script defined in the form’s action. Furthermore, use the name of each form field as the key in the POST data.
Load the results into a div with the id of ‘output’.
Work for forms that are generated and returned as part of the output (not originally part of the page)