Jquery sortable not giving current sorted positions
I am using jquery sortable lib. The problem I am having is that $(this).sortable('serialize') not giving the current item position after sorting it in UI. Can anyone look into this jsbin example and help me to figure out what is wrong? HTML <div class="wrapper"> <p id="foo_1"><div><span>foo</span>1000</div></p> <p id="foo_2"><div><span>foo</span>2000</div></p> <p id="foo_3"><div><span>foo</span>3000</div></p> <p id="foo_4"><div><span>foo</span>5000</div></p> </div JS $(function()
Jquery UI Drag and Drop Issue
Hello, I have issue with jquery drag and drop. While dragging one element, two dropable area selected that I need to prevent it. How can I prevent it?
How must I compare array field in jquery?
I have a jquery script as: <script type="text/javascript"> $(function () { $("#table").DataTable(); $( "#table_content" ).sortable({ items: "tr", cursor: 'move', opacity: 0.6, update: function() { sendOrderToServer(); } }); function sendOrderToServer() { var order_menu = []; $('tr.row1').each(function(index,element) {
jQuery UI Slider: generate knob onMouseDown and onMouseUp
I've been experimenting with that library and I really liked it. However, I've been searching through their documentation twice from top to bottom and haven't found the method that I need. Basically, at the start, all I have is an empty slider (div or input with CSS), without knobs on them. When I click on that element, I need to generate the min value knob and when I release the mouse click, I want to generate second knob (max value) on that slider/element. Yes, two knobs. Min value and max value.
Number of digits displayed in a slider's label suddenly changes
I would like to understand why, for the second slider but not the first, when the slider reaches the top the value displayed suddenly shows many digits after the decimal point instead of just showing tenths (which is what I want). Thanks for edifying me. <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/south-street/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
JQuery UI Slider Concept
I have an idea for a slider that maybe someone could help me with. I recently negotiated my salary for a new company and offer. They asked what do I want so I listed everything. Base salary Annual bonus Car Housing Food Transportation Stocks Mobile support Gym membership Education courses I want to make a slider of my ideal values for each item. And when the manager slides the base salary to a lower position then the others will adjust accordingly (higher value) so that I always end up with my ideal
Can't see jQuery icons at Chrome extension
I try to use datepicker jQuery at an Chrome extension. I succeed to use it exclude icons of jQuery. The icons my extension tries to take from site. For example from facebook.com if I open the extension with facebook. I tried to discribe the icons at the some places of the manifest and put them into some folders but not succed. What can I do?
jQuery UI Accordion not working
Hi, I have implemented an accordion effect in one of my wordpress post, and then it works fine when open in desktop and mobile browser. But when the post was shared in FB and open from FB Mobile Browser, the accordion effect actually not working. Basically no collapse, no effect, totally no working. Anyone having such issue?
Calendar date rolling back to 1930's
I am using a custom Jquery code for Jquery Calendar date picker. For some reason when a date is a and user user want to edit it, the date now shows 1930's. Say I first picked 10 Dec 2028, when I come back to pick it to edit, it now show 10 Dec 1928. Below is my code. Any help will be appreciated. var format = 'd M y'; // Jquery 'd M y' must match .net 'd MMM yy' date format function clear_form_elements(ele) { $(ele).find(':input').each(function () { switch (this.type) { case
Widgets Dialog : JQUERY UI LOAD CONTENT FROM URL (Javascript is not invoked in popup model)
Hello, I was able to load the external URL JSP page content into Div of parent page but Javascript functionality in popup is not working for any buttons. Below is the code to open popup and load the content . (function($){ var url = "Servlet path"; var tag = $("<div></div>"); tag.dialog({ autoOpen: false, height: 230, width: 550, modal: true, beforeClose: function(event, ui) { alert("beforeClose called"); } }); $.ajax({ type: "GET", url: "Servlet path", dataType:
Tab titles are not bottom aligned - what to look for?
I've got a page with horizontal tabs above various data. A screen shot shows the problem. I can provide the HTML, but unless someone has a trick for "exporting" all relevant CSS for a particular element, that would be tough to do. Thanks in advance for any suggestions. I had this problem a year ago and it was font-size related — changing the font size using Meta-+/- would eliminate it, but now it's back and it doesn't go away when changing the font size.
SHowing all menus when page loads
I've got this ( https://0422f88.netsolhost.com/ ) website menu coded. Every time each page loads all menu levels show. Is there something I can do to change this? I don't want any menus to show until the user hovers over the word in the main menu.
Accordion activate
Hello everybody, I have an accordion with three panels. In the third panel, I want a button to select the first panel. I tried those instructions : $("#accordion").activate(1); $("#accordion").activate($("#accordion").children[0]); $("#accordion").activate("Volet2"); Volet2 is the id of the div in the second panel. In each case the accordion stayed with panel 3 opened. I could get panel 1 from the browser console with $("#accordion").change(1); but because there was a syntax error, that resulted
Flyout child menu extends off-screen
I have a menu that pops off a toolbar button. One of the menu items has child items, resulting in a flyout. It's pretty long and extends off the screen (causes the scroll length to increase). I have position() on the parent menu object, but it's having no effect on the flyout. What I want is for the top of the flyout to be above the parent menu item such that the bottom of the flyout goes to the bottom of the page but not below. My HTML is identical to the sample on the Menu Widget page. Here is
How to make jquery autocomplete accept the pasted text.
Hi Team, I'd like the jquery auto complete widget to accept the pasted text apart from the selected text. The pasted text is part of the suggestions from a URL.
Issue with autocomplete scroll bar arrow's in IE
Hi, I am facing the issue with Jquery autocomplete scroll bar arrow's. I am using the Lazy loading to load the data in drop down. It is working fine when doing scroll by mouse scroll or keyboard keys. But I try to click on arrow's of scroll bar it will get back to the top. I am not able to go to the bottom of the scroll bar. Thanks Irfan
Jquery Sortable elements get “stuck” during sorting
Have a situation here, where I have to sort for dom elements where users can sort the items. In some cases when sorting when I try to drop it in the desired position it gets stuck like below. Below is the code that I am using for the sorting. Video recording of the issue. both "stop" & "beforeStop" are not triggered some times. $(sortableSelector).sortable({ placeholder: "sc-highlight", tolerance: "pointer", cursorAt: { top: 25, left: 25 }, connectWith: connectWithItem,
Function not being called on dialog open
I would like the function dialog_close() to be called when the dialog opens. The web page has two buttons, one to open the dialog and the other to close the dialog. These buttons are just for testing, for now. If you click the OPEN button the dialog opens but it never closes. If you then click the CLOSE button the dialog closes after a 3 second delay. If you then click the OPEN button again, the dialog opens again. But, clicking the CLOSE button again does not cause the dialog to close, and
Loading jQuery UI Slider All Selected Range (Not Only Min & Max) To an Array
Can you please take a look at this Demo and let me know how I can load the selected range values between Min and Max into an array? the selected.push(ui.values); is giving me the Min and Max of selected which is Ok but I also need the values between too $( function() { var selected =[]; $( "#slider-range" ).slider({ range: true, min: 133, max: 146, values: [ 133, 146 ], stop: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[
Jquery ui tabs doesn't display properly while the page is loading slow.
I am using a couple of libraries as below: <link type="text/css" rel="stylesheet" href="https://.../static/jquery-ui-1.8.23.custom.css"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css"> <script type="text/javascript" src="https://.../static/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="https://.../static/jquery-ui-1.8.23.custom.min.js"></script> I just upgrade jquery from 1.5.2 to 1.10.2 this
Jquery UI callback
I am simply trying to do a callback after my accordion has been created AND initialized.I have two tabs that get created. In each tab is an accordion that gets created. However my work can only be done on the accordions once the tabs and accordions are done initializing. I am getting a race condition where I am trying to change elements that are not initialized yet. Below I tried to add the "change" event to teh accordion, as I saw this elsewhere on the forum. But its not doing anything. So I assume
Changing on a specific day of the week a custom field
Hey I am trying to use ".show() - .hide()" on a specific field when I selecting a specific day of the week. I have tried a lot of codes lying on the net and without any success. Day 6 is working and disabling but whats inside "IF" is not working jQuery( "#pickup_date" ).datepicker({ beforeShowDay: function(d) { var day = d.getDay(); if( day != 5 ) { jQuery("p#pickup_time_field").hide(); jQuery("p#pickup_time_friday_field").show();
Building custom jquery-ui
Hi, Is there an instruction on how to build jquery-ui in a similar way to building custon jquery (https://github.com/jquery/jquery). When I am trying to run npm run build I am getting an error : pm ERR! missing script: build? There is build.js in subfolder: jquery-ui\build\tasks. Is there also a list of modules that can be excluded from a build to create smallerjquery-ui? Kind Regards, Janusz
Making textarea draggable in jquery UI
Just discovered jquery ui library which appears to offer everything I need to develop a web interface for a timetabling application. However it all hinges on being able to drag a textarea. For the moment I just wish to know if it is possible. It is then up to me to get investigating. Thanks
Sortable flicker when dragging portlets
Hi there I am using the portlets example from the JQuery sortable website. We have set the tolerance to "pointer" as below: $( ".column" ).sortable({ connectWith: ".column", handle: ".portlet-header", cancel: ".portlet-toggle", placeholder: "portlet-placeholder ui-corner-all", tolerance: "pointer" }); When dragging a widget over another widget which is off the top off the page, the widget and page flickers very fast. This issue happens in the Chrome browser (Version
jQuery UI Autocomplete: Showing dropdown wrapper when focus (or click) before AJAX
Hey, guys. My Autocomplete's almost complete. Now I want to show the dropdown wrapper when the input got focused (or clicked) in purpose of add a loader inside the wrapper before AJAX. I don't know how to do it. Could you help brother's out? Current code: https://paste.laravel.io/40eb3152-44cf-41de-a9d0-91e8ec3d00bd
jQuery UI Autocomplete: Broken dropdown result
You can see the image above the dropdown is like stacking strangely. How to tacke this problem? Code: https://paste.laravel.io/737bb1ac-609d-4e02-a603-fa34df069bc2 It appears jsfiddle does the same too: http://jsfiddle.net/xpvt214o/496569/
How to use a CSS class with the jQuery Bootstrap4 effect
So i'm using jquery effect to put a highlight in certain situations. It looks something like this $("#spanAdultCount").effect("highlight", { color: "#008000" }, 3000); I'd like to have the color used be from scss. I've tried replacing the {color:"#008000")} with function () { $(this).addClass("shannon") } and shannon looks like this .shannon{ color:pink} but that doesn't change the background color to pink, instead it changes the text to pink and it never goes away. with the hardcoding of color:#008000
Jquery drop drag not working for mobile responsive
Hello, I have used this jquery ui min for drop and drag it working on computer (on desktop system) but for mobile responsive is it not working for touch drop and drag.Any suggestion ,how could I overcome from this issue? Thanks Jyoti Shinde
jQuery autocomplete with python cgi as remote source
I am new to python. I don't know how to get the data from python CGI script for jQuery autocomplete. The cgi script generates json data. For example. [{"product": "isoleucyl-tRNA synthetase"} My html so far : $(document).ready(function() { $( "#tags" ).autocomplete({ source: "./search_term.cgi" select: function(event,ui) { var availableTags = ui.item.product; } }); } ); Any help would be much appreciated.
Jquery onclick event
I am using a jquery date picker, i want to display some data from database whenever i click on any date, so i am looking for some onclick event, so that i can call ajax and fetch my data from database, can anyone help me please, how to do it
Multiple droppables: How to detect the droppable, which did not accept the draggable?
I'm not familiar with jquery ui in depth and didn't find a solution for the following simple setting: I have a gallery with different kinds of waste and two trash cans, one for paper and one for 'bio'. When the user drags #waste_1 and drops it on #paper everything is ok, because .paper is accepted in #paper. In case that the user drags #waste_2 and drops it on #paper it should revert and #paper should shake. Revert works fine but I didn't find a way to detect the droppable when the waste is not accepted.
JQuery UI css and js file locations
I am new to using JQuery UI and I was wondering if the css and js could be stored in different folders or if they needed to be located in the same folder?
This drop and drag jaquery is applicable for iframe?
I have used this jquery where is video gallery contains both video and you tube video which are taken from iframe but it seems that video is working for drop and drag and iframe is not working? is there any solution for iframe drop and drag.
Flickering behaviour of ui sortable
I have a nested sortable list. No matter what i try, the sortables doesn't work correctly. None of the answers in jQuery forum regarding the issue helped me. When i try to sort second test parent into test child of first test parent the placeholder flickers (violently at times) and vice versa. I have searched for solution but couldn't find any. Tweaking css such as margin and padding may help was the only advice i got. But still no way. I am stuck since months. Here is the fiddle
jQ UI dialog problem on MS EDGE
gents, I have a problem with jQ UI on MS EDGE. I was able to isolate the problem to my repo here : https://github.com/rostacik/jquiedgeproblem I am using this - https://www.npmjs.com/package/http-server - nodejs based server to serve my files from the folder so git clone and running http-server will get you the same setup I use. repro steps : go to html/page.htm click on button "call iframed window" modal jQ UI dialog will appear click to the right (on the body) of the button - you should hit the
Enable draggable object after taphold
Hello jQuery-Community, I am using the jQuery UI Draggable Widget for objects inside a div with overflow. For enabling touch gestures I also included the jQuery UI Touch Punch hack. Instead of using the handle-option for enabling the Draggable Widget for a specific element, I want to be able to enable it for the whole object after an taphold event. So I could be able to either scroll the div by swiping up and down or drag the objects by a taphold. Is this possible? I know I can disable and enable
How to do “only one TABLE column” responsible for drag and drop? ( touch-punch )
How do I GET ONLY ONE COLUMN to be responsible for drag and drop? <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script> <script> $(document).ready(function () { $("#sortable").sortable(); $("#sortable").disableSelection(); }); </script> <table class="table table-hover
Auto response ui : Send additional Paramter
Dear sir/Madam refer http://prajaktasoftware.com/egram/testuseradd.php?id=36 The autocomplete working file. However I want to filter the result I have 2 filters Pls refer following form We have 2 filters 1. Filter 1 2. Filter 2 I want to send parameters selected in filter 1 and filter 2 for auto-search Code $(function() { $("#gp").autocomplete({ source: "gpautofill.php", minLength: 2, select: function(event, ui) { $('#gpid').val(ui.item.recid); }, //html: true, open: function(event, ui)
question about Regarding Datepicker ?
Hello, I am using datepicker, its having an issue on window phones 8. when I zoom in/ zoom out and scroll left/right the position of datepicker is not changed as required, its left top cordes not changed as per zoom out or zoom in. its stable where we open that first time or where the textbox situated. I have take a demo which is given by jqueryui.com, its also have the same problem. is it possible to make it window phone compatible. Thanks & Regards
Next Page