Click here to Skip to main content
15,886,676 members
Everything / jQuery-UI

Jquery UI

jQuery-UI

Great Reads

by Sander Rossel
The sixth in a series on web development.
by Jovan Popovic(MSFT)
Example showing how to persist positions of the sortable elements after drag&drop reordering using the JQuery UI sortable
by Puja Jagani
Spring Hibernate Integration along with JTable widget.
by Puja Jagani
Using jTable instead of drop-down list.

Latest Articles

by Evoluteur
A web color picker which looks like the one in Microsoft Office 2010
by Sem Shekhovtsov
Importing jQuery UI library into ES6 project
by Khaled Abdelhamid
ASP .NET app in C# that call Stack Exchange API and list set of Stack Questions based on some criteria.
by Bryian Tan
The author is sharing an article on how to create a help tooltip for a HTML element using Web API, Bootstrap Popover and jQuery UI dialog

All Articles

Sort by Score

jQuery-UI 

16 Mar 2015 by Sander Rossel
The sixth in a series on web development.
4 Aug 2016 by AnvilRanger
You are loading two different versions of jQuery and jQueryUI. You only need to load one of each.
20 Nov 2011 by Jovan Popovic(MSFT)
Example showing how to persist positions of the sortable elements after drag&drop reordering using the JQuery UI sortable
19 Jul 2016 by Puja Jagani
Spring Hibernate Integration along with JTable widget.
19 Jul 2016 by Puja Jagani
Using jTable instead of drop-down list.
27 Oct 2016 by luigidibiasi
This article describes yet another drag and drop approach that can be used when the jQuery-ui and touch-punch library fails (when the project uses transform-origin or other coordinate transformations)
28 Apr 2011 by Manfred Rudolf Bihy
The form's id attribute which is equal to form1 is not the same as the form id after being rendered to HTML. This is because the form as runAt="Server" attribute. Thus form1 is the name of the form on the server side i.e code behind. When the form get's rendered to HTML ASP.NET generates an id...
20 Feb 2014 by Sergey Alexandrovich Kryukov
It has nothing to do with a browser version.You probably forgot to include jQuery UI file. Please see: http://jqueryui.com/autocomplete[^]. —SA
6 Jun 2016 by Vikas Srivastava
Partial snapshot of a web page using HTML2canvas
17 Jan 2012 by nrgjack
you have to get the sortable plugin too, here you can download it : http://tablesorter.com/docs/#Downloadi usually use the ready method for the sortable plugin$(document).ready(function() { // Handler for .ready() called. $( "#sortable" ).tablesorter(); $( "#sortable"...
6 Oct 2012 by Zoltán Zörgő
I suppose you want local storage. This is a really good article: http://diveintohtml5.info/storage.html[^].Of course, you can store your data in xml also, but I doubt, that this could be a good idea. JSON representation looks more adequate - aside from some really special cases. But of...
24 Dec 2012 by Nick Fisher (Consultant)
From what I can see, there seems to be some sort of a conflict between the JQuery 'load' and the 'dialog' functions. Do you really need to be adding the dialog to the element every time this function is called? The following works in my browser.Javascript: // this var needs to...
14 Apr 2013 by Naz_Firdouse
check thishttp://stackoverflow.com/questions/3297174/jquery-any-item-selected-in-listbox[^]http://stackoverflow.com/questions/3113851/selecting-item-from-asp-net-listbox-using-jquery[^]Here is the code
7 Sep 2013 by Sergey Alexandrovich Kryukov
Please see CSS jQuery methods: http://api.jquery.com/category/css/[^].Most usually, such things are done using .addClass()/.removeClass, or, alternatively,...
3 Mar 2017 by ravijmca
I;m trying to use Jquery Model Dialog in MVC4 using Razor dialog box showing fine but AjaxOptions.OnSuccess javascript function is not calling after i click the update button but it's redirected to http://:3738/Cars/Edit/1?Length=4 i don;t know why it was happened.Here is my...
26 Apr 2014 by altaf008bd
This tip will describe a simple way to resolve "too much recursion" error when working with multiple modal dialogs
10 Aug 2014 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
I changed the code a little bit and now it is working.var start = $("#TextBox1").datepicker("getDate");var end = $("#TextBox2").datepicker("getDate");var days = (end - start) / (1000 * 60 * 60 * 24);Demo[Demo] Calculate Day Difference by jQuery Datepicker[^]
8 Nov 2015 by PANKAJMAURYA
You can try JQuery.each() functionvar $ac = jQuery.noConflict(); $ac(document).ready(function () { debugger; $ac.ajax({ url: '@Url.Action("GetAllCity", "Account")', type: "GET", success: function (data) { ...
8 Dec 2015 by Dave Kreskowiak
Is there a reliable method to determine if an image is blurry? No, it depends on the image and the intended subject and intended focusing.What if the image has a sharp foreground subject, takes up less than half the frame, and the background is intentionally heavily blurred?The...
25 Apr 2016 by F-ES Sitecore
Consult the documentation for the proper usage of minLenghAutocomplete Widget | jQuery UI API Documentation[^]
12 Jul 2016 by F-ES Sitecore
$(document).ready(function () { // id^=show means all ids that begin with show $("[id^=show]").each(function() { $(this).fadeIn(); });});
25 Jun 2023 by Sandeep Mewara
You can open window with params. Define them clearly as part of url: Write them without single-quotes and as expected (define them separate before making part of url): window.open("http://yourdomain.com//AllOrders/OrderDetails?billno="+billno...
11 Jul 2023 by Richard Deeming
Try reading your own code for a change: $('#PrintServer-select').change(function () { ... // Create the DataTable: var tableShows = $('#example').DataTable({ paging: false }); ... // Create the DataTable again: ...
11 Oct 2023 by Richard Deeming
Oh look: another day, another zero-effort "do my work for me" question from our resident help vampire. It's not like 30 seconds in Google would yield an exact example of what you're trying to do[^], is it? 🤦‍♂️ But why bother learning, or...
13 Jun 2011 by RakeshMeena
There is a similar post at JQuery forums. You might want to have a look at this.
18 Jun 2011 by Monjurul Habib
The following links will guide you how to use Jquery.Using jQuery with ASP.NET - A Beginner's GuideGetting started with jQuery and ASP.NETGetting Started with jQuery in Visual Studio 2008
10 Jul 2011 by Monjurul Habib
Make sure that you are using the following reference in the header and those scripts are loading properly using. You can ensure the script loading on firefox by enabling Net in firebug. Or you can catch any kind of script error using javascript debugger.Step1:
5 Sep 2011 by Sergey Alexandrovich Kryukov
Nothing can help you to present this relationship as hierarchical because it is not hierarchical.However, you can present any relationship graphically (it it is not too complex to fit on screen :-)). First, describe how you want to see it. I don't think JQuery will help you much. One...
8 Mar 2012 by aravindmunna
I want image Swiping Application,in which images must be loaded Dynamically from a selected source or drive etc.After Loading images ,all of them should be shown i any container swiping must be there,then if the user selects the particular image ,it should be zoomed out and there we have an...
12 May 2012 by Sandeep Mewara
When I re-read your question, I found you wrote "datagrid view" which is not there in ASP.NET. Either its DataGrid or GridView. In Winforms, we have DataGridView.So, I looked and found these:DataGrid View - jQuery EasyUI[^]DataTables plug-in for the jQuery Javascript library[^]jQuery...
23 May 2012 by Prasad_Kulkarni
Please refer:jQuery Form Validation[^]12 Useful jQuery Form Validation – Techniques and Tutorials[^]Basic jQuery Form Validation Example [^]jQuery Registration tooltips Form[^]Using jQuery for validations on a registration page[^]
23 May 2012 by Prasad_Kulkarni
Try this:function getAge(dateString) //pass your dob here{ var today = new Date(); var birthDate = new Date(dateString); var age = today.getFullYear() - birthDate.getFullYear(); var m = today.getMonth() - birthDate.getMonth(); if (m
18 Jun 2012 by Nilesh Patil Kolhapur
Hi,This is happen because of jquery conflict use only one latest Jquery file. in updated version all the function included from previous version.best LuckHappy Coding:)
20 Jun 2012 by Sandeep Mewara
Sounds like it is relative path issue. At times, after deployment or using Master-pages, the path referenced as a source for images, stylesheets, javascript files etc is not correctly formed. This leads to no file found at the location referred because of which images don't download or...
11 Jul 2012 by Prasad_Kulkarni
Combogrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. Combogrid provides keyboard navigation support for selecting an item. As the user types, it displays...
27 Aug 2012 by Sandeep Mewara
It looks like you missed the href property of your anchor tag. If you want to navigate a particular display value to somewhere, you need to define that too.
31 Aug 2012 by ModestMonk
I have a web service that updates a databound row, on success I want the row to highlight green then change back to its original color but I am having the most difficulty accomplishing the easiest part (the animate). Here is my javascript code, it works up until the animate part:
3 Sep 2012 by thatraja
Why do you want to write millions of lines instead of 100s of lines? jQuery[^] has many advantages over javascript. Main things are less code & Browser compatible. Advantages of jQuery[^]Alright now for your question, AFAIK there is no simple way to convert your code(jQuery to javascript)....
1 Oct 2012 by Kolli Hari Chowdary
Hi!In our HTML we're using a class called content to mark certain DIV tags. I want to change the colour of the DIVs according to the text inside of them. One thing I need to clarify is that these DIVs are populated dynamically in a random fashion.How can we change the color of these DIVs...
18 Oct 2012 by Sandeep Mewara
Start from here: A more elaborated jQuery Drag & Drop (with cloning)[^]Try and post specific issue if you face.
19 Oct 2012 by R. Ganesh Kumar IT
Hi,I am using jQuery UI controls in master page and also in content page.Hence I must import the CSS and Java script files in master page, hence the themes and java script becomes global.The theme of the two controls should be different.But the control in the master page uses the...
21 Oct 2012 by Sergey Alexandrovich Kryukov
Here is the issue: this HTML document is invalid. It is required that each id attribute value should be unique in the whole HTML document. For example, please see:http://www.w3schools.com/tags/att_global_id.asp[^].Even though it won't be a problem to find any nested element by some...
29 Oct 2012 by enhzflep
Hi, after a quick look at this page: http://www.jqplot.com/tests/line-charts.php[^] it seems that the graphs are drawn onto a canvas.If that's the case with your graph too, then I think you're possibly 1/2 of the way there. That is to say, if you get the canvas element, you can call...
28 Nov 2012 by Pro Idiot
This CP article did what you just asked for.Drag and Drop with Persistence using JQuery[^]
9 Dec 2012 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Hi @aravindnass,I have worked it out for you exactly like CodeProject.Take a look at the jsfiddle - Code Project Comment Box Replication.[^].Thanks,Tadit
27 Jul 2016 by Rockstar_
Hi friends, I am new to Jquery. I want to open a modal pop up window on click of a button. The Gridview will be filled by some data. if the gridview contains some data, then that data i want to display in modal pop up.If the gridview doesn't contains data, then I want to display a message...
7 Feb 2013 by mortenstarck
Hello. On my website I have two login action, the first is used then an user is pushing an button to login, which trigger an jQuery UI Dialog. The second is an normal view, which i use if an user isn't Authorized. But what i liked to do instead, is an user is not Authorized, it opens the Login...
19 Mar 2013 by Chandni Dave
download code for asp.net 3.5 yourselfdo modification accordingly.then to add download functionalitygo to default.aspx page under
24 Apr 2013 by Christoph Keller
Hi,This normally occures if you try to post a form in an IFrame and the result is JSON (mostly used in Ajax-fileuploads.The problem is (in the above mentioned scenario) that IE does not detect the JSON result as a text to display, so it assumes that you want to download it.To...
4 Jun 2013 by Palash Mondal_
You have not included the jQuery UI CSS file. Try this:
5 Jun 2013 by pramodachary
Hi,I think after using master page grid id may vary use complete clikent id like this $('#')
20 Jun 2013 by Rockstar_
Hi everyone, I'm beginer to Jquery, i have a requirement of creating a banner, that needs to be changed on every refresh. like i will have a collection of images in a application folder , i have to display them on home page on at a time, if i refresh the page then next image should...
27 Jun 2013 by _Amy
See a similar article : Open ( Show ) jQuery UI Dialog Popup Window from Server Side ( Code Behind ) in ASP.Net[^].--Amit
2 Jul 2013 by Ruwaldo
Got the answer to the question from a friend. Just use a timer to execute the function you want to execute when you select an option from the auto-select.$(".ui-autocomplete").attr("onmouseup", 'setTimeout(function(){load_engagements(current_sort,current_is_asc)},200);');
5 Jul 2013 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
It is done.Solution$('#timePicker').datetimepicker({ controlType: 'select', timeFormat: 'hh:mm ss'});Demo[Demo] jQuery TimePicker with Time elements in DropDowns[^]
5 Jul 2013 by Prasad Khandekar
Hello,Modify your printDiv code so that in the resulting popup window html the reference to css is also included. Currently you code only writes the html of the div in question.Regards,
8 Jul 2013 by Manuel john
There is no need of extensions and all follow this steps you will get it. this steps are in joomla3.0 .STEP 1 : take Menu Manager and take main menu. STEP 2 : in main menu take choose your own page (here am selecting services page.inthe place you can take any pages eg :...
1 Aug 2013 by Ashutosh Mahto
You can also write your code as - $(document).ready(function () { //hide all the panels on page load $(".panel").hide(); //on clicking the link, hide the div with panel class next to it $(".link_out").click(function () { ...
1 Aug 2013 by Jitendra Sabat
Use 'this' selector for selecting a particular current object.In your code you have used class as your selector.That's why all the div are opened and closed at a same time.As a class represents all those div present in your page.$(function () { $(".panel").hide(); ...
30 Oct 2013 by bjdestiny
First of all i would like to suggest you the User Manual[^] for Resource-Calender.NowResources :: Introduces available resources to calendar. Resource id links to Event objects resource property. Event objects resource can be also an array! This is a basic JSON-array which includes resource...
15 Nov 2013 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
ProblemJavaScript is Asynchronous.SolutionIn order to get the values, you have to call one CallBack function.So, modify your Code like below.$('#id').dialog({ autoOpen: false, width: 600, modal: true, buttons: { "Yes": function () { ...
16 Sep 2014 by Raymund Macaalay
Accept only the latest dropped Draggable in a Droppable interaction using jQuery UI
6 Dec 2013 by sankarsan parida
See you did one more mistake passing data in jquery method and use your commented path where it will access webmethod there.I have just copied your code tried it should like $("#btnStartChat").click(function () { //debugger; var U=...
25 Dec 2013 by Peter Leow
If you want regex for date format like 2013/12/25, try this(\d){4}(\/)([0][1-9]|[1][012])(\/)([0][1-9]|[12][1-9]|[3][01])To use this in your code say java, javascript, or c#, you will have to escape the '\' with '\'.
4 Jan 2014 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
First of all, very nicely explained. :)We have some sort of work like this in one of my previous projects and I found a Cross Browser way of handling this using window.postMessage. I have also written a Tip on that.See my Tip - Communication with Cross Domain IFrame - A Cross Browser...
10 Feb 2014 by Sumit_Pathak
i assume that u need it in gridview..so u can see these links Client Side Gridview Pagination using...
23 Feb 2014 by Sergey Alexandrovich Kryukov
Possible, but make no sense and would lead to confusing UI. It simply means your control should not be a text box. It should be a combo box.—SA
27 Feb 2014 by Member 3027893
I want the existing EnquireNow.cshtml View to be rendered on a JQuery-UI dialog on click of a link named 'Enquire Now' on my ProductDetails page.Following is the snapshot of the ProductDetailspage.$(function () { $('#dialogbox').dialog({ ...
12 Mar 2014 by Snesh Prajapati
1. You can show popup using jQueryUI. Visit below link:http://jqueryui.com/dialog/[^]2. If you do not want to use jQueryUI then you can use CSS. Visit below...
25 Mar 2014 by Akinmade Bond
Here's what you should do.Before your form submits, assuming you are using JQuery based on your tag.$('form').on('submit',function() { var pmail = $('#pmail').val().trim() var smail = $('#smail').val().trim() //Check if there are values in either textbox ...
27 Mar 2014 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
So many references!!! My eyes are rolling. :rolleyes:Refer - jQuery Datepicker[^].Click on "View Source" link. jQuery UI Datepicker - Default functionality
8 Apr 2014 by Er. Puneet Goel
Here is clear cut solution Masked Input[^]Here is manual js: This works on onblur: function formatPhone(obj) { var numbers = obj.value.replace(/\D/g, ''), char...
9 Apr 2014 by Gaurav Gupta A Tech Guy
dd/MM/yyyy format is not working in MVC 4 for Chrome Browser through model validation ?
11 Apr 2014 by Yogesh Kumar Tyagi
See This link :-http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html[^]
11 Apr 2014 by Yogesh Kumar Tyagi
Download "DataTables v1.9.4" From http://datatables.net/download/[^]Here many type of data table You can select any one.
27 Apr 2014 by Prasad Khandekar
Hello,As per your code it will only open the same image and that to the first one. If you want to open the specific image then wire the click handler in onclick of each a tag passing it the reference as this. If you do not want to do this way then please check the demo I have setup on...
5 Jun 2014 by Kaizad Karanjia
Hello everyone,I am developing project in phonegap,I want to add custom icon (which is in my project folder) in li attribute of ul(Unorder list).I tried,google it but get confused and didnt getting required output.Is there any steps to add custom icon ? If yes then tell me and any source...
8 Jul 2014 by Kornfeld Eliyahu Peter
It was hard to spot - but you should have it if you would use debug of the browser...You have no reference to jquery.js in your page!!! jquery-ui.js requeires jquery.js to work!!!My version of your sample code - works perfectly... Validating...
25 Sep 2014 by Member 10881628
jconfirm plugin when i use mouse it return actual value i.e true or false on pressing OK or Cancel button but when i use tab key and have focus on cancel and then press Enter key it actually treat it as OK now how to stop this.I have an idea to use keypress event for enter key but it is not user...
15 Nov 2014 by Manas Bhardwaj
Any effort? This has been done so many times before and internet is full of such examples.However, my first question would be if you are in control of the web service? If yes, I would rather remove the duplicate values on the web service method itself. It will give you an advantage that you...
22 Dec 2014 by Bheem Sen Singh
Probably you are intending to use jQuery ui tooltip instead of Bootstrap tooltip. Use these lines to revert Bootstrap override:// return $.fn.tooltip to previously assigned valuevar bootstrapTooltip = $.fn.tooltip.noConflict();// give $().bootstrapTooltip the Bootstrap...
2 Mar 2015 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
I think the below will do...$(ExpDateTxt).val('');Refer - .val()[^]
23 Apr 2015 by Member 11382971
What i understood from you post is you want to call one method which is WEBMETHOD i.e SubscriberSubmit().So my solution, try to use JQuery Ajax call. See following code. $.ajax( { type: "POST", url: "Index.aspx/Save", data:...
28 Jul 2015 by Suvendu Shekhar Giri
There are various ways to do this so, as suggested by @F_ES Sitecore, my suggestion is also to look for different solutions and pick that which best suits to your requirement.A simple way to do this can be like-var...
28 Aug 2015 by hypermellow
Hi,You should be able to close the dialog by referencing it by the 'this' keyword.i.e.:$(this).dialog('close');Can you try changing your dialog close function to use: $("#popupdiv").dialog({ title: 'Registration', width: 650, ...
7 Oct 2015 by Palash Mondal_
You can do this like// Your array of idsvar arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]// Loop through the array$.each(arr, function (i, val) { // Add class to the respective ids from array items $('#' + val).addClass('active');});Fiddle[^]
8 Nov 2015 by itsathere
public ActionResult GetAllCity() { CountryBL objbl = new CountryBL(); var model = new MyCustomerModel(); var itmlist = objbl.FetchCity(); model.CityList = itmlist.Select(x => { return new...
8 Nov 2015 by Patrice T
I fear you ask the question the wrong way.To assign large amount of data to array, it always involve a loop or many, hidden or explicit, not matter what, there is a loop.I think the loop is not the root of the problem. You should rather explain us what you do with more details, so we can...
25 Jan 2016 by F-ES Sitecore
Accordion | jQuery UI[^]
27 Feb 2016 by Zahid Amin Bhat
$(function() { $( "#datepicker" ).datepicker({ changeYear: true, minDate: '-3M', maxDate: new Date(), }); });Date:
25 Apr 2016 by Karthik_Mahalingam
Syntax error: min_length: minLength: 3refer: AutoComplete min length[^]
15 May 2016 by Karthik_Mahalingam
refer Dialog | jQuery UI[^] for the complete documentation and how to use it.To make the dialog function to work, you will have to add the dependency Javascript/jquery libraries to your code..the below code will work but you have to start learning the basics of HTML Tutorial[^]CSS...
16 May 2016 by F-ES Sitecore
You have two references to jquery UI so try deleting this oneEnsure you only have one reference to jQuery also.
12 Jul 2016 by Karthik_Mahalingam
try using Window setInterval() Method[^] to see the transition in real time ( load one after another ) .divclass { height: 100px; ...
18 Aug 2016 by Karthik_Mahalingam
try thisvar drp = "#drp"; var temp =[]; for (vari = 1; i
24 Aug 2016 by njammy
Use built in browser commands in javascript/jQuery:javascript - Make selected text bold/unbold - Stack Overflow[^]
5 Sep 2016 by Karthik_Mahalingam
use pageLoad() functionfunction pageLoad() { console.log('loaded'); var currentDate = new Date(); $("#txtStartDate, #txtEndDate").datetimepicker( { timeFormat: "hh:mm tt", hourMin: 8, ...