Questions tagged [jquery-ui]
Discover an exceptional assortment of user interface interactions, captivating effects, dynamic widgets, and stylish themes meticulously designed with the jQuery JavaScript Library at its core.
In one of my projects, I am using jQuery UI autocomplete search to look for subjects. However, I have encountered a problem. You can find a replica of the search implementation in this js fiddle. The first search uses a single JSON array object without an ...
Using jQuery Mobile js <script src="~/Scripts/jquery-2.1.1.js"></script> <script src="~/Scripts/jquery-2.1.1.min.js"></script> <script src="~/Scripts/jquery.mobile-1.4.2.js"></script> <script src="~/Scripts/jquery.mo ...
Everything seems to be working almost perfectly, except for the fact that the number only updates in the second drop and not the first. Can someone point out where I might be going wrong? I'm attempting to update the "span.digit" when items are dragged an ...
Utilizing the jQuery autocomplete method within an Angular2 component, I have created a service to fetch data from an API. Below is a snippet of myComponent.ts: export class myComponent { private myVar; private binding1; private binding2; constructor( @In ...
Can a specific class be removed from the jQuery UI dialog? http://api.jqueryui.com/dialog/#option-dialogClass I'm curious if there is a way to remove a particular class from the dialog. Thank you. ...
When fetching the XML file for the search box, I would like to apply this css. It currently takes around 3 seconds to load the file. In the autocomplete.js file, I found these two functions: _search: function( value ) { this.term = this.element ...
For my current project, I need to implement a feature where the user can select a hotel, arrival date, and departure date. Upon selecting the hotel, I have to display the unavailable dates of the hotel in the jQuery datepicker as disabled. This is the Jav ...
My goal is to align an <li> element with the exact same position as the preceding <li> on the webpage. I am utilizing the jQuery function .position() for this purpose. Whenever a left swipe or drag action is detected on my <li> component ...
Currently, I am working on an application using ASP.Net MVC4, jquery 1.9, and CSS 2.1. However, I have encountered an issue with the horizontal menu display. Whenever a form with a jquery component is shown, some buttons seem to disappear behind the menu, ...
Seeking assistance with an issue following a jQuery upgrade. After updating jQuery to version 3.3.1 and jQuery-ui to 1.12.1, along with jquery-migrate-3.0.1.min.js inclusion, code that previously functioned now produces an error for which I'm struggl ...
Struggling with getting a sortable list to work using jQuery UI. The ul element is receiving the class 'ui-sortable' but nothing seems to be happening. To demonstrate this issue, I created an example since the original javascript code is quite complex and ...
I have encountered a dilemma while working on a large website that includes two conflicting jQuery plugins for autocomplete functionality. The first plugin is jquery.autocomplete.js (not part of jQuery UI) which defines the autocomplete function like this ...
Encountering an issue with the error message "unable to get property of renderItem". Jquery Code $("#term").autocomplete({ // minLength: 1, // require atleast 2 characters to use source: function (req, resp) { // retrieving JSON object from Sear ...
Currently, I am facing an issue with displaying a ninput and two spans containing jQuery UI icons in a jQuery UI dialog. The problem arises specifically when applying the ui-state-error to one of the spans. Interestingly, outside the dialog, the icons dis ...
After thorough research in various forums, I have not come across any relevant post addressing my specific issue. Therefore, I am reaching out for assistance. I currently have four Jquery Portlets on my page. My goal is to enable a zoom-in feature on o ...
The demonstration features two parent divs, each containing a child div! The first parent div's child div is draggable and resizable using JQueryUI. There are events for both dragEnd and resizeEnd associated with this div. The goal is to synchronize the l ...
I have implemented a jQuery UI Datepicker that restricts selection to only Sundays. However, I want to further enhance this by preventing users from selecting any dates in the future starting from today. Below is the current code snippet I am using for th ...
I have been struggling to prevent redundant loading of my local version of jQuery and jQuery UI due to the continuous Ajax pulls on the pages, which trigger a reload by jQuery each time. The specific jQuery files I am currently loading are: <script s ...
I am currently utilizing a jquery plugin that has rendered the following HTML layout in the browser: <html> <body> <div class="mce-container-body"> ... <input type="text" id="textedit01"> ... </di ...
I am currently working on a function that utilizes AJAX to submit data and then displays a dialog indicating whether the process was successful or not. Everything seems to be functioning smoothly, but I now want to add the capability of passing an addition ...
Struggling to integrate the jQuery UI SelectMenu, I keep encountering the same error in the browser console. Below is the HTML Code: <select name="files" id="files"> <optgroup label="Scripts"> <option value="jquery">jQuery.js</ ...
Currently, I have a functional autocomplete text box with the following code: $('#material_number').autocomplete({ source: function(request, response) { $.ajax({ url: "index.cfm?action=leadtime.getmaterialleadtime&returnfor ...
Currently, I am facing an issue with a search box that utilizes the jqueryUI .autocomplete feature to retrieve data through AJAX for providing suggestions. The problem arises when a user presses the enter key before the AJAX call to the source completes, r ...
I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': start, 'c ...
After looking at the JQueryUI demos, specifically this example, I am attempting to implement a feature where the sort functionality is disabled on the left list, and items from the left list are copied instead of moved. Is there a way to achieve this? If ...
Check out my JSFiddle example: http://jsfiddle.net/c62rsff3/ I'm attempting to implement snapping behavior between 2 elements using this code: $('.draggable-elements').draggable({ snap: true }); In addition, I've defined a container with a width and hei ...
At the bottom right corner of the jQuery Theme Roller website, you can find a preview of 'Highlight / Error' text. How can I effectively implement this feature in my own projects? I understand that I could simply copy and paste the surrounding code, but t ...
I have implemented a custom autocomplete combobox using the jQuery UI library to create text fields with dropdown functionality. This hybrid input allows users to either select an item from the dropdown or enter free text manually. However, I need to trigg ...
When the questions "question1" and "question2" are dragged into "questionslots," I want the "questionSlots" div to expand its size dynamically when the second question is dropped into it. This means that both questions should be accommodated and visible wi ...
Currently, I am in the process of developing a website with a captivating full-page video background. The nav menu gracefully slides out from the left side using jQuery UI when users scroll down to view the site's content. To view the work-in-progress sit ...
I have integrated jQuery UI Themes into one of my web applications. When applying button styling, I typically use the following jQuery code: $(".button").button(); In this case, .button represents the class associated with the button to be styled using ...
In the panel I have, I would like to include a search input field that allows users to type in a word. As soon as a match is found, that specific word will be highlighted within the panel while the other information disappears. ...
$(document).ready(function(){ var speed = 700; var pause = 3500; function removeFirstElement(){ $('ul#newsfeed li:first').hide('slide', {direction: "up"}, speed, function() {addLastElement(this);}); } ...
After installing jQuery and jQuery UI using npm, I tried to use require('jquery-ui/ui/widgets/selectable') in one of my own JavaScript modules. However, it resulted in the error message below: TypeError: base is not a constructor (widget.js:108) ...
I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...
Is there a way to customize the position of the datetimepicker, ensuring that it stays within the visual boundaries without getting cut off? I need help with this. ...
Creating a Dynamic Div Layout with JavaScript I have successfully implemented functionality wherein clicking on + opens a div and clicking on - closes it. However, I am now faced with the challenge of handling multiple divs at runtime. How can this be ach ...
Within my table, I am working with two unique columns. The first column is labeled "pick" and the second is labeled "drop". In the first column, I have several items that I can drag using jQuery UI draggable/droppable into the second column. My goal is to ...
While implementing JQueryUI's slide transition on an element with a CSS transform, I encountered an issue where the top half of the element gets hidden during the animation. Is there a way to tweak either my JQueryUI animation or CSS to avoid this pro ...
I'm currently working on an ASP.Net MVC website where I display booking information from a database query in a table. Each row includes an ActionLink to cancel the booking based on its unique BookingId. Here's an example of how it looks: My book ...
I am currently utilizing the jQuery UI Portlet and I am in need of the portlets being initialized as droppable. Currently, when the page loads, the portlets collapse by default. Appreciate your assistance. ...
My query is regarding an accordion feature that I have implemented. <div id="accordion" class="accord"> <h2> <a href="#">Item1</a></h2> <div> Content1 </div> <h2 > &l ...
A different question can be found at: How can I modify the UI datepicker after switching months? In contrast to Nick Craver's solution, I encountered a separate issue: While Nick Craver sourced his dates from the js variable xml, my dates are retrieved ...
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...
In my process, I utilize jQuery UI drag and drop functions to pick out images from an album. The images' ID is stored in the "rel" parameter, which I then need to transfer to an input element after dropping the image. Below is a list of images that c ...
Looking for assistance in creating an input field that auto-populates user-entered values with database entries. Only values that exist in the database should be accepted. Could someone explain the advantages of using jQuery-ui autocomplete for this task ...
I am currently struggling to align some text with ellipsis horizontally alongside a jquery button and I cannot seem to determine the reason for this issue. You can view my problem on jsfiddle: http://jsfiddle.net/5bVDu/ <span> <span id='hea ...
I am currently facing a challenge with my web app (http://www.tntech.edu/cafe-menu.php) which is being iframed into a mobile application developed by ATT. The button sizes vary on different phone models, and I am seeking a solution to make them responsiv ...
Can anyone assist me in modifying this function used to generate JQuery UI Tabs? I would like the last tab that is generated to be automatically set as the opened tab. Any help is greatly appreciated, as I am feeling quite confused at the moment. Thank y ...
I recently upgraded my website to use the latest versions of jQuery and jQuery UI, but I'm facing some unexpected issues with the Tabs widget. Previously, everything was working fine with jQuery 1.5.1 and jQuery UI 1.8.4. After upgrading to jQuery 1. ...
I am a beginner when it comes to MVC, jQuery, and jqGrid. I have been struggling for the past couple of days trying to figure out how to redirect to another page when the user clicks the add button. Additionally, I need to perform the same action when the ...
I am trying to dynamically give a date format using jQuery UI, but I am facing some issues. Here is my code: <table id="sample"> <tr> <td> Date </td> </tr> In my JavaScript file: $("#datepicker").datepicker ...
I am working on an HTML code where I need to make the colored divs draggable and fit them into specific table cells. The green div should occupy 2 cell spaces, light blue 3 cell spaces, yellow 4 cell spaces, and dark blue 5 cell spaces. While I have the d ...
My goal is to create a unique tab based alphabet set using the data of employees in a database. This means that it won't be a traditional A-Z set, but will instead dynamically generate tabs based on the employees' names in the database. <cffunction nam ...
Despite reading through several posts on the same topic, I am still perplexed as to why this particular code is not functioning correctly. My objective is to identify when the autocomplete feature returns zero results. Here's the snippet of code: $ ...
Struggling to solve a simple issue using jQuery UI's dialog function. The challenge lies in displaying custom explanations for search results within dialog boxes triggered by help links. Each result may have notations with corresponding help links tha ...
Can a draggable's stack procedure be activated by clicking instead of just dragging? I came across this solution, which essentially replicates the library code (with an important addition I included below). Is there a more elegant approach to achieve this ...
After using jquery-ui, I was able to create a simple dialog window. It looks like this: <div id="dialog-form" title="Add Attribute Category"> <input type="radio" id="priceable" name="price" value="true" checked="checked"/> Priceable &l ...
I have successfully implemented an auto-complete Textbox along with a styled div underneath it. When the client selects an item from the Textbox, it appears in the div after applying CSS styling. Now, I am looking to create an event where clicking on the s ...
$(document).ready(function () { $("#2").click(function () { $("#content").load("{% url 'about' %}"); }); $("#3").click(function () { $("#content").load("{% url 'pay' %}& ...
Can jQuery UI's sortable() be configured to sort rows based on their "containing" element only? I have a table with rowspanned cells that should only be sorted within their respective spanned columns. var $sortable = $('.nested-sortable tbody&ap ...
I am wondering what the optimal combination of jQuery version and jQuery UI version is for my project? ...
i need the unselection of list items to be as smooth as selectable() but without draggable() My desired outcome is similar to the following gif showcasing combined selectable and draggable functionality: https://i.stack.imgur.com/3GjTD.gif here's t ...
I'm curious about the impact of jquery.ui.all.css on Tabs As soon as I remove it, <link rel="stylesheet" href="jquery/dev/themes/base/jquery.ui.all.css"> My tabs stop functioning. Here's my query: What exactly does the jquery.ui.all.css styleshe ...
Utilizing jQuery UI 1.12.1 alongside jQuery 3.1.1, I have implemented a function to save the state of two tabs in localStorage under currentIdx: $("#tabs").tabs({ active: localStorage.getItem("currentIdx"), activate: function(event, ui) { localSto ...
http://jsfiddle.net/2H2rx/ Dealing with an issue retaining changes to the last item in a sortable list. $( "#sortable" ).sortable(); $( "#sortable" ).on("sortupdate",function( event, ui ) { var sorted = $( this ).sortable( "serialize"); conso ...
Hello there, I'm currently facing an issue with calculating the number of days from the present to a chosen date after utilizing a jQuery datepicker. It seems that the date formatting is getting altered upon selection, causing discrepancies in the ca ...
Currently, I am faced with a scenario where I need to implement a greybox popup window using jQuery Accordion from the main page via links. I am curious to know if it is doable to specify a default active panel for the accordion when calling it. Below is ...
Currently, I am tackling a challenging math problem related to adjusting the height selector input. Essentially, I have implemented a jQuery UI slider for choosing a height. It operates in inches and ranges from 0 to 120 (equivalent to 10 feet in height). ...
Hey there, I've encountered a little dilemma. I've developed a drag and drop list feature in my WordPress plugin that allows users to rearrange categories. For the most part, it's working smoothly... The table is being populated from a MySQL database: $r ...
When utilizing the _trigger function to initiate events, I often come across a recurring issue that I struggle to fully comprehend. The problem arises when there are multiple instances of my widget on the same page. In such cases, the most recently instan ...
How can I manually set $_GET variables to choose the date on the date picker? http://jqueryui.com/demos/datepicker/ (for example: http://www.example.com/?day=8&month=3&year=2022) Is this a possibility? Thank you ...
I am currently exploring the functionality of dragging and dropping an HTML link into a div element. My objective is to have the link open within that specific div element. The layout consists of two divisions named "left-panel" and "canvas". The concept ...
Check out this jSFiddle. I am attempting to add event handlers for resizing $('oWrapper_'+num). However, the resizing does not occur. This is because $('#oWrapper_'+num) has not been added to the dom at the time of execution, so the selector does not retu ...
I am currently working on customizing the appearance of specific dates within a jQuery UI datepicker. If a date is considered a holiday (meaning it matches a date in an array of specified holiday dates), I want to remove the default styling and make some m ...