Remove duplicates from source (table request) in input text with multiple values ...
Hi all, I have an input field and the user can add multiple values coming from a source like a table or a JSON array. If the user has already entered a value, I would like that this value does not appear anymore in the list returned by the source. You can find a screenshot in attachment. As you can see in this example, I would like to add the "PIZZA" value. Once this value is added, I don't want that the "PIZZA" value appears again in the list. Must I change something in the jQuery UI plugin or in
datepicker UI Arrival and Departure Fields
I have a WordPress form on my client's hotel website with an arrival field and a departure field. The client wants the departure date to add +1 day to the minDate when a user selects the arrival date. I have tried adding +1 to several areas but nothing seems to work. I have attached the script I am using (it's using jQuery instead of $ because the form is in a code block in WordPress). I have searched several forums and Google searches with no success. <script> jQuery(function() { var dateFormat
want to copy dragable element. But my code is cutting the element and pasting it on the dropzone
I am using this to drag and drop element $(".drag-able").draggable({ appendTo: "body", cursor: "move", helper: "clone", revert: "valid" }); $(".drop-able").droppable({ tolerance: 'pointer', drop: function (event, ui) { $(this).append($(ui.draggable)); }, }); but it disappearing the original element. I want to drag the element to a new position by keeping the original one on its position. Is this possible?
Jquery-UI draggable: Problem with “over” and “out” event when droppable changes size dynamically
I'm working on a project whare I need to allow drag and dropping from a sidebar to some content. It is very important, that the content (when hovering it with the draggable) expands with applying some padding (to the inner content, in the example code an image). When I enter the droppable with the draggable, the padding is added, which makes the droppable a bit bigger in size (both width and height). Jquery UI does not "recognize" this change in size, it means that when I move the draggable a bit
Safari - jQuery dragging with “filter: drop-shadow()” leaves traces
I have a <div>, that can be dragged using jquery draggable. This action leaves traces in Safari, but works in other browsers. Found similar (old) issues in Chrome regarding repaint, proposing solutions to use outline:1px solid transparent but hat does not help here. This question is also asked on stackoverflow but no answer so far: https://stackoverflow.com/questions/53208588/safari-jquery-dragging-with-filter-drop-shadow-leaves-traces You can see a demo here (open it in Safari): https://jsfiddle.net/qzLjcagt/
Clicking on sortable item prevents input's on change event
I am having an issue where if the user types in an input but doesn't leave the input before clicking on a sortable item, the change event for the input does not fire. Here's a jsFiddle that shows the issue. Any suggestions or is this a bug? Thanks, Reid
Please help with return dialog
Hello, I really need help with this, I am new to jquery and I just made a page with 3 ul with some li that you can switch between them, and I made a dialog that when you click it returns what's in every ul, What I don't know how to make is how to return what's on that moment on the ul, please I really need help, here some pictures:
Drag and Drop issue
When drag the li for the first time it will work and when clicked on close button and again i drag the second time it will not working for dragging
Hide elements that are not siblings to the clicked element.
I am trying to hide element that are not siblings to a clicked element but it doens't seem to work. The toggle aspect works perfectly. However, if click on another row, they all still open even those that not siblings to the licked element. Any ideas on how this can be achieved. My code looks like below. $("td i.material-icons").click(function () { // alert("It should be hidden"); $(this).siblings("ul.messageNav").toggleClass("showMessageNav"); $("ul.messageNav").not($(this).siblings("ul.messageNav")).hide();
Preventing blur event on fields when dialog close button clicked
Hi. I have a modal dialog with a field that has some processing (validation, normalization) that happens on the blur event. I want to skip this if the close button is clicked. How can I do this? Thanks.
HOW I CAN PUT A LINK IN A TABS?
HI, I MODIFY THIS CODE, I WOULD LIKE TO MAKE A EVENT THAT CLICK THE BUTTON AND GO TO A LINK I SPECIFIED. THIS IS THE CODE: <div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content"> <ul role="tablist" class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header" center> ..... OTHER CODE ...... <li role="tab" tabindex="-1" class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" aria-controls="tabs-7" aria-labelledby="ui-id-7" aria-selected="false" aria-expanded="false"><a
Autocomplete change background color of focused element on up/down arrow
Hi there, I have a requirement to highlight the focused element with custom background color from the suggestions when the user navigates through the suggestions using keyboard up/down arrow keys. Currently the background color of the focused element is changed when user focuses the element by mouse(when user hovers the element with mouse) using CSS with :hover. But the background color of the focused element is not changed when the user focuses the element using keyboard up/down arrows. I want to
Sortable and drag speed issue
I have a jQueryUI sortable list. I need to keep track of each new index of the element while dragged, based on the "change" event. But it only works reliably from slow, up to normal drags. If the user drags the element quickly, the "change" event loses track of some indexes with no error thrown in the browser's console. Here is a jsFiddle that shows the problem:https://jsfiddle.net/yhp3m6L8/2/ In this jsFiddle, you can drag an element and see its index change. Below the list, there's a console emulation
Jquery-UI - Drop Sound Not Playing Properly on iOS
I've set up a codepen here: https://codepen.io/nolaandy/pen/eXeZYK If I drag an image from one drop zone to a different drop zone above, I don't get a sound on iPhone/iPad on the initial drop. Only If I drop an already dropped image in the same spot will it make a sound on iPhone/iPad. Other than this I get sounds perfectly on all browsers, even ie/edge. Any help would be GREATLY appreciated.
When I click on accordion, it make my page scroll down
Hi - I'm using this accordion script http://jqueryui.com/accordion/#default, which works great. But whenever I click on one of the buttons to reveal the info in it. It makes the webpage scroll down. Is any way to fix that? Thanks a ton - Eric
autocomplete Uncaught TypeError: Cannot use 'in' operator to search for 'length' in []
Hi, this is my js: $('#autocode' + num).autocomplete({ source: function (request, response) { console.log(request) $.ajax({ method: 'POST', url: '/retrieveProducts', data: { term: request }, success: function (data) { console.log(response(data));
Re-opening selectmenu programatically is triggering the select event undesirably
I'm use mouseenter and mouseleave events on the container element to trigger the opening and closing of selectmenu. But somehow the re-opening is triggering the select event undesirably. I don't want the select event to be triggered when I re-open the selecemenu. Here is how to reproduce the issue: Move mouse cursor onto the selectmenu button, and the selecetmenu will open automatically. Move mouse cursor onto random options. Move mouse cursor out of the selecemenu, and the selectmenu will close
Tabs Widget possibility of Prev/Next buttons
Using a standard JqueryUI Tabs widget is there a reasonable way to create buttons on each tab to go prev/next among the tabs? I am creating pages with several tabs for user input. I would ideally like to enable the user to have prev/next buttons; additionally, I would like to add the tabs they have visited to a collection so that when they go to click "Submit" code can direct them to the first tab of the page not in the collection of visited tabs.
What causes the load of so many jquery-javascript files
I am using https://www.vakantiehuisverhuur.eu/jquery-ui-1/development-bundle/ui/jquery.ui.core.js and https://www.vakantiehuisverhuur.eu/jquery-ui-1/development-bundle/ui/jquery.ui.datepicker.js in order to show a month calender for booking a holiday home. Using SpreedInsights of Google I see that www.vakantiehuisverhuur.eu loads many other js-files that I do not need as for instance widget-min, mouse-min, button-min, resizable-min, etc. It is very slowing down loadtime a my Speedscoore is less than
How to get click event for an diabled html element
Hi: I try using jQuery to get the click event for an diabled html element, but it seems not work. The code snippet is following: <asp:TextBox ID="txbPerFName" TabIndex="1" runat="server" Width="70px" Enabled="false" CssClass="handleTooltip"> </asp:TextBox> $(".handleTooltip.disabled").on({ "click": function () { console.log("testok"); console.log($(this).prop("disabled")); if ($(this).prop("disabled")) { $(this).tooltip({ items: ".handleTooltip", content: "Check Item" }); $(this).tooltip("option",
ui-resizable-se css
using 1.12.1 I have noticed that ui-resizable-se is different from the others set on the jquery ui... .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } any idea if this is a know issue ?
Simple jQuery not working using .css and .js files from jQueryUI download.
The following is my basic js/jquery code, within HTML, which should 'fire' <script type="text/javascript"> S(document).ready(function(){ $( "#date" ).datepicker(); alert ("hello"); $('#my-tabs').tabs(); }); </script>However ( the alert has been added, just to check the function is running, but it's not ) my HTML is not being styled, N.B. the 'id' variable tag names are definitely right for my elements. The references to the relevant .css and .js files are as follows ... <head> <meta
DatePicker: Only display month and year
I need to be able to only show the month and year on the datepicker. Is this possible with the datepicker? Thanks
Make impossible to set a Departure date if Arrival date is not set
Hi.I am using the jQuery datepicker to get Arrival and Departure dates, with success. I would like to improve it making it impossible to set a Departure date if Arrival date is not set. When the Departure input field is selected by the user but if the Arrival date is empty I would like to force it opening the datepicker in the Arrival input field. Can give me some guidance to achieve it? Thank you very much.
Datepicker special control
I have a need to do the following and do not know how to set up Datepicker. An input box which will take text from user. I want Datepicker to show only after the user typed the the text "date(", and this allow the user to pick a date and append the date string the text - e.g. "date(2019-01-10". Now the user can continue to type and pick another date later and the now date will keep append to the text of the input box. Below is my design: User input --> a key up event callback will check input for
How to change Datepicker to chinese
How can I change the datepicker to chinese in my following coding? <input type="text" name="my_value" id="datepicker1" /> <link rel="stylesheet" href="jquery/jquery-ui.css"> <script src="jquery/jquery.js"></script> <script src="jquery/jquery-ui.js"></script> <script src="i18n/datepicker-zh-TW.js"></script> <script> $( function() { $( "#datepicker1" ).datepicker({ dateFormat: "yy/mm/dd", } ); } ); </script>
Using Jqueqy tabs in content page holder
Hello, Could you please send me an example of how to use the jquery tabs in a content page with a master page. Cause i tried with no success. it's seems that i am missing something case the javascript files that i link are not recognize .maybe i don't add them in the right place. Thank you Waiting for your example
Autocomplete: Input-Field stays focused after selection
Hi there, this is my first post and I hope you can help me solving a probleme i'm looking at for days now: I do use Autocomplete with jqueryui for searching a json-file on an interactive map. By selection a value, the infowindow for a point shows up. Everything works fine, but one thing: After clicking or touching a list-point, the infowindow shows up but the input field stays focused. Mobile that leads to the problem, that the keyboard stays open and overflows the infowindow. This is part of my
Jquery-UI Spinner. Custom HTML
Hello! I have jquery-ui spinner like this: https://codepen.io/emdm/pen/ZVwOaQ But i want spinner like this (input field is between the buttons): https://www.cssscript.com/wp-content/uploads/2016/10/Animated-Input-Spinner.png?w=331 How can i do?
Autocomplete list passed in from HTML input tag not showing
I am using the followng default autocomplete code passing in a variable that consists of a list of XML filenames, but the list is not showing up in the autocomplete box. The jquery code is also interpreting the variable as a literal instead of the values which are the XML filenames. Can you suggest fixes for both ot the issues?: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete -
Sortable: start event occurs without matching stop event preventing cursor style from changing back to default
A user reported that after trying to sort a table (that uses the sortable plugin) the cursor remained as the move cursor. When I repeated the issue I noticed that a start event occurred but not a stop event so the style tag that is added to the body wasn't removed. This code shows how the sortable is set up. Sorry I don't have a codepen or similar to show the issue. We are using jQuery v1.11.4. I tried the latest version but the issue persisted. Is there anything wrong with my setup or is this
I can't drag image to out area carousel of bootstrap.
I use carousel of bootstrap and drag of jquery ui, I can't drag element out area of carousel. Plz help me! Thanks Link below. https://tipskailler.com/retrict/
jQuery Datepicker use within google sheets
I am having trouble using the jQuery datepicker within google sheets. My goal is to use the datepicker to return a selected date within a cell and I am having issues returning the date selected in the prompt to a specified cell.
jQuery.fx is undefined
I'm trying to add jQuery UI to a project, but I get jQuery.fx is undefined in jquery-ui.js I downloaded all elements so everything should be in place. code: <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="/script/jqueryui/jquery-ui.js" type="text/javascript" crossorigin="anonymous"></script> any ideas? -------------- Just so we're clear - you need a hero?
jQuery UI Slider and WordPress
Hello, How does one integrate the jQuery UI range slider into a non-WooCommerce WordPress page so the rendered output can be filtered by custom post type meta_key? The meta_values associated to the meta_keys under consideration will always be real numbers (0-2 decimal places). Thank you very much for your replies, Don
Issue with tabs not displaying
I am using the following code (copied directly) and using my htm pages. The tabs do not display. <!DOCTYPE html> <html lang="en"> <head> <title id='Description'>TRANSPORTATION</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
autocomplete doesnt work in dynamic input field
i have an ajax request to take source autocomplete in dynamic field with add button but not working, pls correct my code, i dont understand.. var counter = 1; $("#addrow").on("click", function () { var newRow = $("<tr>"); var cols = ""; cols += '<td><input type="text" style="width: 200px;" id="item[' + counter + ']" name="item[' + counter + ']" placeholder="Item"></td>'; cols += '<td><input type="text" style="width: 100px;" id="harga[' + counter + ']" name="harga['
Icon trigger not displaying
I have the following code $( "#Date" ).datepicker({ numberOfMonths: 3,showButtonPanel: true, dateFormat: "yy-mm-dd", changeMonth:true, changeYear: true, showOn: "both", buttonimage:"calendar.gif", buttonImageOnly: true}); However, the trigger ICON does not display. The GIF is in the same folder as the HTML page.
Dialog not closing until AJAX success/error function completes
I am using a modal dialog to display a "please wait" spinner while I call an AJAX function to fetch some data. When the AJAX call completes I close the dialog. However if I throw an alert in the AJAX success or error handler after closing the spinner dialog, the alert displays while the spinner is still visible. I tried using the dialog close event handler, but the behavior is the same. It's looking like the spinner dialog isn't actually hidden until the AJAX success or error function completes.
Allow parent scrolling when using jquery ui .draggable()
Hi there! I have an annoying problem. I'm using jquery draggable on a set of divs and i'm restricting movement to the y-axis. My problem is that my parent div (using overflow-x:auto) cannot side scroll anymore. Do you have any ideas? Thanks. $(".openApp").draggable({axis:"y", drag: function(e, ui) { console.log(ui.position.top+" dd") if (ui.position.top > 0) { ui.position.top = 0
Next Page