Setting Draggable on an element prevents blur from firing when you click the draggable element.
I have a span that I make draggable. I have some textboxes that blur is set on. When you click/move from one textbox to another the blur fires. When you click on the span, the blur does not fire. If I remove the draggable from the element, then the blur fires when changing focus from the textbox to the span. Any ideas how to get blur to fire when clicking on a draggable element? (The console.log lines are for FireFox's FireBug) <HTML> <HEAD> <TITLE>Blur/Click Workbench</TITLE> <script
Determine show/hide state
Hi, is there a way to determine whether an element is in its "show" state or "hide" state when using the toggle functionality? --
Icons in Jquery UI
I add new icons to the UI titlebar.This is an example .ui-dialog .ui- dialog-titlebar-newwin . How to call this icons to a specified dialog?I try this - #dialog .ui- dialog .ui-dialog-titlebar-newwin ,but it doesn't work.. Thanks :) --
Accordian: First element in the list triggering second element's pane.
http://www.brianpodell.com/ExpSite2/indexTEST2.html http://www.brianpodell.com/ExpSite2/indexTEST2.html So I've got my little page built. It's relatively simple, though the code gets rather complex. A vertical scroll, that has horizontal scrolling pages contained within one of it's elements. That part works fine. I implemented an accordion as the nav element, and only one item in the list has an accordion pane to it. It worked fine, until I added a page and list element before that one, which now
How to check if selected tab is remote?
Hi All, Am tinkering with tabs, and I want to know how I can check to see if the currently selected tab is a "remote" tab or not. For example, I have code like this: var $tabs = $('.ui-tabs').tabs(); var selected = $tabs.tabs('option', 'selected'); $tabs.tabs('load', selected); But not all my tabs are remote tabs... some have static content and thus "load" is meangingless. Instead I need to reload the current window for "static" tabs, but use "load" for ajax tabs. So, my question is: how do I check
Sortable and Selectable
Hi All, Have tried to find an example of this, and played around a bit but got no where. I want to have 2 sortable lists (just like in the demo http://jqueryui.com/demos/sortable/#connect-lists) However I also want to be able to select multiple items and then drag them all from one list to another (and still have them sortable). has anyone got any idea how to do it, it feels a bit like the holy grail as a lot of people are looking for it. --
Another issue with Sortable and .live events in IE
I'm getting this incorrect behavior in IE8: After sorting the TRs below, the live events on the buttons will be ignored on the very first click. After that all start working again. Can anyone try this and maybe give some suggestions? The problem is only on IE (I tried IE8). (see live sample at http://sergiopereira.com/temp/sortable/jq-ui-sortable.html) <script> $( function() { $('.sortableRows').sortable(); $('.otherButton').live('click', function(){alert('live clicked');}); $('.otherButton').click(function(){alert('normal
Adding and removing between connected lists
Greetings! I'm somewhat of a jquery noob, so please be kind . . . I have a page where a user can drag options into a box and order them as they see fit. It's NDA for a client, unfortunately, but it's more or less built exactly on the code stickman posted at: http://the-stickman.com/files/jquery/draggable-sortable.html Which is great, but what if I want the user to be able to REMOVE an item from the box, just drag it out into the ether and have it disappear? It can still be dragged in from the initial
Scrolling issue
Hi, I have a number of draggables and droppables in a window with the "overflow: auto" style. How can I make the window scroll down if I want to drag something to a droppable which is outside the viewport? Regards, Edwin --
Table sorter plugin not properly sorting Distance column (ie: 17 Miles)
I'm using the tableshorter plugin on a table which lists multiple locations, and that contains a "Distance" column which displays distances in the format of "17 Miles" and "5 miles", etc. I have the following javascript in my head section, which defines the sort order of the 1 column that I want to have sortable (and that specifies which columns I do not want to make sortable): <script type="text/javascript"> $(document).ready(function() { $("#locationsTable").tablesorter(
binding to tab show events per tab on the tab ui plugin
I'm trying to work with the tabs plugin to be able to link to the specific tabs on the page. I know I can do url.php#someid, but my tabs have onclick events right now that load the page content. What I was trying to do was find a way to move from onclick to tabsshow events bound. My hope was that when the page was loaded via the #someid url that it would fire the event. Looking at the docs and testing around a bit, the tabsshow seems to be an event on the tab grouping vs the individual tabs. Am I
Dialog div inside script
I have a problem where I try to make a self contained script that will show a dialog using jQuery UI dialog. Problem is, if I create the div programatically (inside the script) the dialog never shows. Here is the sample code I've got so far: function showDialog(){ var theDiv = jQuery("<div id='DialogDiv' class='DialogDiv'>Hi there</div>").appendTo("body"); var dialogOptions = { autoOpen: false, buttons: { "Ok": function(){ alert("hi");} }, height: 300, modal: true, title: "Properties" } var theDialog
How to get associate the enter key with the jquery ok button
I am using jquery ui dialog. On click of enter i want to fire the ok click. How do I acheive this? Please Help!!! --
Accordion Loading All Open and Flashing Closed
When the accordion first loads all of the menus are *open* and then closed quickly causing a flash and the page resizes given that I have dynamic sizing turned on. Certainly if the menu I'm working with or the hosting company was faster, the effect would be less noticeable. Wondering if there are any ways around this. I'm using JQuery 1.3.2 with UI 1.7.2 and have tested Firefox 3.5.5 and IE8. Here's a snippet from my page: <script type="text/javascript">$(function() { $("#menu").accordion ({ event:
NestedSortable issue.
Hello all, I am using NestedSortable plugin of jquery. I want to use my own serializeRegExp in it, but I am failing to do it. So please I want help for it about the syntax and how to use serializeRegExp parameter in NestedSortable. I am trying as following, but unfortunately, it is not working for me. jQuery(function($) { $('#LISTID').NestedSortable( { accept: 'page-item1', noNestingClass: "no-nesting", opacity: 0.8, helperclass: 'helper', onChange: function(serialized)
New Pagination Plugin - SimplePager
I recently had the need for jQuery pagination functionality. Unfortunately, I could not find any pagination plugins that conformed to the UI theme... so I wrote my own. Its design is simple, just the necessary buttons (first,previous,next,last), and an input field to display the current page. The input field can be used to change the current page as well. Plugin repo page: http://plugins.jquery.com/project/ThemeReadySimplePager Project Page: http://code.google.com/p/jquery-simplepager Documentation/Examples:
grabbing ajax results after clicking submit button
Hi: I have a ajax calling within a function that is called when user clicks the submit button. For some reason the action corresponding to submit button completes before the ajax call inside. Below is the code. When I click the Submit button on the page. The first alert shows "CustList is " (an empty cust list). Then it starts item inside the each function (Current Shortname is a1, Current Shortname a2 etc). Any reason why the execution doesn't go in the order I have coded? $('#newRSubmit').bind('click',
Is there a reason dialog() doesn't have a HTML constructor?
Hey- I was just curious if there was a reason this isn't possible: $.dialog("some html for a message", {autoOpen: true}); which would stick the HTML into the DOM and then open it in a dialog, passing any additional parameters to the $().dialog()? -Thanks Ashish --
Closing an open tab on a row when multiple rows are used
Hi, I did search the group regarding using multiple rows of tabs, and the point about it being a bad usability design. That said, how, if I wanted to use multiple rows, would I have, for example an open tab on the first row, close if a tab is opened on the second row, and of course the opposite? Is there an example of this with code I could apply? I'm not a jquery developer, so any help is appreciated. Thanks, Doug --
problem with .ajax POST and quotes
Hi all, Problem with .ajax with type = POST error: missing ) after argument list $output .= "<div style='width:150px;' ><a href=\"javascript:choice1 ($id,"; $output .= "'" . $name . "'"; $output .= ")\">"; same error with $output .= "<div style='width:150px;' ><a href=\"javascript:choice1 ($id,"; $output .= "\"" . $name . "\""; $output .= ")\">"; no error but display choice1(99, instead of choice1(99,"10") $output .= "<div style='width:150px;' ><a href='javascript:choice1 ($id,"; $output .= "'" .
Date Picker in Dialog Modal
I want to include the date picker inside of a dialog ui tool.... I am assuming the z-index will be a factor. Has anyone successfully implemented this? --
Datepicker - populate text field with date from database
I am using the datepicker in a Rails application and it works fine to create a record. Is there a way to have the datepicker text box populate with the saved value pulled from the database? I can easily retrieve and format the date correctly... just can't get it in the box. Thanks, Sunny --
JQuery UI Accordion History
Hi guys I am working on the following site http://www.paulbraham.com/test_site/ and am having a few troubles with my JQuery Accordion. Basically, I have turned on Navigation, and inserted three anchors, #1, #2 and #3 for the three sections that exist. Now in theory, i could go to index.html#2 and it would load with section 2 open. This is not happening, and I cannot work out what is wrong with my code. If it helps, I found this tutorial, that shows it working perfectly, I just can't work out what
Get an Attr of a Droppable and a Draggable
Hi everyone ! Here is my problem : I have 2 div : <div id="draggable" info="test drag"> </div> <div id="droppable" info="test drop"> </div> I want to get the "info" attribut of "draggable" AND "droppable" when I drop "draggable" on "droppable". Here is my code : $("#droppable").droppable({ drop: function() { alert('info droppable = ' + $(this).attr("info")) } }); [ this code make an alert with "info droppable = test drop" wich is good.] With that, I manage to get the "info"
assigning results of $.post to a variable
Hi, I'm trying to put the result of a $.post request into a variable. I've tried a few different ways, and none seem to work. I've tried working with the xmlhttprequest object that $.post returns: function mytest() { var mydate = new XMLHttpRequest(); mydate = $.post("/calendar/calendarajax.php", {mycommand: "geteventdates", month: ym}, function(data){ assigndays(data); }, "text"); alert("mydate is " + mydate.responseText); //all that assigndays does is alert(data)
Convert javascript function to jquery
Dear Group Members, I am a beginner of jquery. And I would like to ask for help to convert from javascript function to jquery by the code below (my problems is checkbox array): function returnDelete() { $check = 0; with (document.standardView) { for (var i=0; i < elements.length; i++) { if ((elements[i].type == 'checkbox') && (elements[i].checked == true)){ $check = 1; } } } if ( $check ==
maxlength on DatePicker
Using maxlength on a datepicker's input tag doesn't seem to do anything. You can still type an unlimited number of numbers into the field after selecting a date. --
differences in CSS : development-bundle ui.all.css vs jquery-ui-1.7.2.custom.css
While making a themeswitcher, I encountered weird problems with the development bundle. By including ui.all.css I was hoping to make a generic solution by using the directory name, but: - resizable styling was weird: the resize icon was on the lower left of the div and not on the lower right. - Dialog: alignment of the header was weird: the close button was below the headertext, and the header itself was a couple of pixels wider then its parent container: ui-corner-all looked weird. Same happened
Datepicker showing 2 November 1st
When using the datepicker, it has November 1st for the Sunday and Monday in November therefore my dates are getting off by 1 day. Anybody else with this issue? --
plugin development - documentation/example question
I've recently created a new plugin for jQuery that utilizes the themes. I will be submitting this plugin soon, but I need to get some documentation and examples on my site. In creating the documentation and examples, how can I make them portable to where they could be easily transferred to the main UI documentation if they were accepted? I was thinking of making it similar to the documentation provided in the dev bundle where there is a certain class structure (UIAPIPlugin- toc,UIAPIPlugin), but
jquery UI tabs and dialog modal confirmation issue
Hi, I have this issue I've been trying to solve but i cannot find an easy solution to it yet. I'm using jQuery tabs and jquery dialog. In my web application i have a couple of tabs with forms on them. Right now if the user does not fill all the required fields it shows a pop up (dialog- modal confirmation). But here the problem starts: when i click on the next tab ofcourse it shows the pop up but it goes to the next tab and it does not wait on the confirmation. Well with tabs event 'select' you can
Target specific DIV when adding tab
Hello, I would like to specify a target div when adding a tab. Is this possible? The content panes are placed in a wraper "content-pane". Is it possible to add tabs in the content-pane. RIght now they are added after the content-pane. <div id="AppInnerLayout" > <UL> <LI><A href="#tabs-west-1">Nunc tincidunt</A></LI> <LI><A href="#tabs-west-2">Proin dolor</A></LI> <LI><A href="#tabs-west-3">Aenean lacinia</A></LI> </UL> <DIV class="content-pane"> <DIV id="tabs-west-1">
Sortable lists (drag/drop) are not behaving after AJAX callback in IE6/7
I am having a problem with IE 6/7 concerning sortable lists (drag and drop). I have a panel which consists of a series of sortable lists. The lists are generated dynamically. Everything works fine items can be dragged and dropped to any of the lists as I would expect. The problem arises when I perform an AJAX callback to repopulate the lists and reapply the drag and drop functionality. After the AJAX callback the items will no longer drag and placeholders keep being added to the list. Again, this
JQuery.UI Dialog opening several times
I have seen this weird behaviour, I don't know if someone has experimented the same problem when I try $.ajax({ type:"POST", url:"AvanceFotoUpload.aspx", data: urlParams, success: function(htmlContent){ jQuery("div[id*='pnlFotos']").empty(); jQuery("div[id*='pnlFotos']").append(htmlContent); jQuery("div[id*='pnlFotos']").dialog('open'); jQuery("div[id*='pnlImageRealSize']").dialog('destroy'); jQuery("div[id*='pnlImageRealSize']").dialog({bgiframe: true,autoOpen:false,resizable: true,width:400,height:400,stack:true,
How to make a tab open when linked from separate page?
I have a simple tab set up like this.... <script type="text/javascript"> $(document).ready(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){ $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; });
jQuery Tabs -- Long content in hidden tabs
I am using jQuery tabs and when I have very long content within the tabs, my browsers scroll bar reflects the content in the tab with the most content. Example, "Tab 1" & "Tab 3" has a very long scroll bar, even though it has no content (because of Tab 2) and you can scroll down through the empty space http://psylicyde.com/misc/tabs-test Is there a way I can hide the content in Tab 2 so that my browsers scroll bar displays correctly in relation to the content in the active tab? -- View this message
enhancement for tabs - allow self-linking from tab content
I did this for a client, but he says I can share it. When a tab is shown, and it contains internal links, those links are rewritten to be tab panel show actions. Also, as you hover over the link, the corresponding tab is hover-colored. Quite cool. // must be loaded *after* jquery-ui (function($){ $.extend($.ui.tabs.prototype,{ _original_init: $.ui.tabs.prototype._init, _init: function() { var bindInternalLinks = function (event, ui) { // alert('calling bindInternalLinks');
Using jQuery to manipulate MySQL Database
Hi everyone. This is my first post. I was hoping to see if anyone has done much with jQuery to manipulate MySQL data. Here's the scenario: I am making a leaderboard that has race competitors, their times, and position (among other attributes). The data is being fed into the MySQL database and I want to display the data on a leaderboard with live updates and position changes. I figured jQuery would be a good way to get to animation and effects I want. Has anyone done anything similar to this or have
Want to submit a Theme for JqueryUI Widgets
Hi Guys, Can i submit a theme made for jqueryUI with the help of themeroller on 'http://jqueryui.com/themeroller/' ? If yes, please let me know where to submit or whats the procedure for submission? Thank you, jquery rocks!!! --
Send show/hide status with ajax
Hi, I'm building an application which generates a list of questions and answers. Each question (and answer group) is surrounded by a div, and all of the divs are sortable. When the sort order is changed, the list is serialized and sent via .load() to a php script which updates the question order in the mysql database, the script then returns a refreshed question list in the new order. This works great, and I've decided that I'd like the answers to be hidden by default. This is easily achieved with
Next Page