jQuery Forum

DatePicker Input Mask
[2Replies]
- 16-Jan-2013 02:54 PM
- Forum: Using jQuery UI
I am using the Jquery date picker. I have a page where the user can enter a date. I want to make sure when they enter a date it will show up __/__/____ when they type it in. I have 3 date pickers on the page I want to mask. All 3 are the same lay out.

My Code
2. <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
3. <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
6. <link rel="stylesheet" href="css/redmond/jquery.ui.all.css">
7. <script src="js/jquery-1.7.2.js"></script>
8. <script src="js/jquery.ui.core.js"></script>
9. <script src="js/jquery.ui.widget.js"></script>
10. <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
11. <script src="js/jquery.ui.button.js"></script>
12. <script src="js/jquery.ui.position.js"></script>
13. <script src="js/jquery.ui.autocomplete.js"></script>
14. <script type="text/javascript" src="js/validate.js"></script>
15. <script type="text/javascript" src="js/currencyFields.js"></script>
16. <script type='text/javascript' src='js/dFilter.js'></script>
17. <script language="JavaScript" src="js/mm_menu.js"></script>
20. <link rel="stylesheet" type="text/css" href="css/subModal.css" />
21. <script type="text/javascript" src="js/common.js"></script>
22. <script type="text/javascript" src="js/subModal.js"></script>
25. <script>
26. $(function() {
27. $( "#datepicker" ).datepicker({
28. changeMonth: true,
29. changeYear: true
30. });
31. });
33. $(function() {
34. $( "#datepicker1" ).datepicker({
35. changeMonth: true,
36. changeYear: true
37. });
38. });
40. $(function() {
41. $( "#datepicker2" ).datepicker({
42. changeMonth: true,
43. changeYear: true
44. });
45. });
47. </script>
49. <body>
50. <input type="text" name="datepicker" id="datepicker" onchange="getTerm();" onblur="checkDate(this)" value="<cfoutput>#DateFormat(TheCurrentDateTime,"mm/dd/yyyy")#</cfoutput>"/>
51. </body>
I saw some examples online that about masking but every time I try them they never seem to work. When I debug in IE it says the mask is undefined.
I tried the example from http://digitalbush.com/projects/masked-input-plugin/
I have also tried
1. $(".datepicker").mask("99/99/9999;");
everywhere that I can think of and I can't get it to work. I am fairly new to jquery so I am still trying to understand the functionality of it.

Thanks

Only show Active Items in autocomplete
[2Replies]
- 05-Dec-2012 06:03 PM
- Forum: Using jQuery UI
I have a question. I have an Autocomplete the is shwing a list of Active people. Is there a way to only show Active people but if they type a name of an Inactive person the name will show in the input box but not in the dropdown list?

