jquery-ui >= 1.11.0 together with jquery packaged library
I am using a library which uses jquery internally via npm and require ( https://github.com/create3000/cobweb ) . When I try to use jquery-ui independently but on the same page, I can only use jquery-ui up to 1.10.4: jquery-ui 1.10.4: https://rawgit.com/andreasplesch/Library/302b4644e663546b7a201eb9df79be5469ed6b17/Tests/uses_jquery.html 1.11.0 and later does not work any more: jquery-ui 1.12.1: https://rawgit.com/andreasplesch/Library/a8d614533f8935c4f501722531fc2816ea63eaa0/Tests/uses_jquery.html
How to apply datepicker to a dynamically created input field
// jQuery datepicker (function() { var d = new Date(); var maxD = new Date(d.setDate(d.getDate())); $('.datepick').datepicker({changeMonth: true,changeYear: true,yearRange: "-31:+10",dateFormat: "MM dd, yy"}); })(); // apply the datepick class to a dynamically create input field var cell = document.createElement("td"); var cellText = document.createElement('input'); cellText.type = 'text'; cellText.name = 'aDate[]'; // cellText.addClass = 'datepick'; $('.gdate').on('click', function() { $(this).datepicker('destroy').datepicker({changeMonth:
Tooltip appear until the element it's attachet to is in focus.
I know it's a kinda expected behavior, but in my conditions it should be changed. The tooltip is annoying users covering parts of UI they'd be interested to see and interract with. Is there any way to make tooltip appear only onhover and never onfocusin.
JQuery UI Menu with multiple div
Hello I have a requirement to show the Menu on the left and the content on right. For the Menu im using the JQuery UI. On the click of any particular list item it should show the content for that specific list item. How can this be done considering my .html as <div class="nav"> <ul id="menu"> <li id="link1"><a href="#">List1</a></li> <li id="link2"><a href="#">List2</a></li> <li id="link3"><a href="#">List3</a></li> </ul> </div> <div class="reportContent"> <div id="page1" class="content"> <div id="export1">
datepicker and a table
I can't get datepicker and a table to line up together as in: datepicker table I have tried just about everything e.g: <div class="input-group">
<div id="datepicker"> </div>
<table id="dayTable" class="table table-striped" style="display:inline-table;width:300px;height:500px;font-size:8pt">
<tbody>
<tr>
<td>
cvbb
</td>
</tr>
<tr>
<td>
ytr
</td>
</tr>
</tbody>
</table>
</div>
Problem styling a Joomla UI accordion on Joomla 2.5 page
I've successfully installed a jQuery UI accordion on a joomla 2.5 page. Using Chrome development tools I can style it but these settings are lost on page reset. Checking out the jquery-ui.css file shows it comes from a CDN "https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css". jQuery and jQuery UI were installed using the Joomla Easy Query extension. The versions are jQuery 1.10.2 and UI 1.10. I want to have the jQuery UI css file accessible from the server so my css
Finding distance between two elements
Hi, I'm at my wit's end now, though it's not jQuery issue I venture to post it here for thoughts. And here's the description. ... <table id="beforeG1"> ... </table> <table id="G1"> ... tons of elements etc. <tr> <td id="g11" onclick="findDepth();"></td> </tr> </table> function findDepth() { // find distance between G1 click to add g11 and the element before G1 /* there could be multiple SAME 'G1' id and multiple SAME 'g11' id */ // var node = document.getElementById('g11'), //g11[0], var node
How to make the datepicker display a german date format?
This seems to be a question nobody is ever asking but me: How can I get a date format like "25. Dezember 2016" instead of "25 Dezember 2016"? Right, the dot makes the difference. I use Quform, which offers already a bunch of date formats out of the box. The one I need isn't there. Is that a datepicker js affair? How? Where? What to do? Help urgently needed. Matthias
JQuery UI resizable grid, inconsistent behavior depending on grid value, jquery-ui version
I need a resizable bar that can go all the way to no bar. Depending on how what I set the grid to, sometimes I can, sometimes I can't. The values I try are multiples of the initial size of the bar. Here are examples Working: https://jsfiddle.net/dg851voo/ $("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({ handles: 'n', grid: [0, 60] }); Not working: https://jsfiddle.net/xmzj3x54/ $("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({ handles:
Selectmenu Jquery UI change event on pageload
I'm currently using JQuery UI SelectMenu Widget in my application. The options in the selectMenu are filled at runtime based on some values in sql tables. Based on the option selected in the selectedMenu a datatable needs to be filtered on a specific column. .Js snippet $(document).ready(function() { var table = $('.tableContent').DataTable({ "columnDefs" : [ { "className" : "dt-center", "targets" : "_all" } ] }); $("#osFamilySelect1").selectmenu({
$.datepicker.parseDate('ymmdd', '070126'); Missing number at position 6
I need to parse dates like '070126' to '26 Jan 2007'. You can do that with the datepicker, but it gives me the an error... $.datepicker.parseDate('ymmdd', '070126') #=> Missing number at position 6
What could result in the following jquery-3.2.1.min.js error?
jquery-3.2.1.min.js?_=1501353680880:2 Uncaught TypeError: $(...).on is not a function at HTMLDocument.<anonymous> (<anonymous>:3:25) at j (jquery-3.2.1.min.js?_=1501353680880:2) at k (jquery-3.2.1.min.js?_=1501353680880:2) Switch to jquery-1.8.0.min.js resulted in the same.
What are some of the jQuery UI functions/plugins we can't live without?
DatePicker is one. Feel free to add your pick below:
get the content of cells when selection by column (selectable)
Hello, my question is quite simple, but I can't manage to make it work properly I have a table and I want all cells of the table to be "selectable" by using the selectable plugin of jquery UI here below my table : <table id=\"selectable\">
<tr> <th class=\"ui-widget-content\"> A </th> <th class=\"ui-widget-content\"> B </th> <th class=\"ui-widget-content\"> C </th> </tr>
<tr> <td class=\"ui-widget-content\"> 1 </td> <td class=\"ui-widget-content\"> 2 </td> <td class=\"ui-widget-content\">
jquery-1.8.0.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecate ...
Hi, I'm using an old copy of jQuery (see subject line) and Chrome ver 59 does not like it (again see the subject line). But this version with its ui components such as ui.core, ui.widget, ui.position, ui.autocomplete as well as jquery-ui-1.8.23.custom.css are widely used in my production applications. Questions: (1) What's a newer and stable jQuery min that I can download and run off my local system? (2) Are these any newer and stable counterparts for these four ui components? Thanks.
datepicker setting minDate in multiple pairs of fields.
I have a page which uses multiple pairs of fields I'm trying to set the minimum value of the to field based on the selection in the from field. <div class="ranges" id="one "><input type="text" class="from"><input type="text" class="to"></div> <div class="ranges" id="two "><input type="text" class="from"><input type="text" class="to"></div> <div class="ranges" id="three"><input type="text" class="from"><input type="text" class="to"></div> <div class="ranges" id="four "><input type="text" class="from"><input
select on change not working for all selects
Here is all the code for the page. CSS, HTML and JQUERY. The last thing in jquery section is what isn't working properly. Any suggestions would be great. DIV.ui-datepicker {FONT-SIZE: 10px} div.week {DISPLAY: none} DIV.year {DISPLAY: none} DIV.quarter {DISPLAY: none} DIV.presets {DISPLAY: none} DIV.daily {DISPLAY: none} DIV#debug {POSITION: absolute; LEFT: 50px; TOP: 2px} DIV.ranges {BORDER: 3px ridge lightgrey; HEIGHT: 190px; WIDTH: 535px; TEXT-ALIGN: center;} DIV#one {POSITION: absolute; PADDING-BOTTOM:
How to resize the parent div together with the child collapsible div?
I have a parent div used to make my child panel resizable and draggable. Now I wanted to do the panel collapsible. But when it collapses the parent panel should disappear too ... but it is not working. You can see the demo I made here (please see, adding a panel and trying minimize): https://codepen.io/AlamBique/pen/LLqddr/?editors=1010 How to collapse the parent div together with the body-panel? And why the .panel-body (using height: 100%) extrapolates the height of the parent div?
having weird troubles with jQuery Autocomplete --
Hello friends. Let me describe what this is about and what i've done so far. As expected, I have a text box where the user would type in names of cities. And it is supposed to show an autosuggest/autocomplete prompt of city names that may match with the letters being typed. I have my server side code returning these city names. 1. my html is simple and such -- Search by City: <input type="text" placeholder="type city name here ..." id="reg_city" style="border-radius: 6px;color:
Datepicker change months and years options appears only hover
I am using the DatePicker JQuery UI. I need the functionality to change months and years, but the combos with the options are in trouble. You need to hover over the desired option so that your name appears. I do not understand why this happens. Can someone help me?
webshell
How do I use jQuery in a webshell please? Is there something I have to upload into the webshell with the file?
Change step in slider on some event
I have a select list which shows few options, depending on the select option I have different data retrieved so the slider steps are different. Can I change the steps eg. option1 has 5 records and my slider is 400 px then the step is 100 i.e. 0, 100, 200, 300, 400 option 2 has 7 records and my slider is same i.e. 400 px then the step is 66.67 i.e. 0, 66.67, 133.33, 200, 266.67, 333.33, 400 and so on, Can I change steps as I metioned and the slider can reflect this change. Thanks, Sadashiv.
max elements to show Autocomplete Widget
I was using autocomplete widget and i run a query with 6000 items and it was ok. But when I run a query with 6700 and more, the autocomplete doesn't work, someone can help me please!!! var availableTagsItems = [ <6700 items are here> ]; $('#txtInput').autocomplete( { source: availableTagsItems }); $('#txtInput').autocomplete("option", "minLength", 4); $('#txtInput').autocomplete("option", "position", { collision: "flipfit" }); Thanks!!!
What are these datepicker widget files for
I downloaded the datepicker widget (just the datepicker) from this site and i got all of these file and folders: However I got the datepicker working ok by just referring to two of them (query-ui.css and /jquery-ui.js) in the following: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="jquery/jquery-ui.css"> <script src="jquery/jquery-3.2.1.min.js"></script>
Return list of items from success: function
I want to return a list of values from success: function(data) but currently my Jquery is returning single values. I also need to get the values into an html horizontal <td></td> format. Below is my Jquery. Any help will be appreciated. select: function (event, ui) { debugger; $.ajax({ cache: false, async: false, type: "GET", url: "@(Url.Action("Product", "Parent"))", dataType: 'json',
Clear Autocomplete data when new item is searched
Hi, I am trying to use Autocomplete in SharePoint custom list. I have used the below code for the autocomplete functionality $(document).ready(function() { var titles = []; var autocomplete = $("input[title='Skill Required Field']").autocomplete({ minLength: 3, source: function(request, response) { $.ajax({ url: siteURL + "/_api/web/lists/getbytitle(\'MySkills\')/items?$select=Title&$filter=startswith(Title, '" + request.term + "')", cache: false,
Support for ARIA standards
Will this jquery datepicker support accessibility (as per the ARIA standards) for screen reading purpose ??
modifying the default tabs initialization to prevent the panel display on the first tab
When using the jQueryUI tabs, how can I prevent the default tab setting from opening the text panel when the page loads? so it only displays the text panel when the tab is selected.
appending a value from dialog box to body
I am having a problem of appending a value from the textbox in the dialog box to my html body. <div id="dialog-form"> <form> <label for="name">Name</label> <input type="text" name="name" id="txt2 codein" class="text ui-widget-content ui-corner-all" /> </form> </div> <p>Please are you <span id="addname"></span> setTimeout( function() { $( "#dialog-form" ).dialog({ modal: true, draggable: false, height: 300, width: 500, open: function () { $('body').addClass('stop-scrolling'); }, }); },4000); var keeptrying
Hide dialog
I need help. I create a dialog using: var newDiv = $(document.createElement('div')); newDiv.html('content'); var d = newDiv.dialog({ id: 1, title: 'New dialog' }); When i execute d.hide() only hide content dialog and not hide titlebar. How to hide the complete dialog?
Not Working Content() method of iframe
hello guys, https://api.jquery.com/contents/ on this page there is one example of contents() method. And there given the out put also. the example is Change the background colour of links inside of an iframe. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>contents demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe> <script> $( "#frameDemo" ).contents().find(
Jquery tagit not working for dynamic content.
Hi all, I am using tagit of jqueryui. Its working if I am using like this. var desigvalues =["Actor","Anchor","Dancer","Singer"]; jQuery('#singleFieldTags').tagit({ availableTags: desigvalues, singleField: true, singleFieldNode: jQuery('#mySingleField'), allowSpaces: true, placeholderText: "Type your designation!", autocomplete: {delay: 0, minLength:1} }); Same if I am making this dynamic its not working var desigvalues; jQuery.ajax({ type: 'POST', url: "/user/edit/getdesignationlist", data: "{}",
Saved Themeroller theme shows wrong values
I started using Themeroller to slightly tweak the base theme. From the Help I learned that I should bookmark the URL to save the theme. The problem is that after loading a bookmark, the widget demo on the right shows the correct theme, but the values on the left have their base values (or at least other values). Once you make a change and the view refreshes, it applies all the wrong values. This seems to be a problem only with recent saved URLs. So when you are in the middle of testing and modifying
Determining Direction Of Drag
I'm trying to determine the direction that an object is being dragged so that I can make a decision to do something based on the direction of the drag. The code below is what I have come across but it does not do what I'm looking for. $(".draggable").draggable({ start: function(event, ui) { startX = ui.position.left; startY = ui.position.top; }, stop: function(event, ui) { stopX = ui.position.left; stopY = ui.position.top; } }); I would like to know
Sorting items and posting extra variable to PHP
jQuery(document).ready(function(){ jQuery('.sort').sortable({ cursor: 'move', axis: 'y', update: function(e, ui) { href = ajaxpath2; jQuery(this).sortable("refresh"); sorted = jQuery(this).sortable("serialize", 'id'); jQuery.ajax({ type: 'POST', url: href, data: sorted, success: function(msg) { //do something with the sorted
Responsive containment with Draggable()
I'm using jQuery UI's Draggable (https://jqueryui.com/draggable/) to allow the user to drag a div around within a container. I'm using containment to set an invisible boundary box around the area so the user can't drag the div off the edge. Here's a codepen of the situation. Unless the browser window is full size the containment area doesn't match up anymore: https://codepen.io/anon/pen/QgaRRe I want the containment area to resize responsively as the browser window shrinks, any idea how I'd go about
I am having a problem with Range Slider
Please any one help, if i set the max value of silder to above 10000 then its again start from 1000, how can i set to 1 lac max
Non-modal dialog will not close in Internet Explorer after background page refresh
Hi, I'll try to explain our problem: - our web-app uses frames (it has been developed for quite a while) - in order to allow for overlay DIVs, which can escape their frames, we put an iFrame as top level element even quite a while ago. - now we are evaluating JQuery UI for dialogs rather than our own plain JavaScript developed dialogs, because they offer some nice functionality - on Internet Explorer 11 (tested only current version) we have the problem that non-modal dialogs don't close (neither
Same variable in multiple tabs
Hi everyone, I am using the tabs ui widget and have 6 tabs made. In my index.html, I have a variable that gets loaded with a particular value according to the tab that I am in. Whenever the user clicks on a particular tab, I first clear all fields to let the new values get populated. The problem I am having is that where I clear the field, it is having a problem or I am not specifying correctly where to clear the field. Here is a picture showing what is happening: The one I would like to clear
How to have jquery mobile css only affect one web page?
I made a page using jquery mobile css but I don't want the css to carry over to the next page. It messes up the next page until a manual refresh is done. I hope there's a way. Up until now I didn't think css from one page ever carried over into the next page. Learn something new every... so often.
Next Page