Example of a working setup: $ cat app/assets/javascripts/application.js //= require jquery //= require jquery-ui $ cat app/assets/stylesheets/application.css /* *= require vendor * */ $ cat vendor/assets/stylesheets/vendor.css /* *= require_tree ./jquery_ui * */ vendor/assets/ $ tree stylesheets vendor.css jquery_ui jquery-ui-1.8.13.custom.css … images jquery_ui ui-bg_flat_0_aaaaaa_40x100.png … Finally run this command: vendor/assets/images $ ln … Read more
I could not get the previous answer to work. I did the following to get the index of the tab by name: var index = $(‘#tabs a[href=”#simple-tab-2″]’).parent().index(); $(‘#tabs’).tabs(‘select’, index);
Here you go. It’s a little messy but it works. $(function () { var companyList = $(“#CompanyList”).autocomplete({ change: function() { alert(‘changed’); } }); companyList.autocomplete(‘option’,’change’).call(companyList); });
I’ve found the solution. After a long time of debugging I figured out that there was a <div> that had the exact same ID, lying higher than the input field. Therefore the script took the first instance that contained the ID and picked the DIV instead of the input field. I removed/renamed the DIV and … Read more
It’s simple. Keep your jQuery code, but assign it to a <div> instead of an input box. Date: <div id=”datepicker”></div> <script> $(function() { $(“#datepicker”).datepicker(); }); </script> A functional example lives at the jQuery UI webpage for the datepicker widget, and I’ve also included one below. $(function() { $(“#datepicker”).datepicker(); }); <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <link rel=”stylesheet” href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css”> <script … Read more
Now that we have Ruby on Rails 3.1.0, this is what worked for me: app/assets/javascripts/application.js //= require jquery //= require jquery_ujs //= require jquery-ui //= require_tree . This directly includes the jQuery UI provided by the jquery-rails gem. But the gem does not provide the theme files. For these, I added a theme directory under … Read more
jQuery-ui specifically needs to be build after installation. To avoid this, use npm install jquery-ui-dist
This removes .datepicker COMPLETELY: $( selector ).datepicker( “destroy” ); $( selector ).removeClass(“hasDatepicker”).removeAttr(‘id’); Documentation: https://api.jqueryui.com/datepicker/#method-destroy also read the comments below
Use the blur method. You can try this sample. <html> <head> <title>No Focus on jQuery Dialog</title> <link type=”text/css” rel=”stylesheet” href=”https://stackoverflow.com/questions/1793592/ui.all.css” /> <script type=”text/javascript” src=”jquery-1.3.2.min.js”></script> <script type=”text/javascript” src=”ui.core.js”></script> <script type=”text/javascript” src=”ui.dialog.js”></script> <script type=”text/javascript”> $(document).ready(function() { // Dialog to confirm or cancel // Focuses on confirm by default. $(‘#noFocusDialog’).dialog({ autoOpen: false, buttons: { Confirm: function() { $(this).dialog(‘close’); … Read more
You need to use a different approach for the source call, like this: $(“#product”).autocomplete({ source: function(request, response) { $.getJSON(“product_auto_complete.php”, { postcode: $(‘#zipcode’).val() }, response); }, minLength: 2, select: function(event, ui){ //action } }); This format lets you pass whatever the value is when it’s run, as opposed to when it’s bound.