This is my combo box function
2. (function($) {
3. $.widget("ui.combobox", {
4. _create: function() {
5. var input, self = this,
6. select = this.element.hide(),
7. selected = select.children(":selected"),
8. value = selected.val() ? selected.text() : "",
9. wrapper = this.wrapper = $("<span>").addClass("ui-combobox").insertAfter(select);
11. input = $("<input>").appendTo(wrapper).val(value).addClass("ui-state-default ui-combobox-input").autocomplete({
12. delay: 0,
13. minLength: 0,
14. source: function(request, response) {
15. var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
17. response(select.find("option").map(function() {
18. var text = $(this).text();
19. if (this.value && (!request.term || matcher.test(text))) return {
20. label: text.replace(
21. new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
22. value: text,
23. option: this,
24. category: $(this).closest("optgroup").attr("label")
25. };
26. //MK
27. $('#test').attr('style', 'display: none;');
28. }).get());
29. },
30. select: function(event, ui) {
31. ui.item.option.selected = true;
32. getVendor();
33. self._trigger("selected", event, {
34. item: ui.item.option
35. });
36. },
37. change: function(event, ui) {
38. if (!ui.item) {
39. var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
40. valid = false;
41. select.children("option").each(function() {
42. if ($(this).text().match(matcher)) {
43. this.selected = valid = true;
44. return false;
45. }
46. });
47. if (!valid) {
48. getVendor();
49. $('#test').attr('style', 'display: block;');
50. // remove invalid value, as it didn't match anything
51. //$( this ).val( "" );
52. //select.val( "" );
53. //input.data( "autocomplete" ).term = "";
54. //return false;
55. }
57. }
58. }
59. }).addClass("ui-widget ui-widget-content ui-corner-left");
61. input.data("autocomplete")._renderItem = function(ul, item) {
62. return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
63. };
65. input.data("autocomplete")._renderMenu = function(ul, items) {
66. var self = this,
67. currentCategory = "";
68. $.each(items, function(index, item) {
69. if (item.category != currentCategory) {
70. if (item.category) {
71. ul.append("<li class='ui-autocomplete-category'><b>" + item.category + "</b></li>");
72. }
73. currentCategory = item.category;
74. }
75. self._renderItem(ul, item);
76. });
77. };
79. $("<a>").attr("tabIndex", -1).attr("title", "Show All Items").appendTo(wrapper).button({
80. icons: {
81. primary: "ui-icon-triangle-1-s"
82. },
83. text: false
84. }).removeClass("ui-corner-all").addClass("ui-corner-right ui-combobox-toggle").click(function() {
85. // close if already visible
86. if (input.autocomplete("widget").is(":visible")) {
87. input.autocomplete("close");
88. return;
89. }
91. // work around a bug (likely same cause as #5265)
92. $(this).blur();
94. // pass empty string as value to search for, displaying all results
95. input.autocomplete("search", "");
96. input.focus();
97. });
98. },
100. destroy: function() {
101. this.wrapper.remove();
102. this.element.show();
103. $.Widget.prototype.destroy.call(this);
104. }
105. });
106. })(jQuery);
108. $(function() {
109. $("#combobox").combobox();
110. $("#toggle").click(function() {
111. $("#combobox").toggle();
112. });
113. });
this is my html
2. <select id="combobox" name="chkPayTo" >
3. <option value="" selected="selected"></option>
4. <cfloop query="getCustomer">
5. <cfif #getCustomer.Type# neq #customerType#>
6. <cfset customerType = #getCustomer.Type#>
7. <optgroup label="<cfoutput>#getCustomer.TypeName#</cfoutput>">
8. </cfif>
9. <option value="<cfoutput>#getCustomer.TypeCode#_#getCustomer.ID#</cfoutput>"><cfoutput>#getCustomer.Name#</cfoutput></option>
10. </cfloop>
11. </select>
My boss asked me today if the active people will show up on the dropdown but be able to type an inactive person and have then show up.

I do have a way set up that if not valid i call a JS function up to check the non valid people. This worded but for this page I am getting 3 different types of people from 3 different sources.

I tried checking to see if the person was inactive make the option not visible but in the autocomplete it showes them.

Clear selected text in Autocomplete
[7Replies]
- 16-Oct-2012 01:39 PM
- Forum: Using jQuery UI
I am using an Autocomplete for a filter. I have a clear link when clicked it will clear out the filter fields. In my clear Javascript function I am unable to clear out the text of the autocomplete input in javascript. I searched for a while and I am not able to find a way to clear out the text.

AutoComplete dynamic select
[0Replies]
- 27-Aug-2012 03:52 PM
- Forum: Using jQuery
I have a question. I have an edit page with an autocomplete. What I am trying to figure out is when the page loads I want to check and see if the value from the DB matches the combobox value the have that value selected. I have coded the html but when the autocomplete get created on the page it is not showing the selected value. Is there a way to do it.
This is what I have for the auto complete
1. <script>
  
  (function( $ ) {
  $.widget( "ui.combobox", {
  _create: function() {
  var input,
  self = this,
  select = this.element.hide(),
  selected = select.children( ":selected" ),
  value = selected.val() ? selected.text() : "",
  wrapper = this.wrapper = $( "<span>" )
  .addClass( "ui-combobox" )
  .insertAfter( select );
  input = $( "<input>" )
  .appendTo( wrapper )
  .val( value )
  .addClass( "ui-state-default ui-combobox-input" )
  .autocomplete({
  delay: 0,
  minLength: 0,
  source: function( request, response ) {
  var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
  response( select.children( "option" ).map(function() {
  var text = $( this ).text();
  if ( this.value && ( !request.term || matcher.test(text) ) )
  return {
  label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +$.ui.autocomplete.escapeRegex(request.term) +")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>" ),value: text,option: this};
  }) );
  },
  select: function( event, ui ) {
  ui.item.option.selected = true;
  getVendor(); // calls to get vendor address
  // needed to reset the hidden new vendor fields to not new so if user selects new and later selects a vendor in the list these values will clear out and be reset if vendor is going to be new.
  document.getElementById("ifNewVendor").value=0;// this resets the new vendor to 0
  document.getElementById("ifNewAddress").value=0;// reserts the new address to 0
  document.getElementById("newVendorName").value=""; // clears out the name of the new vendor
  self._trigger( "selected", event, {
  item: ui.item.option
  });
  },
  change: function( event, ui ) {
  if ( !ui.item ) {
  var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
  valid = false;
  select.children( "option" ).each(function() {
  if ( $( this ).text().match( matcher ) ) {
  this.selected = valid = true;
  return false;
  }
  
  });
  if ( !valid ) {
  document.getElementById("ifNewVendor").value=1;// to show if new vendor
  document.getElementById("newVendorName").value=$(this).val(); // enter the name of the vendor so I can save the name. I was not able to get the name in JS until I did this.
  getVendor();// calls get vendor to update the address.
  return false;
  }
  
  }
  }
  
  })
  .addClass( "ui-widget ui-widget-content ui-corner-left" );
  input.data( "autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li></li>" )
  .data( "item.autocomplete", item )
  .append( "<a>" + item.label + "</a>" )
  .appendTo( ul );
  };
  $( "<a>" )
  .attr( "tabIndex", -1 )
  .attr( "title", "Show All Items" )
  .appendTo( wrapper )
  .button({
  icons: {
  primary: "ui-icon-triangle-1-s"
  },
  text: false
  })
  .removeClass( "ui-corner-all" )
  .addClass( "ui-corner-right ui-combobox-toggle" )
  .click(function() {
  // close if already visible
  if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
  input.autocomplete( "close" );
  
  return;
  
  }
  // work around a bug (likely same cause as #5265)
  $( this ).blur();
  // pass empty string as value to search for, displaying all results
  input.autocomplete( "search", "" );
  input.focus();
  });
  },
  destroy: function() {
  this.wrapper.remove();
  this.element.show();
  $.Widget.prototype.destroy.call( this );
  }
  });
  })( jQuery );
  
  $(function() {
  $( "#combobox" ).combobox();
  $( "#toggle" ).click(function() {
  $( "#combobox" ).toggle();
  });
  });
  
  </script>
This is my html
1. <select id="combobox" name="chkPayTo" onchange="javascript: getVendor()" >
  <option value=""></option>
  <cfoutput query="getVendorName">
  <option value="#getVendorName.ListID#" <cfif #getVendorName.ListID# eq #vID#> selected="selected"</cfif>>#getVendorName.Name#</option>
  </cfoutput>
  </select>

DaterangePicker showing in wrong place
[0Replies]
- 09-May-2012 12:53 PM
- Forum: Using jQuery Plugins
I am using the daterange picker. On the page I have a Spry Tab Bar on one of the tabs I have the daterange picker. If the user clicks on a link that shows the tab with the datepicker on, everything works. If the user clicks a link that shows a different tab, the tab with the date picker is hidden. Then If the user clicks on the tab with the picker then clicks on the text box for the picker popup to show the pop up it is not showing under the textbox. Sometimes it is at the bottom left of the page and sometimes it is the top left of the page. I have spent a couple of hours trying to figure this out and I am unable to get the pop up to show correctly.

Thanks Ryan

Response title

Attachments

jQuery Forum

Activity Trend