Collapse not even working on the demo, can't get it to work on site either.
I followed the documentation to use this but the collapsable = true not working in Chrome on Mac. High Sierra. If you look at the screen shot, the demo doesn't work either, at least for me. Is there any possible browser setting that might cause this or os it deprecated? Seems simple but ours also loads with the first section open. The page is private at the moment but https://jqueryui.com/accordion/#collapsible is loading with all open as well for us. I don't see anyone asking the same question.
Menu object will not instantiate
I have the following code: <script src="../js/jquery-ui.js"></script> <link rel="stylesheet" href="../css/jquery-ui.css"> <ul id="menu" style="display:none"> <li id="10"><b>Membership List<b></li> </ul> <script> var menu = $("#menu").menu(); </script> When the code hits line 5, I get the following error: Object doesn't support property or method 'menu'
Can't get page to use all space in tab div
I am loading a page into the div as follows: <div id="tabs-1" > <object type="text/html" data="membership.php" width="100%" height="10%" style="border:1px ridge blue"></object> </div> However. Even with 100% width and height it does not fill up totally
How to prevent jquery tab switch to tab 0 when button is clicked on asp.net page
I have a jquery tab control with 5 tabs. I also have an asp.net Listview with save, cancel and edit buttons This ListView is on Tab 2. The problem I am having is that when I click a button, for example the save button, the new data gets saved correctly but the tab switches to tab 0. I want it to stay on tab 2. Likewise when I click the edit or cancel buttons, the operation is performed correctly but again Tab 0 becomes active. I tried ptting OnClientClick="return false;" in my asp button declaration
Can't get TABS to work
Using demo from you page. Head section looks like this <head> <link rel="stylesheet" href="styles/jquery-ui.min.css"> <script src="js/jquery.js"></script> <script src="js/jquery-ui.min.js"></script> <script type="text/javascript" async> $(function() { $( "#tabs" ).tabs(); }); </script> </head> The paths are correct. I use this on all my pages. No matter what I keep getting a jquery error. I've used other JqueryUI widgets with no problem. In fact the DatePicker is on another page with
Separate styling for multiple dialog widgets on the same page.
Hello, So there must be something very fundamental I'm not getting here. Let's say I have two different modal dialogs on the same page. I know I can add styles to manipulate the defaults like: .ui-dialog .ui-dialog-buttonpane { text-align: center; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none!important; } .ui-dialog { left: 50% !important;
id number selector problem
hi, i have a problem using attribute start with selector on my jquery-ui dialog form, i have multiple id's with number as an differentiator id="dialog-form-1" id="dialog-form-20"then i used this selector $("[id^='dialog-form']") but why selector not working when the id number is a multiple of 10?
Datepicker Disable Day From Array Question
Hi there, I am trying to disable certain days based on a user's selection in another form. I understand you need to use beforeShowDay and for example date.getDay() !== [0] But how do I achieve this when more than one day can be selected from checkboxes? I have passed the values to an array, but seem to be having trouble disaplying this array in the beforeShowDay function: HTML <form> <div class="field"> <input class="input" id="disableDate" value="Date
From One Form To Another
Hi there, I am new to all this so please bear with me! I am hoping it is something obvious missing in the code. I am using 2 jquery date pickers in one page, and hoping so that when a date is selected in the first, it disables that selected date in the second calendar. Here's what I have: HTML: <form onSubmit="return UpdateDeliveryOptions()"> <input class="input" id="disableDate" value="Date to disable"> <input type="submit" class="button is-medium is-primary" value="Save"> </form> <div
jQuery UI: datepicker makes an error when inserting date
I have the following HTML: ... <tr id="tableRow"> <input id="p_Date" name="p.Date" data-key="0" type="text" /> </tr> <tr id="tableRow"> <input id="p_Date" name="p.Date" data-key="1" type="text" /> </tr> ... As you see the date elements have the same id and name... Now I run the following jQuery when the page is ready ($(document).ready) : $("#tableRow #p_Data").each(function (index, item) { $(item).datepicker({ dateFormat: "yy-mm-dd" });
Input drag and drop help
I'm trying to use drag and drop to drag an input field to another input field. The UI looks successful when I do this as I can see the dragged text but when I drop it, I don't see anything in the console where I have a line of code to verify the dropped text. I'm not sure what I am missing? $("input").droppable({ drop: function(event, ui) { console.log(ui.draggable.text()); } }); $("input").draggable();
phone mask
Hi, I'm struggling to add a "phone mask" in a html form using jquery-ui plugin like: (999) 999-9999 I will appreciate any feedback. Best Regards.
Menu: unable to select menu item using keyboard
I can move around in the menu, but trying to invoke a menu item using ENTER or SPACE does not work. Here is a fiddle that demonstrates it. https://jsfiddle.net/Basildane/2gmoztkL/ You can click on the link with a mouse and get the alert, but if you use the keyboard nothing happens.
JQuery Tabs and Text Input
Does anyone know how to replace the text element in the LI element of the tab part of this control with a text input box? Rather than display fixed text in the thumb tab, I want to have an input field.
Autocomplete
Hi there, i'm using autocomplete, for popolate an input with lastname if I create the json with only lastname all is ok. But really I would add matricula, name, lastname in my json. So my json will be {matricula:111, name:John, lastname:Doe} I can create the json array, but I can't figure how use this json on autocomplete. Thanks for your help
jqueryui modal popup box not stacking in front of other modals
I'm having problem getting jqueryui dialog boxes to open in front of other dialog boxes that are already opened. I recently upgraded our site to use jquery version v3.4.1and jqueryui version 1.12.1. Prior to this upgrade it was working fine, but now it is not. I use popup modals to display other html elements....then I also have links in that popup that open another popup box. Now if I click on a link inside a modal popup, the other one opens, but its hidden behind the modal popup that I just clicked
Drag and Drop the images on canvas using jqueryui
i have completed the dragging and dropping of buttons and nav bar and it is draggable after drop also and working properly, but now problem is now i want to drag and drop the image.i have tried many different things but unable to do this my Fiddle : http://jsfiddle.net/Yousuf_007/d6gowym5/
Content script can't see initialization spinner
Hey, I've been writing a content script to do some form filling. The website I am trying to do this on uses the jquery spinner widget for one of the values. Using the Chrome console and manually performing every command, all of this works fine. However, when I try to let the script run it I get this error: Uncaught Error: cannot call methods on spinner prior to initialization; attempted to call method 'value' at Function.error (jquery.js:253) at HTMLInputElement.<anonymous> (jquery-ui.min.js:6)
Add checkbox to option select
I am trying to append checkbox to an option selected value but can't seem to get it working. below is my code and sample output without the checkbox <style> body { padding: 15px; } .select-checkbox option::before { content: "\2610"; width: 1.3em; text-align: center; display: inline-block; } .select-checkbox option:checked::before { content: "\2611"; } <div class="col-md-6"> <div id="selectDescription">Select
New JQuery User - Help with Drag and Drop UI
Hi fellow programmers! I am new to Jquery (and new to this site so if i can do anything in future posts to make things easier, please let me know). I am working on homework so I am NOT expecting anyone to do anything for me - but am asking for some guidance and/or explanation on how to complete the bold font portion of the following: "Add jQuery code that responds to the click event of the Add Task button for the first employee. When this button is clicked, use the prompt method to get a description
Navigate away from tab warn about unsaved changes
Hi guys, I have a page with multiple tabs using the tabs from the JQueryUI. On each tab i have a form with multiple elements and a save button. What i need is to fire a warning whenever the user clicks on a different tab and the contents of the tab where the user was have changed. The structure is something like this: <div id="tabs"> <ul> <li id="t1"><a id="aTabMain" href="#tabs-1">Main</a></li> <li id="t2"><a id="aTabAreas" href="#tabs-2">Areas</a></li> <li id="t3"><a id="aTabImages"
How do i get multiple sortable list data to php in wordpress?
I have 2 lists, i am populating the first list with an array, and then dragging and dropping between the lists. i need to get the data from those lists, after someone moves something between them. I think im on the right track, i have plugin.php, admin.js, and my-ajax.php i need to somehow post data from admin.js to my-ajax.php I have this CSS <style> #sortable3, #sortable4 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding:
Adding Second Date Format to jQuery UI Date Picker is Not Working
I have to set the datepicker date format like dateFormat: "yy-mm-dd", and this is because I am getting data from database in this format. Now I want to display any changes of datepicker in this format 'DD, d MM, yy' what I did was onSelect: function(){ var formattedDate = $('#datepicker').datepicker({ dateFormat: 'DD, d MM, yy' }).val(); alert(formattedDate); } but the datepicker still returning the data in "yy-mm-dd" format can you please let me know how to fix this? Demo
Skip Disabled Dates and Select/ Set Next and Prev Enabled date in Set Date
Can you please take a look at This Demo have a UI datepicker which has only two days Wednsday and Saturday enabled now I need to set the selected value in datepicke not based on date but based on if the item is enabled or not. For example, on loading, instead of showing today as selected date, highlight the next available day and ... A- On load Set the First available enabled Cell (Not Today) as selected date B- On #next click set the date of datepicke to the First available (enabled cell/date)
How to have Sortable placeholder always in starting list while dragging outside any list
Let's suppose I have some lists connected with Sortable. I want to achieve this kind of behavior: when I'm moving an item, dragging it in an html region out of any of those lists, I want the placeholder always to be shown on starting list. Even if I dragged over another list (but not dropped). I'm asking this because, at the time, the placeholder is always placed inside the last dragged over list. Even if I release the drag outside of it. In that case the item should be returned to starting list.
Issues with Datepiccker and js files
I want to load the js files onto my server. Using your server is very slow. The following are required: <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> However, when downloading from JQUERYUI, jquery-1.12.1.js is not included. Using a previous version like 1.11.2 doesn't work. The CSS and jquery-ui files that came with the download
Setting Next Closest Day in jQueru UI Date Picker
Can you please take a look at this demo and let me know how I can select /set the next closest Wednesday if today is (Sunday, Monday, Tuesday, and Wednesday OR Saturday (if today is Thursday or Friday and Saturday) $( function() { $( "#datepicker" ).datepicker({ beforeShowDay: function(dt){ var day = dt.getDay(); return dt; } }); } );
move item with specific element drag and drop jquery
hello I have a list on the left and each item must move to that place i attached <a href='https://www.casimages.com/i/190819010728944231.jpg.html' title='Mon image'>example</a>
Datepicker how to change text colour
Can anyone help in the Datepicker Widget can you change the code that would make all the days and dates show in black and not red on Sat & Sun if so what is the code please. Rusty
jquery autocomplete make If focus on last item, down again, focus not move to first item
I need help how to autocomplete if the focus on last of the list item and me arrow keyboard down, and autocomplete have to not back to the first list item of autocomplete this my autocomplete on last item and i down again list focus back to first item i need help how to make this focus stop on top and bottom
Show dialog
I have href with id . I want to bring up a dialog box by first performing a series of procedures with the received id and creating my <div></div>. <a class="coupon_link" id = ''$my_test" href="#">Click here to get coupon</a> 1. Need to get id and have id perfom procedures. HOW get id ? PDO ... 3. The resulting PDO procedures result is passed to the my div. <div> <?echo "input type= 'number' class='tests_' id ='name_row' name ='name_row' value = '$my_ result'?> </div> 4. Transfer complited div
Load div in AJAX
Guys, I have page index.php where: $result = '999'; <button class ="btn_y" value="<?=$result?>">EDIT</button> I add AJAX query: <script> $(document).ready (function(){ $('.btn_y').click (function (){ var result= $(this).val(); $('#dialog-edit').dialog({ modal: false, open:function () { $.ajax(function(){ url:"edit_php", data:{ 'result' : result}, type:"post", sucess:function(msg){ $('#dialog-edit').html(msg)
Can not call methods
I have a select box with a choice of object. When you select an object, a table appears with a certain set of data. Below the table is the add button, which opens the dialog box. When you first select from the select box, everything is OK, the dialog box opens normally. buttons disappear, title, given window size. I use jquery-ui. I attach the code: <script type="text/javascript"> $(function () { $("#testdlg").dialog({ modal: true, autoOpen: false,
Multiple datepickers on page but require only one to have a vlaue
I have three datepickers on a form which work fine. But I want only one of them to require a date to be selected. When the non-required ones are left blank and the form is submitted they return a default date of 30-11-0001. Is it possible to return a null date (blank)?
restrict date range entered through keyboard
I am using jqueryUI's datepicker widget. It works well when restricting dates within minDate/maxDate range when picking date using mouse from the calendar. But I can still type in any date in the textbox. Is there any way to restrict the typed in date also according to the minDate/maxDate range?
css problem. datepicker input box border missing and calculate button missing fill-in image.
My datepicker works fine with my old css. but with my new css the little black lines that outline the date input box are not displayed and the calculate box is incomplete. Do you know how to make this right? http://kalamazooalanoclub.org/2019better.php *{ margin:0; padding:0; border:0; } #wrapper { width: 790px; margin: auto; margin-top: 12px; } #header { height: 140px; background-image: url(logo.jpg); } #menu { width: 200px; float: left; padding: 10px;
jquery-ui autocomplete
Hi, I am using MVC and asp.net core. I'm trying to display an autocomplete, retrieving an Employee Object (Employee Id, Last Name, First Name) from database and returning json. The dropdownlist is returning [ undefined ] - [ undefined ]. How can it return the right output? Thanks, tinac99 View <script type="text/javascript"> $(document).ready(function () { $("#RequestingEmployeeFName").autocomplete({ source: function (request, response) { $.ajax({ url: "/Employee/SearchEmployee", type: "GET", dataType:
selectmenu widget correct usage of destroy
Hello, i am currently tasked with investigating memory usage of a fairly large web application and so i have been using the Chrome developer tools to diagnose potential leaks in our javascript code. One potential issue i have observed appears to come from the use of the selectmenu widget. I have managed to reproduce the behaviour seen in a stripped down codepen: https://codepen.io/garycuthbert/pen/xNzdPZ If you 1. Run the code pen under chrome, open the chrome developer tools and take a heap snapshot
Dropdown menu not functioning correctly
Pls refer to the information below and advise thanks. JSP page External jquery version: 3.4.0 Jquery UI JS version: 1.12.1 Jquery UI CSS version: 1.12.1 Web Browser: Chrome After selecting a year from the dropdown menu, it does not appear in the box.There is no error in the console as well. However if I double click in the dropdown menu, the error below shows up in the console.
shortable element creating unwanted space when dragged
$('.sort-able').each(function () { $(this).sortable({ connectWith: '.sort-able ', cursor: "move", appendTo: "body", helper: "clone", start: function (event, ui) { $(ui.item).show(); clone = $(ui.item).clone(); before = $(ui.item).prev(); parent = $(ui.item).parent(); }, receive: function (event, ui) { //only when dropped from one to another! if (before.length) before.after(clone); else parent.prepend(clone); } }).disableSelection(); }); https://jsfiddle.net/tauhidurnirob/d26fvr18/2/ when I am
Next Page