Category Archives: jQuery

jQuery DateTimePicker with Bootstrap

Hey everyone,

I ran into a bit of trouble today trying to get datetimepicker to work within bootstrap tabs. The dialog appeared however none of the buttons seemed to work. The fields also remained unpopulated.

It turned out the the issue was caused by the fact that I’d used jquery’s clone function to duplicate the tabs without reassigning field ids. This meant that there were multiple fields with the same id, confusing datetimepicker.

The solution I used was to dynamically assign all of the ids as each tab was displayed:


/* Bind tab change events: this has been done so that there is less js overhead */
function bind_tab_change_events(){

	//Bind change event
	$('.nav-tabs').bind('show', function(e){

		//Create vars
		var selected_file_id = $(e.target).data('file_id');

		//Initialisations
		initialise_time_pickers('#file_' + selected_file_id + ' .timepicker', selected_file_id);	
	})
}

/* Initalise timepickers */
function initialise_time_pickers(selector, unique_id){

	//Loop through each bound element
	$.each($(selector), function(index, value){

		//Set id - datepicker won't work without unique ids
		$(value).attr('id', $(value).attr('id') + '_' + unique_id);

		//Initialise datepicker		
		$(value).datetimepicker();
	});
}

UPDATE:
It looks like quite a few people hitting this post are looking for a bootstrap specific alternative, Sebastien has provided a link to one in the comments below:
Bootstrap DatetimePicker.

Another one that looks really good, a bit less clunky than any of the alternatives I’ve seen: http://tarruda.github.com/bootstrap-datetimepicker/

Plain timepicker: http://jdewit.github.com/bootstrap-timepicker/

Plain datepicker: http://www.eyecon.ro/bootstrap-datepicker/

Let me know if you have any questions!

Remove Disabled Attribute – Twitter Bootstrap

Hey everyone,

I was using Bootstrap’s disabled attribute today and just needed a way to remove it. Once again, jQuery has a quick and easy way to do this:


$('#my_input').removeAttr('disabled');

There’s a whole heap of documentation on the jQuery site: http://api.jquery.com/removeAttr/

How to Reset ID of an Element – jQuery

Hey All,

Just a quick post on how to set the ID of an element (in this case a div) with jQuery. I needed to use this to dynamically clone elements.


WOOOOOOOOOOOOW
$('#my_test_id').attr('id', 'my_new_id');

The script above sets the id of div to my_new_id. If you’re interested, there’s a whole heap of documentation on the jquery site:
– Attr: http://api.jquery.com/attr/
– Clone: http://api.jquery.com/clone/

Uploadify – Limit to One Upload Only

Hey everyone,

Just a quick post detailing how to limit uploadify to a single file. Simply add the following settings to your uploadify initialisation:

multi: false
queueSizeLimit : 1
uploadLimit : 1


$(document).ready(function() {
     $('#file_upload').uploadify({
        'swf' : 'Html->url('/uploadify/uploadify.swf');?>',
	'uploader' : 'Html->url('/uploadify/uploadify.php');?>',
	'cancelImg' : 'Html->url('/webroot/uploadify/cancel.png');?>',
	'folder' : 'Html->url('/extraz/uploaded_by_all_users');?>',
	'auto' : true,
	'buttonText' : 'Browse',
	'multi' : false,
	'queueSizeLimit' : 1,
	'uploadLimit' : 1,
	'sizeLimit' : 1073741824,
	'debug' : true,
	'multi' : false,	        
	'onUploadProgress' : upload_progress_handler,
	'onUploadStart' : upload_start_handler,
	'onUploadSuccess' : on_upload_success,
	'onUploadError' : on_upload_error
     });
});

Once the upload limit is exceeded the onUploadError event is raised.

Cheers

POST http://192.168.1.3:3000 406 (Not Acceptable) – AJAX with Ruby on Rails

Just a quick post on an error I ran into today when trying to create an AJAX image upload with Ruby on Rails. When submitting an AJAX form I received the following error:

POST http://192.168.1.3:3000/uploads 406 (Not Acceptable)

It turns out that there is a fairly simple (and admittedly obvious) solution. Ensure that your controller has an appropriate response for JavaScript files:

i.e.
Form:

{:multipart => true}, :remote => 'true') do |f| %>
  
    

