Autocomplete not working when the data is dynamically created using on click of the textbox
Hi All, I Have a Strange problem going on for weeks and I don't know how to fix it. I have two text boxes City and Area which needs to show autocomplete. While the page loads, Im taking all the city which I need from database and saving it in an arraylist. So when the user types a City, the autocomplete works perfectly. Problem comes after this, based on the City the user has choosen, when he clicks the Area textbox, Im making an ajax call and getting the areas for the city in from the
Jquery range slider - change value while loading
Hi , How can i change the value while range slider loading ? Here is my jsfiddle Thank you !
Jquery Ui Date Picker
Hi, I need a small help i have two date pickers start date and end date by this i calculate week and show in a textbox. The problem is if i change week for e,g 5 to 4 the end date should also change similarly if i add i make it 5 to 6 it should increase. A Fiddle to go with it: http://fiddle.jshell.net/WU9P6/24/
Compatible for jQuery UI v. 1.10.2?
Hello, How compatible is jquery-ui.min.js v. 1.10.2? I have end users that use old web browsers. thanks!
juqery autocomplete
Hi , I am implementing a jquery autocomplete functionality where I need to do an AJAX call to get the required data . There is a sample code in the jsfiddle below: http://jsfiddle.net/m3MGH/31/ Autocomplete does not work in this ,... can any suggest what is wrong ? Your help is highly appreciated !! Thanks in Advance
catcomplete error for jquery-ui v1.11.4
The following code for autocompletion with categories ran fine with jquery-ui v1.10.4: $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; }; that._renderItemData( ul, item ); }); } }); When using jquery-ui 1.11.4, I receive an
This slider moves from highest price to lowest price and slider's handle should pop on top along with the handle
//calculation $(function() { $( "#pakslider" ).slider({ range: "min", value:0, min: 0, max:10, step: 1, animate:7500, slide: function( event, ui ) { //calcuation logic } } }); }); //getting value from db // some code // // assign value $().ready( function(){ $("#pakslider").slider('value', <?php echo $pd->quantity;>); }); // Append slider $('.ui-slider-handle:eq(0)').append('<span class="price-range-min value" id="slider-value">$' + $('#pakslider').slider('values', 0 ) + '</span>'); </script>
Question about Date object returned by Datepicker's getDate() method
I'm trying to get the date currently selected in the Datepicker. I was going through its API and saw a getDate() method, and it states it returns a Date object. When I clicked to read more about this Date object, it says "The Date type is a JavaScript object that represents a single moment in time, etc." As I read on, there were no listing of this Date object's methods, and yet I don't think it's the standard JavaScript's Date object because I can't access the usual standard Date object methods with
How can I select dates automatically while I will click on one date.
I am enabling some dates as per the Ajax response form the server. Here is the code for the same : $(function() { $(document).on('change', '#booking_package_type', function() { var bol = $.inArray($(this).val(), ["weekend", "full_week", "midweek", ""]); var pkg_type = $(this).val(); if (bol == -1) { $("#booking_end_date").prop("disabled", false); } else { $("#booking_end_date").prop("disabled", true); } $.get("/admin/bookings/fetch_dates",
I have some problems with drag and drop functions. There might be some bug that i dont see. If someone can go through my code and help me solve the issue, id be greatful !!!
HTML <!DOCTYPE html> <html> <head> <title>Problem</title> <link rel="stylesheet" type="text/css" href="jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> <head> <body> <div id="menu"> <div class="intro"> <div class:"numbers" > <div class="number">0</div> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> <div class="number">6</div> <div class="number">7</div>
jquery ui Type Error: s is not a constructor
I am using jqueryui select menu but it is not working on some old Firefox browsers like FF26. I am getting error [Type Error: s is not a constructor]. Please let me know how I can get around this. I already googled it a lot but no solution. Below is the screenshot:
Adding link to TAB into a tab content
Hi! I'm trying to add a link to a tab into a tab content, but it doesn't work, i don't know why : <div id="tabs"> <ul> <li><a href="tab-1">Tab 1</a></li> <li><a href="tab-2">Tab 2</a></li> <li><a href="tab-3">Tab 3</a></li> </ul> <div id="tab-1"> <h1>Tab 1</h1> <p>Lorem Ipsum</p> <a href="#tab-3" class="ui-tabs-anchor">Link to Tab 3</a> </div> <div id="tab-2"> <h1>Tab 2</h1>
jQuery UI regional localization issue
Hi, I'm working on a PHP, Javascript application and i'm using with success the jQuery and jQuery UI libraries. But i have a problem when i try to load the jquery-ui-i18n.min.js file. The application enters into an infinite loop and dies. And i don't know how to find/fix the problem. This is the page source: http://screencast.com/t/RrlLq8zPUDEI And the error: http://screencast.com/t/WKGPuPPZE1oS If i don't load that file, everything works except the translations for the datepicker: http://screencast.com/t/UlF1RdML
Changing the text in text box changes the width in IE 11
Changing the text in text box changes the width in IE 11 http://jsfiddle.net/3TwKF/20/ Please let me know for any solution
Change the default /hover colour for a single tab
I'm a newbie to jquery and have managed to use theme roller to style a set of tabs. The very last tab is called 'Resources' and contains links to useful stuff about the project. Thing is, the default colour of this tab needs to be green so it stands out from the rest of the grey 'content' tabs! (And the hover state needs to be a lighter shade of green so it matches the colour behaviour of the other tabs.) . I'm fine playing with the HTML and hoped someone could guide me on how to change the default/hover
backspace key press on Jquery ui Autocomplete textbox doesn't remove any letters on it?
This is my text field for which i am uisng Autocomplete . <input type="text" name="state" id="state" placeholder="State" maxlength="25" required onkeypress="return nospecialCharacters(event)"/> $("#state").autocomplete({ source: function(request, response) { var statevalue = $.trim($("#state").val()); if (statevalue) { $.ajax({ url: url + 'eee', dataType: 'jsonp', jsonp: false, timeout: 6000, jsonpCallback:
jQuery UI Resizable display issue with div inside <ul>
Hello, I'am trying to apply the resizable widget for div inside the grid items.But the 3 resizable icons displayed incorrectly for the grid item.If you apply it for normal div then it displays properly but not for elements inside <ul><li> tags. for example <ul> <li> <div id="usernote"> ///content goes here </div> </li> </ul> $("#usernote").resizable(); Thanks in advance for the response. Regards,
Dialog not centered
I'm using 2.1.3 on IE 11 and the dialog doesn't center itself Here's the actual code. Just one thing does it's to put the initialization of the dialog in a setTimeout of 500 then it works. How can I make sure it is centered without the setTimeout ? $('#GenericDialog').dialog( { position: { my: 'center', at: 'center', of: window }, width: 'auto', show: 'fade', hide: 'fade', showAnim: 'slow', title: 'Information de la prise', closeOnEscape: true, dialogClass: 'dialogWithDropShadow',
Default items for jQuery UI droppable shopping cart demo
Hello, I use a modified version of droppable shopping cart demo, from this source: http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/ I can drop items to cart and delete items from cart. It works perfectly when I start with an empty cart. The problem is if the cart is non-empty when I load the page. If I add some items to the cart manually (with <li></li>), I can't delete them. I can drag, but I'm not able to drop nowhere. Please help me to solve this... Thank You and best regards: Endre,
Accordion Content Issues
I have <code> $(function() { $( "#Medal-accordion" ).accordion({ active: false, collapsible: true, heightStyle: "content" }); }); </code> but the height still shows as auto
Using Autocomplete: Any way to ignore "space"
I have a long list of web links, and a search field that allows users to search them. The user starts typing into a search field, and the form uses jquery ui autocomplete to instantly display the list of matching links. They can click a result and instantly be taken to the site. The problem is, if they type a "space" first, it renders every single link whose label contains a space in it. Is there any way to construct this so spaces entered are ignored? Example code: $(function() { var availableTags
Hard time positioning jquery dialog
Hi guys, I have the following and it positions the dialog at 0,0 of the viewport. Any idea what is incorrect ? $('#GenericDialog').dialog( { position: [500, 500], width: 'auto', collision: 'fit', show: 'fade', hide: 'fade', showAnim: 'slow', title: 'Information de la prise', closeOnEscape: true, dialogClass: 'dialogWithDropShadow' });
Menu control doesn't respond to Enter
Debatable whether the selection should be triggered by Enter, or Space, however for Enter, there is no code hooked up to the case: case $.ui.keyCode.ENTER:
Slider with jQuery UI not working properly in Safari
I created an image slider where I use the jQueryUI draggable function and am experiencing a problem now with Safari. In Safari the following happens: on mousedown on a picture and the mouse is slightly moved the first image is moved in the visible area (doesn't matter which image was visible before) but on mouseup the next/previous image is shown (as is should). I don't really know where it comes from - maybe from jQuery UI draggable? Here is a demo: http://codepen.io/anon/pen/YXVmEm (the problem
Autocomplete Combobox search method not working
I have the following jQuery UI Combobox. When I click on the "show all" button, it searches for the value in the input box, instead of displaying all items. The line input.autocomplete("search", "") is supposed to display all items. However, it seems to ignore it. Any help would be greatly appreciated. (function($) { $.widget("custom.combobox", { _create: function() { this.wrapper = $("<span>") .addClass("custom-combobox")
Using clipboardData.getData for image files
I'm trying to write a jquery script that gets the data out of an image file that's being copied and pasted and then turns it into a DataURL. The getData option here is returning nothing for me when I paste in a file (ex: myfile.jpg). It doesn't seem to matter whether I do this as getData("text") or getData something else. Alternatively, if I can't get the contents of a file this way, is there a way to convert the jQuery event object into a regular Javascript event object. I can use e.clipboardData.items[0].getAsFile()
set that button label programmatically with jQuery
I use dialog with the help of some jentlemen here. I added a button and I attach its html representation from Inspect Element. There is no label on the button but if I manipulate and add it manually (as seen here:DIPLAYED TEXT) it appears on the button My question: How do I set that label programmatically with jQuery? Regards I. Sher <button type="button" text="Get" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text"></span>DIPLAYED
How to Limit The Range of Date Picker to Only One year (For ex 2015)
Can some one please let me know how I can force jQuery UI Data Picker to loop only in one specific year months? I only would like to enable users select dates from Jan 1 , 2015 until end of year and again if they click on month changing button the Calende starts over from Jan First? I already tried thses $('#example1').datepicker({ maxDate: new Date(2015, 11, 31) }); $('#example1').datepicker({ yearRange: new Date().getFullYear()
Accordion and function parameters
If one desires "Collapse content", then use "collapsible: true If one desires "No auto height", then use heightStyle: "content" What if one desires to use both? I've tried several configurations like this example <script> $(function() { $( "#accordion" ).accordion({ heightStyle: "content" collapsible: true }); }); </script> and it always fails. IS this just impossible or is the fix really simple. I sure could use some parameter help. Thanks
use jQuery UI dargable
I use the dargable JQuery UI, encountered a problem. My browser is Google browser, the page is a scroll bar. I drag it. If the scroll bar is greater than zero, the position and the mouse position of the drag element can be offset. English is not very good, please forgive me This is the wrong picture.. This is the right picture..
dialog box which contains just a title, an edit box and a submit botton
I hope it's the right forum for my question... I need to popup a dialog box which contains just a title, an edit box and a submit botton. Then I want to write programmatically to the edit box, write also manually and close it with the button. Is there some example to that? Thx I. Sher
Version of jQuery UI based on jquery-1.10.2.
I have jQuery version jquery-1.10.2.js and what version of JQuery UI should I use? Please remember that user you use my website, they use old version of web browser. Thanks!
Jquery UI Draggable Position Issue
Good day. I am currently working on a functionality wherein you can drag a div and place it in a div. It is almost similar to this Card Game. I have worked on it and I was able to run it, but when I integrated it to the main application, it is no longer working. Draggable is working since I can see that when I drag the div, I can see the dragging class. the reason why it is not working is that, when I drag it.. it does not move.. the top and left position is not updating. It is in just the same position
How do nest the same dialogue infinitely?
First of all, is this even possible? Second, How? I have not even attempted such a feat yet. I just do not know where to start. I have my base dialogue that pops when a user clicks new on an account (this account is to create a parent), but this needs to be able to be done infinite amount of times. I.E. Sub-Item of a Sub-Item of a Sub-Item of a Sub-Item, etc...
Using jQuery UI toggle expanding/hiding nested divs
I have a recursive function that renders divs as shown below. I have been researching and have not found a good way to accomplish the toggle method. I would like to be able to have the click method fire on only a single element. IE: Only fire when i click on Administration, not when i click on anything within administration. Then at this point all i am really trying to do is click on a level 1, fire the toggle method to just show/hide whats nested inside that element. I would love to be able
How to style Datepicker month and year dropdowns
Is there a way to style the month and year dropdowns of Datepicker when the changeMonth and changeYear properties are true? I wanted to change the background color and I don't know how. If there is a way through ThemeRoller, I couldn't find it. Thanks.
Using same dialog for adding and editing
I have written a code for adding data with a dialog, but now I need a separate button that calls the same dialog for editing that data. How can I change buttons within the dialog when called from the #edit-user button. So I need: 1.button:#create-user ---> SAVE, CANCEL (this one already works) 2.button:#edit-user ---> UPDATE, DELETE, CANCEL $(function () { var dialog, form, name = $("#name"), birthdate = $("#student-datepicker"), allFields = $([]).add(name).add(birthdate),
Datepicker calling onChangeMonthYear before updating itself
Hi all I'm using the Datpicker, and it's great, except for one problem... it is calling the onChangeMonthYear event BEFORE it updates itself. This is a problem for at least 2 reasons... a) if you want to modify the Datepicker component itself during the onChangeMonthYear event - all of your changes will get wiped after this event is called. b) if you want to read the contents of the calendar, it will still contain the previous month's data, instead of the newly selected month's data. Simple solution
Problem with drag and drop an image to a cell table
I'm making a little utility where the user is going to be able to drag an image and drop it inside of cell table. Everything works properly until the moment the image is dropped inside the cell, I want to have the image appended to the cell that was chosen for it, but it is appended into a completely diferent place. HTML: <!DOCTYPE html> <html> <head> <title>Test</title> </head> <script type="text/javascript" src="src/js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="src/js/jquery-ui.min.js"></script>
Font issue question with ThemeRoller
I am using Google Fonts, and I use 'PT Sans' as the font name to reference it. Needless to say, this is a custom font, and ThemeRoller would not know about it. So what I did was I configured the look and feel of my Datepicker through ThemeRoller with Verdana as the default font, downloaded the custom build. I then went to jquery-ui.css and changed two instances of Verdana in it to 'PT Sans'. My problem is that although the font did change, it didn't change to 'PT Sans'. I know it's not because the
Next Page