Autocomplet
Hi friends i have a autocomplete code but i need search button to get the value in tags I need a autocomplete code with ridirect button and i want to give the tags to individual hyperlink If you r an have the Code??? But I Dont't It is possible
datepicker("getDate") returns "null" in Chrome
If I have the following HTML code: <div><input type="date" name="someDate" id="someDate"/></div> and the following JQuery code: $("#someDate").datepicker(); $("#someDate").datepicker("setDate", new Date()); var output = $("#someDate").datepicker("getDate"); console.log(output); I will see "null" on the console in Chrome (IE and FF will show the actual date) But if I change the HTML code for this: <div type="date" name="someDate" id="someDate"></div> then it works in all. But what is the problem in
Add item to Sortable toArray
Hi, I have got the toArray to work but when I add a new item to the list with .prepend() the toArray returns a empty spot between the commas where the new item is. I've tried to: disable, destroy, refresh, refreshPositions and a lot more and it wont work and I'm not finding other people having the same problem either. Is there anyone out there who knows what I'm doing wrong? Thanks!
ScrollTop - Animate Function does not work in IE
I've got this function (throws an error): $(function () { function scrollToAnchor(aid) { var aTag = $("a[name='" + aid + "']"); $('html,body').animate({ scrollTop: aTag.offset().top }, 100); }I get this error: JavaScript runtime error: Unable to get property 'top' of undefined or null reference It seems to work in Chrome, though most of our users are directed to using IE. (errors in v9-11) I've searched and searched and nothing I've tried works. Anyone
Why is my JQuery UI slider not appearing?
Hi there I have been using a different slider plugin but it wasn't quite right and decided to switch to JQuery UI. However the slider does not appear at all. Here is my JS: $(window).load(function(){ $('#introModal').modal('show'); $("#result").html("187889"); $("#result2").html("193008"); $('#calculate').hide(); $('#calculate2').hide(); $("#investmentName").html("Example Grant Programme"); $("#investmentName2").html("Example Social Investment"); $('#nameyourprogramme').hide();
Showing +3 days from today by default and setting second dates on selection of first dates
Hello I have 4 date fields HTML <label>Departure Date:</label> <input name="dateFrom" type="text" class="imputdate" id="DepartureDate" value="dd-mm-yyyy" /> <label>Return Date:</label> <input name="dateTo" type="text" class="imputdate" id="ReturnDate" value="dd-mm-yyyy" /> <label>Check In Date:</label> <input name="dateFrom" type="text" class="imputdate" id="CheckIn" value="dd-mm-yyyy" /> <label>Check Out Date:</label> <input name="dateTo" type="text" class="imputdate" id="CheckOut" value="dd-mm-yyyy"
Destroy Event
I have some cleanup I want to do when a standard widget is destroyed. Extending the widget is overkill. So, my question is: Why is there a 'create' event but no corresponding 'destroy' event?
jquery tabs
i have an ajax loaded page on one of the tabs and it has reference to datatables.js and also current page which has the tabs has reference to same js. The datatables wont work if I havve this ajax loaded tab has reference to the datatables.js and it works if i remove this reference in the ajax loaded tab. Please suggest me what exactly is the problem and if possible a way to avoid it. Thanks In Advance !
How to load pre selected items of a jquery selectable
Hi I have recently created an application that uses a jquery selectable I have managed to store values that users have selected to a database.The problem i am now facing is if the user would like to change the values which they have selected they would open an edit page which should load the selectable with the values stored in the database.I am able to retrieve the values from the database i am not sure on how to get the values to be selected though Thanks
Why are my dialog close buttons disabled?
This is really perplexing. I'm opening a dialog upon return from an ajax() call, using the returned html as the container. I've done this before in another application with no problem. However, in this app, everything works OK with the popup, except that the close button is disabled, and I am not disabling it anywhere in my code. Here's the call to dialog (in coffeescript): $.fn.openDialog = -> container = $(this[0]) container.dialog autoOpen: true height: "auto" width: "700px"
How can I retrieve the "id=" parameter?
The following will retrieve the text in a table cell. $("td.room").click(function() { var room = $(this).text(); Instead of the text how can I retrieve the value associated with "id="? For example <td class="room" id="yyy">aaaaa</td> $(this).text(); will retrieve aaaaa I want to retrieve "yyy". Is there a better way to do what I want? When a cell is clicked I want a non displayed value passed back to the script.
ui-autocomplete select event not fired on mouse click
dear all, i am using JQuery UI v1.11.0 my autocomplete is working fine, except this case : when i click on a menu item, "select" event is never fired, unless i click exactly on the text within the item.. only then the item is clicked, and "select" is fired here is my code for creating autocomplete: function CreateAutoComplete(sourceArray, labelTextBox, idTextBox) {
$("#" + labelTextBox).autocomplete({ source: sourceArray,
open: function (event, ui) {
$(this).autocomplete("widget")
Problem with combobox in Internet Explorer11
I have a problem with the object combobox, the demo has the same problem, if you open http://jqueryui.com/autocomplete/#combobox on Internet Explorer 11. The steps to see the problem: 1.-open http://jqueryui.com/autocomplete/#combobox on internet Explorer 11 2.-Expand clicking the arrow of the combobox 3.-Now you can see the arrows and the scrollbar. If you move the scrollbar it runs ok, but if you click on top arrow or on the down arrow the items of the combobox disappear. This is my problem,
Paging on auto-complete options
Hi all We have a auto-complete text box where it has chance to show more than 10K options previously we are using Flexbox(http://www.fairwaytech.com/flexbox/flexbox-demos/) for it and decided to replace that with Jquery UI plugin which lookes more stylish. Is there any plugin for it? Any help on how to implement using Jquery?
Find the Id of div clicked
Here is the fiddle I want to find the id of div when save button is clicked which is in the dialog box.
How to use Datepicker together with Position?
I have some problems combining Datepicker and Position . I tried the following code and it didn't work at all. $('input[type="date"]') .datepicker() .datepicker('widget').position({ my: 'left bottom', at: 'left top' });
Dragging and Dropping multiple td at a single instance from one tr to another
Hello, Currently working on dragging and dropping of td in table using jquery ui. There are 3 columns and 3 rows in table. 1. In 1st case, In Last column if we drag any cell and drop it in same column it can be clone and drop in same column by creating new row and rowspan with other td in above tr 2. In 2nd case , If drag cell from 2nd column then it will drag that cell and right closest cell by cloning and drop by creating new row and rowspan with other td in above tr. 3. In 3rd case , If drag
datepicker shows calendar before date field has focus
Using these versions: //code.jquery.com/jquery-1.10.2.min.js jquery-ui-1.11.2.custom/jquery-ui.min.js When my form loads, I get a static calendar (clicking has no effect), and when I click in the date field, I get a usable calendar. after getting focus: My code is <input type =" text " name =" dateObs " id =" dateObs " class =" date-pick " value =" " /> $(document).ready(function() { $.datepicker.setDefaults( { showOn: "focus", dateFormat: "yy-mm-dd" }); $(".date-pick").datepicker(); }); Any idea
How to avoid duplicate clones in drag and drop
I am doing a simple project using Jquery UI. The program is similar to shopping cart where you drag items from one container/table list to another. I am almost there but I could not figure how to avoid duplicates on second container. For example, I dragged item A from left to right. I can dragged that item A and it makes clone forever on the second container. I just want one clone of item A in second container. If the user tries to drag item A to second container where clone of item A is already
problems with a switch case from a select in my ui dialog title
Hey, this is my code : http://jsfiddle.net/vc7wrsk9/1/ it isnt working in jfiddle, i downt know why. But the code is working on my system. Like i said, im using a drop down list ( select ) in my ui Dialog title. And when i try to connect the values from the select with a switch case , it does nothing. So, when i change the select from the 1st value to the 2nd in the title, it even doesnt trigger the alert i put in there. any idea ?
autocomplete with header give null reference when scrolling with mouse
I'm using an autocomplete with jquery 1.11.1 and ui of 1.11.2. In our autocomplete I have this code }). data ( 'ui-autocomplete' ). _renderItem = function ( ul , item ) { return $ ( '<li>' ) . data ( "item.autocomplete" , item ) . append ( "<a style='float:left; font-size:10px'><div class='divUIMultiColumn' style='width:100px'>" + item . firstname + "</div><div class='divUIMultiColumn' style='width:150px'>" + item . lastname + "</div>" + "<div class='divUIMultiColumn' style='width:50px'> " + item
JQuery UI Sortable to generate a live preview
Hi everybody - hope some you can help me out here :) I'm trying to archive the following: I have a list of items that I can order with .sortable(). I would then like to make the sorting order get reflected (without having to reload the page) in a preview area. I've gathered and array of the new sorting order, but I can't find a clever way to do this. My plan is to also have different events attached to the div elements which I'm afraid will get lost if I just store the jQuery objects in an array
Remote tabs using ajax - which page's CCS takes precedence?
This arguably is a CSS or Ajax question but I suspect most of the pratical implementation experience is here on this forum. I am loading web pages dynamically into tab panels and seeing very strange CSS behaviour. Does the CSS on the parent page control the rendering of the tab contents or the CSS which is loaded into the panel via $.load()? Thanks in advance!
I would like to use Jquery selectable on a mobile device
Hi I am currently busy on development of a mobile web application and would like to use Jquery Selectable in my application. I have tested the code on a mobile device the problem i am having is the drag and multiple select does not seem to work on mobile device please could you assist me in how i could get this to work on the mobile version or if there is a Jquery Mobile version of this Selectable feature http://jqueryui.com/selectable/#display-grid
moving from custom.catcomplete to autocomplete
I was using jquery 1.9 and decided to try putting in 1.11.2 for the smaller file size. With 1.9 I had a custom widget I found that looked like this $.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
dialog using a html span element
I have a main html index page arranged in several divs and spans. I use google charts to populate the spans and arrange them. The charts and data do load and look ok. On the click event of one of the charts, I populate one of the span elements and throw a dialog like the following. $.ajax({ type: "POST", async: false, url: "yyy_details102.cfm", data: "djobnamespec=" + specstr + "&status_var=" + num_stat + "&r=" + Math.random(), success: function(response) { $("#jlistdet").html(response); $("#jlistdet").dialog({
Accordion trigger function when previous panel has completed collapse
Hey all, I'm struggling with the jQuery accordion in a project I'm currently working on. I have image carousels embedded within each panel in multiple accordion instances. I only want to have one carousel active at a time obviously so I have chosen to activate the carousel inside a panel using beforeActivate which works correctly but I also need to deactivate the carousel when another panel is clicked and the collapse animation has completed. Can someone please advise me on how I may accomplish
Jquery DatePicker
I have three date variables that I am setting var startDate = (today.getMonth() + 1) + '/' + (today.getDate() + 5) + '/' + today.getFullYear(); var otherDate1 = (today.getMonth() + 1) + '/' + (today.getDate() + 7) + '/' + today.getFullYear(); var otherDate2 = (today.getMonth() + 1) + '/' + (today.getDate() + 10) + '/' + today.getFullYear(); The Start Date will be the Min date beforeShowDay: $.datepicker.noWeekends, minDate: startDate The Issue is I need to have the startDate to have a non weekend
Can't drag dynamically added DIV
I have a DIV with id: TEST that I can drag using jQuery UI. All works, but as soon as I remove it and load the DIV into the HTML dynamically (well to specify more: using SSE to load the DIV into the HTML), the DIV can't be dragged. This is because the jQuery is loaded before the DIV is. How to fix this? Since I use SSE, the DIV is loaded several times over a period of time and must stay draggable. The DIV looks like this in the TXT file (which is loaded into the HTML) <div id="TEST" class="chatmsg"
draggable images overlapping in a div
For a game with a twelve pictures drag 'n drop I want to set up the draggable images overlapping in a div at the left side of the window.. The script works fine except for the blue part. var posTop = 40; var posLeft= 30; for ( var i=0; i<12; i++ ) { $('<div>').html('<img src="'+pictureShuffled[i]+'"/ >').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( { left: posLeft, //and place it at the left side top: posTop, posTop
Ajax Accordion inside Ajax Tab
I have the ajax tabs that load an external file which has accordion ajax in it. How can I get it to load the content? It is just blank. If I remove this code: $subcontents.filter(':visible').each(function(index){ //get indices of expanded headers I can see the content, it just breaks the accordion.
jQuery-UI iconselectmenu Not Working
Hello, i'm trying to use the selector jquery from the website of jquery ui. I use the code but not work on my page. This is my code: <html> <head> <title>EXAMPLE</title> <script type="text/javascript" src=" //code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src=" //code.jquery.com/ui/1.11.2/jquery-ui.js"</script> <link rel="stylesheet" href="//jquery-ui.css" /> <script type="text/javascript"> $(function(){ $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
Repeat autocomplete usage locks up UI
Hello, I have an app that includes an autocomplete field. The autocomplete field is behaving oddly. The autocomplete field is initialized via the following code: HTML <form role="form"> <div class="form-group"> <button class="btn btn-default" onclick="return refreshData();">Refresh</button> </div> <div> <input id="autoCompleteField" type="search" class="form-control ui-autocomplete-input" autocomplete="off" spellcheck="false"
Drawing two resizable rectangle on image ?
I want to draw two resizable rectangle on an image to get its height and width . Currently i am able to draw single rectangle on image but when i try to draw second rectangle first one is erasing. Thanks for any help...
Render Blocking Javascript and CSS
Hello, I use the datepicker on a webpage. However, google's page speed insight tells me that I have render blocking javascript and css - and it is the code that makes the calendar work. Is there any way to fix this? If I could load the external files later in the page (before close body tag) that should make google happy but then the calendar doesn't work.
Why Jquery Sortable item Can not drag on empty list?
Why Can't i drag li item on empty list? Please look to following code; http://jsfiddle.net/008favda $("#tbl-excelSheet #td-container > #div-container ").sortable({ items: ".ul-activity> li", }).sortable("option", "connectWith", '#tbl-excelSheet .ul-activity').disableSelection();
UI Date picker opacity issue
I've isolated an issue that presents itself in Firefox where an inline style setting for opacity: 0 is being added when the date picker input is clicked. It appears to be related to the application of any animation to the click event. In the jquery-ui.js file, when I set the animation name to null in line 5866, the opacity value is not applied to the div named 'ui-datepicker-div'. I've tested all available animations and they behave the same way. Applicable to JQUI 1.11.2 using jQuery 1.11.2.
Items are not rendering in jquery ui autocomplete.
Hello, I am new to JQuery UI. I am trying to include the JQuery UI autocomplete field in my app. This field hits a remote data source. The markup for my autocomplete field looks like this: <input id="myAutocomplete" type="search" class="form-control input-sm ui-autocomplete-input" autocomplete="off" spellcheck="false" placeholder=""> I am initializing this auto complete field via the following JavaScript: $('#myAutocomplete').autocomplete({ minLength: 3, source: '/api/autosuggestions',
Can be we able to translate buttonText in DatePicker-French.js
Hi All, I'm trying the french translation for jquery ui date picker. Can we able translate the buttonText value where i need to translate the tooltip text to french text.? Changed in the DatePicker-French.js showMonthAfterYear: false, yearSuffix: '', buttonText: 'Calendrier', this is not working. could anyone provide suggestion to translate the buttonText Thanks in advance
jquery Accordion height
How do i adjust the height of the accordion to occupy the whole container or page ? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Default functionality</title> <link rel="stylesheet" href="libs/jquery-ui.min.css"> <script src="libs/jquery.js"></script> <script src="libs/jquery-ui.min.js"></script> <script> $(document).ready(function () { $("#accordion").accordion({ autoFill: true
Next Page