prohibited this image from being saved:

  • 'button' %>
    @upload.product_id %>

    Form JavaScript:

    /* Wait for document to load */
    $(document).ready(function() {
        create_ajax_form('new_upload');
    })
    
    /* Create an ajax form */
    function create_ajax_form(form_id){
    
       //Handle ajax submission
       $j('#' + form_id).submit(function(){
    
           //Send for data
           $j.post($j(this).attr("action"), $j(this).serialize(), null, "script");
    
           //Return false
           return false;
       });
    }
    

    Controller Action:

    #Create an upload
      def create
    
        #Create vars
        @upload = Upload.new(params[:upload])
    
        #Create responses
        respond_to do |format|
          if @upload.save
    
            #Retrieve product
            @product = Product.find_by_id(@upload.product_id)
    
            #Create success responses
            format.html { redirect_to @product, :notice => 'Image Added Successfully!'}
            format.js
          else
    
            #Create error responses
            format.html { render :action => 'new'}
            format.js
          end
        end
      end
    

    JavaScript Response:

    alert('test');
    

    Modal Popup – Twitter Bootstrap

    Just a quick post on how to create a modal popup using twitter bootstrap:

    Step #1:

    Add the following to a page element such as a link or button in order to open the modal:

         href="modal_content_name"
         data-toggle="modal"
    

    i.e.

    Add Image
    

    Step #2:
    Create a content div i.e.

    
    

    And that’s all there is to it, just make sure you’ve included the bootstrap-modal.js file.

    Modal Popup - Twitter Bootstrap

    Modal Popup - Twitter Bootstrap


    Open Twitter Bootstrap Modal Popup on Page Load:
    In order to open the modal dialog on page load simply add the following JavaScript:

    
        $(document).ready(function(){
            $('#test_modal').modal('show');
        });
    
    

    You can also close the modal popup manually by using the following JavaScript:

    
    $('#test_modal').modal('hide')
    
    

    Adjust Modal Width:
    In order to adjust the modal width you have two options, Javascript or CSS. You can use the following JavaScript mentioned on GitHub:

    
       $('#test_modal').modal({
            backdrop: true,
            keyboard: true,
            show: false \remove this if you don't want it to show straight away
        }).css({
            width: 'auto',
            'margin-left': function () {
                return -($(this).width() / 2);
            }
        });
    
    

    Or this CSS from StackOverflow:

    body .modal-admin {
        //new custom width
        width: 750px;
        //must be half of the width, minus scrollbar on the left (30px)
        margin: -345px 0 0 -375px;
    }
    

    Show modal when the user scrolls past certain div
    I’ve received another request on how to show the modal when a user scrolls to a certain div. The following should work, but please let me know if you have any issues.

    /* Wait for document to load */
    $(document).ready(function(){
    
    $(window).scroll(function(){
    
    //Retrieve scroll distance from top
    var top = $(window).scrollTop();
    
    //Retrieve the divs distance from top of page
    var div_distance = $('my_div').offset().top;
    
    //Use this if you want a bit of a variable distance, for instance if they scroll 150 pixels past the div
    var buffer_distance = 150;
    
    //Check if scrolled past div
    if(top >= div_distance && top <= (div_distance + buffer_distance)){
    
    //Show modal - you may want to add checks etc to see if it's already show
    $('#test_modal').modal('show');
    
    } else {
    
    //Hide the modal, have scrolled past - you may want to add some checks to see if it's already hidden etc
    $('#test_modal').modal('hide');                         
    }        
    }); 
    });
    
    

    Popover Function – Twitter Bootstrap

    Just a quick post on how easy it is to implement a popover with twitter bootsrap:

    JavaScript:

    //Create tooltips for login/signup forms
    function create_tooltips(){
    
        //Create vars
        var titles = ['test title']
        var contents = ['test content'];
        var fields = ['#user_email'];
    
        //Loop through each field and assign tooltip
        for(var i = 0; i < fields.length; i++){
    
            //Create vars
            var field = $(fields[i]);
            var title = titles[i];
            var content = contents[i];
    
            //Ensure field found
            if(field){
    
                //Create popover
                $(field).popover(
                    {
                        animation: true,
                        placement: 'right',
                        selector: false,
                        trigger: 'hover',
                        title: title,
                        content: content,
                        delay: 0
                    });
            }
        }
    }
    

    Form:

      
    resource_name, :url => registration_path(resource_name), :class => 'form-vertical') do |f| %>
    'btn btn-success' %>

    Result:

    Popover - Twitter Bootstrap

    Popover - Twitter Bootstrap

    That’s all there is to it, if you haven’t had a chance to check it out yet make sure you head on over to the official site – there are some pretty neat features.

    Setting Default Slider Value – jQuery UI

    Had a bit of a muck around with jQuery sliders today, just though I’d post the code I used to set a default value in case anyone else has a use for it:

    
    //Create sliders
    $(document).ready(function() {
       $(".slider").slider("option", "value", 100);
    });
    
    

    Just sub whatever you want your default slider value to be in place of the 100. The jQuery documentation is also pretty useful if you’re chasing any more info: jQuery Slider Documentation

    Cheers

    Uncaught TypeError: Object # has no method ‘toggle’ – jQuery

    Ran into a bit of a problem with jQuery today, not entirely sure what the issue was but apparently it did not like me using the .get() function. I received the following error:

    //Enable toggling of sub_order display
    $(document).ready(function() {
        $('.expanding_header').click(function(){
          $(this).find('.expanding_content').get(0).toggle('slow', function() {
          });
        });
    });
    
    Uncaught TypeError: Object # has no method ‘toggle’

    By substituting the get function with a :first selector the error does not occur:

    $(document).ready(function() {
        $('.expanding_header').click(function(){
          $(this).find('.expanding_content:first').toggle('slow', function() {
          });
        });
    });