jQuery Tabs, how to not submit hidden information
Quick question about using tabs. I have a form, and one of the fields allows a user to submit either a single date, a date range or choose multiple, non-consecutive dates. I'm using tabs to allow them to pick the option they want and then present them with the corresponding dialog. The problem I'm running in to is that when the form is submitted, all of the different date fields in the different tabs also get submitted. While I can take care of this on the server side, I was wondering if there is
Datepicker setDate selects weird date
Hello, I am trying to change the Date in a Datepicker field. $("#date").datepicker('setDate','01/26/2009');But Datepicker selects: 09/28/2015 ... I've already tried various date formats and even parseDate which wouldnt work at all?! Searching the web or the forum brought no results, some say you should use the Date Object, but in the doc there is a string to be used which i would prefer aswell. Please help, thanks in advance! rootyman
Two column wide portlets for sortable
Does anybody know how to create a two column wide portlet in a two column jQuery UI sortable setup? I need to be able to mix one column wide portlets with two column wide portlets. Currently if I add a two column wide portlet it floats on top of the 2nd column portlets and they do not move out of the way as desired. Any ideas?
Autocomplete value / label problem
When setting the value and label properties to different values (label: item.name, value: item.geonameId) the value displayed in the input box is the value property instead of the label property. This can be seen in the 1.8 rc2 Remote JSONP datasource example. Is this the correct behaviour?
.result is not a function error
Hello, I'm trying to implement jQuery UI autocompleter with Symfony and I keep getting this error: Uncaught TypeError: Object #<an Object> has no method 'result' (Google Chrome) Firefox error console shows "result is not a function" which I guess means exactly the same. Here is code autogenerated by Symfony which causes the error: <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#field_id") .autocomplete('/frontend_dev.php/module/ajax', jQuery.extend({}, { dataType: 'json',
UI Dialog - How to bind to elements after dialog is loaded?
I have a dialog that loads a page int to the dialog likes so(http://example.nemikor.com/creating-dialogs-on-demand/) but I want to be able to attach to elements in the page once it is loaded into the dialog and call handlers. This seems like an easy one but I can's seem to get the functionality to work. This is the page that loads into the dialog... team.php <!-- product options --> <div id='league1' class='team-options'> <div id='team-options'> <h3>Color Selection</h3> <div class='option-list'>
Problem using UI Dialog with IE8
I having a problem with jQueryUI dialog on IE8. What I'm finding is that scroll bars are added to the window because the overlay is too big. In addition this causes continuous resize events. The overlay size problem is because dialog calls $(document).width()/.height() to setup the size of the overlay but on IE8 the size is larger than is should be. In jquery width/height on the document returns the max of a number of things including documentElement clientWidth, scrollWidth and offsetWidth. For
How to load URL directly when a tab is selected?
I have a set of tabs where the href is the URL I would like to load when the tab is selected. Following the docs I added the following select option. $('#example').tabs({ select: function(event, ui) { var url = $.data(ui.tab, 'load.tabs'); if( url ) { location.href = url; return false; } return true; } });in a <script> tag in the top of each page (ASP.NET master page). The page loads, but the tab is never selected visually, i.e., the first tab is always selected even though say tab #3 content is
jQuery UI - can you drag all types of DOM elements?
My question is can you drag elements in the DOM other than a DIV. I can set divs to draggable and they work fine. I also was able to do it with a UL, and li. However if I throw a button on the page and set it to draggable it doesn't work....same for a text field. I am wondering if it is because the default behavior for a button is to submit, and that it is firing that event off instead of just allowing me to drag it around? I tried to do a preventDefault on the button to no avail. I am just wondering
Autocompleter in Table based Forms
When I place the Autocompleter in an Form that is build with an table, it breaks the layout when the search result is displayed. The Table Rows was expanded. How can I be sure that Table is fixed? Best Regards Johannes Geppert
jquery tabs with asp.net
Hi All, I am playing with jquery tabs using asp/c# .net. Now I have 3 tabs. each tab contains a button. When you click on the button it should display some text. So My problem is if i click on the 2nd tab button it is loading the first tab as a result of the postback. I want to see 2nd tab open if I click on the 2nd tab button, and I want 3rd tab open if i click on the 3rd tab button with its results. So in my .cs file I am using in my 2nd tab button click I am calling below method. private void
Drag and drop in box with overflow hidden
I'm trying to attempt the following: I have one list with draggables and another with sortables. I need the draggables to go to the sortable list, which works fine as long as both boxes are stretchable. Now, the draggables are in a fixed height list with an overflow hidden applied to it (because they will be a scrollable list) so when I drag the items to the sortable list they disappear under the bounding box of my draggable list. While this is expected behaviour, I would like to know if there is
The default theme switcher doesn't work anymore
The default theme switcher doesn't work anymore http://jqueryui.com/themeroller/themeswitchertool/ It seems to be the path /themeroller/... instead of http://jqueryui.com/themeroller/ in the javacsript who generates this problem thx for your help
jquery ui accordion: Can I only make a small part of the header clickable?
Hi, I am using an accordion to display a list of clients and all their information. It would be nice if I could not only display their names in the header, but also make those names editable straight from the header. Right now, the entire header is clickable and opens up the tab. I would like to have only the most left part with the icon clickable. The rest of the header should not be clickable so that I can put input fields in there. Is this possible? Thanks. ~Oscar
Tabs - Select\Show Event
While working with the Tab widget, ive encounter some problem i would like to address. I attached the Tab widget "select" event. One of my links on the page have a method that invoke the Tab "select" method. the problem is: If the tab is not selected the "select" event will be invoked. but if it is already selected it won't invoke the event. I think that when ever i use the method it should invoke the event. What do u think ?
Trying to figure out the reference on a dialog called with AJAX data.
Here's the code: $.ajax({ type: 'GET', url: url, dataType: 'json', success: function(data){ $(data.html).dialog({ autoOpen: false, title: 'Sign In', modal: true, dialogClass: 'login-form-dialog' }); $(this).dialog('open'); }, error: function (xhr, ajaxOptions, thrownError){ alert(xhr.statusText);
Problem with days and months starting with 0
I have a JSP page who fill the variable "disableDays" below with dates. var disDays = [<%= datasPermitidasDeReserva %>]; However, the dates returned by the JSP can look like this: 02/09/2010, 11/02/2009 ... I figured out that the UI Date Picker doesn't work for months and days that starts with 0. In other words, if the dates above were written like this: 2/9/2009 and 11/2/2009 then it would work. I'd like to know if there is something I can do directly into the Date Picker options so it can accept
remote autocomplete matching
I have a autocomplete form via url $(document).ready(function() { $("#location").autocomplete({"source":"result.php"}); }); The return json looks like this {"identifier":"name","items":[{"id":"5","name":"New York"}]}The problem I've got is that I don't see any results in the autocomlete form. I think I have to match the fields. But how do I do that ? Thanks
Autocomplete: Can I change source separator from comma?
Sorry if this is a dumb question but I'm still very new to this. I'm using an Autocomplete field and having a problem that I think is because some of the items on my source list have commas in them. I was wondering if there is a way to change the input separator from a comma to something else? Thanks for any help. Example of what I mean (it's not for addresses really)... $('.selector').autocomplete({ source: ["4 Somewhere Rd, Somewhere", "6 Elsewhere Avenue, Elsewhere"] });
datepicker object expected in IE
Hi, i got a problem with the datepicker ui. using it with firefox there are no problems at all. but in IE8 i get an error "object expected". im not really familiar with javascript so can't find a solution for this. here is my code in the html header: <script type="text/javascript"> $(function(){ $('.date').datepicker({ inline: true, dateFormat: 'dd.mm.yy' }); }); </script>the problem occurs after
Problem with multiple Dialog in a page
Hello all, Is there a way to simplify the use of multiple dialog in a page? I have a list of tags, and want to use a dialog to modify them. What's the best way to manage this? Thank you!! Benoit
Problem with Sortable plugin
Hi All, I'm Francesco i'm new here :)) I'have a problem with jquery sortable: I have 2 list(one with results <li> one empty) I want with icon click move an item to the other list, after click i want add an icon (delete icon) to delete the result in the future. <img src="resources/images/favorite_add.png" style="border:none" alt="fav" width="16" height="16" class="move" align="left" title="Add to Favorite" onclick="$('#<%=s%>').clone().append('<img src=\"resouces/images/aa.gif\"/>').appendTo('#sortable2')"/>
Sliding div
Hi , I want to have slidable div. Left navigation should have ability to toggle and main body should occupy the left navigation area. I am attaching the my samples code. Please help me. - Ganesh
Problem with Jquery UI draggable1.8rc2 under IE7. (work ok with 1.7.2)
I update JQUERY UI to 1.8 rC2 on the app i develop because I had a problem with draggable and IE8 when i used 1.7.2. It was reallt slow. It is really much better now. Thanks a lot :) ...but I find a new problem who occurs only on IE7 : On my app (see link below), the green button you can drag (criteria on this exemple) are dragging under the widgets. It was ok with 1.7.2 version. It only happens on IE7 (work fine on IE8). I used the z-index css style and to manage what composant is on top and it
Binding and unbinding mouseout while dragging.
I want to be doing something like this: $(".drag").draggable({ start: function(event, ui) { $('.clickme').unbind('mouseout'); }, stack: { group: 'products', min: 50 } , stop: function(event, ui) { $('.clickme').bind('mouseout'); } }); But it doesn't seem to be working. The unbind works fine but the bind on stop dragging doesn't work. I've tested the stop event with an alert and it is called an works - its just the mouseout event doesn't
How to style a radio button with jquery UI Theme
How do I style my existing radio buttons into the themed radio button? I'm really interested how anyone could know this. There's no hint at the demo page ThemeRoller demo page, even looking at the HTML source (http://jqueryui.com/themeroller/) There's no real indication at the main doco site (http://jqueryui.com/docs/Theming/API) The only clue I get from that, after reading the whole page is that maybe by just wrapping any div container with '.ui-widget' will do it. At the ThemeRoller site, the main
Caught event in $.widget - now what?
Sorry to post this really dumb question. I built myself a UI widget like so: $.widget( "myWidget", { _init: function() { this.element.bind( "resize", function() { ???????._myPrivateFunc(); } ); }, _myPrivateFun: function() { // do something } }); and instantiate like so var div= $("<div>").myWidget(); and later on fire a "resize" event like so div.trigger("resize"); Good news is: the code finds its way into my resize handler. Bad news is: I have
Editor in a dialog not working
Hi I want to build a little note editor using the dialog widget. I have coded the following but whilst it works in IE8 it doesn't work in FireFox 3.5.8. In FF, saves don't show up and, once you edit the text in the dialog, all new dialogs show that edited text. What am I doing wrong? Chris <html> <head> <title>Note editing</title> <!--- include jQuery ---> <link type="text/css" href="/jQuery/css/sunny/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> <script type="text/javascript" src="/jQuery/jquery-1.4.1.js"></script>
Highlighting the week selected in UI Datepicker
Hi guys, A client is using Datapicker and wants to " "In the monthly calendar can we have a red outline of the week selected." Is there a nice way for me to do this? My code is: <script type="text/javascript"> $(function() { $("#datepicker").datepicker({altField: '#datepicker_alt', altFormat: 'yy-mm-dd',onSelect: function(date){$("#selectDay").submit();} }); $('#tabs').tabs(); }); </script> Thanks in advance!
dialog default button?
On UI Dialog, you can specify the closeOnEscape option to get the windows default "cancel" behavior. How can I assign the default "submit" behavior to a button, so that the button click is fired when the Enter key is pressed?
Remember viewstate
I'm using the JQuery UI tabs that I found through this website. I'm using it in conjunction with an asp.net page and within each tab is a database grid view. Works great. Except for one thing. When I click on my edit/delete buttons for each row the page obviously auto post backs to the server and the JQuery tabs default back to the first one. How can I make the current tab be selected upon post back? Is this something that can be done with the tabs jquery or should i be asking on the asp.net forums?
resizable and size from input fields
Hello jquery UI guru! I used resizable in my UI for give my users options for resize the images, but I what to add additional control element. I add two input field, width and height, where users can entered sizes in px, but I can't fined any methods for integrate it with resizable. How it possible to do it? Thanks!
Beginner needs help w/ modal dialog displaying iframe
Hi, I'm a complete beginner in my JavaScript/jQuery skills. I'm trying to implement a modal dialog that display external content in an iframe but I want to set the iframe src and size dynamically. The prettyPhoto implementation is really appealing for someone like me because the href of the hyperlink determines the src and I simply determine if I want the link to open up in a modal dialog or not by adding a simple rel to the hyperlink. Nice and easy Can I use jQuery UI in the same fashion or do
[accordion] how ca i bring active to work
Hello Programmers! First, sorry for my bad english, i don't speak english very well. My problem is that the option active doesn't work for me. I've tried every options to activate or disable but i cant activate or open a accordion on default. the code: $(document).ready(function(){ jQuery('#navi').accordion({ header: '.navihead', alwaysOpen: false, autoHeight: false, navigation: true, collapsible: true }); }); $('#navi').accordion('option', 'active', '#navi2' ); html:
UI themes: Need tabs without any UI styling?
What is the best way to stop the UI themes from styling tabs where I do not want any theme styles? Besides using more CSS to override theme styles, is there another approach? Thanks! Micky
How can float widgets get swapped or sorted with each other just on a little contact from any direction without entirely overlapping each other?
Hello, I am A developer and i used yours Sortable plug-in. It was working fine. But My boss demanded to float the divs with different width and height and then apply ui.sortable to them. He also said me to make it like google when on just on the touch to other div border, sorting starts. But when i made the divs float with different sizes, and applied sortable on them. We noticed that we had to move any box all over the other box in order to sort them. Sometimes it becomes very difficult to sort
Select Tab thru text link
Hello, I'm using jquery-1.3.2.min.js and jquery-ui-1.7.2.custom.min.js in my tabs webpage. There are two things that I'm trying to do but is not working right. 1. I need to be able to put a text link inside the tabs to link to another tab inside the same group of tabs. For example: Tab1 <a href Tab3> | Tab2 | Tab3 <a href Tab 2> 2. I need to also be able to use a text link from another webpage to link to Tab2. How can I use text links for tabs? My Webpage: <!DOCTYPE html> <html> <head>
How to add a cross fade to UI tabs?
Hi all I have set up a tabbed interface using standard UI tab code. <script type="text/javascript"> $(function() { $("#tabbedArea").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 6000, 'true') }); </script> At the moment the tab that is one display fades out, leaving a white space before the next tab appears. What I would like to happen is as tab1 fades out, tab 2 fades in - creating a cross fade. Can anyone tell me how to achieve this? Thanks in advance
jQuery with asp.net, selecting selected item of RadioButtonList, plz help
I am using jquery with asp.net. In a user control there is a RadioButtonList (items in radio button list are set on design time). Requirment is to show selected value in alert when ever user select a radiobutton item. I m doing the folloiwng code but it is not working: <script type="text/javascript"> function pageLoad() { $("input[id$='rbtnYears']").change(SetValidator); } function SetValidator() { alert("validator");
jQuery UI Accordion navigationFilter option
The documentation for this option hasn't given me any leads on how to actually use it. Does anyone have an example of how to build the function that is used as the value for this option? Is there a demonstration of it in use anywhere?
Next Page