How Does jQuery Assign Classes to Tags?
For example, in the sample accordion in index.html created with Themeroller, the following statement exists in the header: // Accordion $("#accordion").accordion({ header: "h3" }); Later in the file, for each accordion menu option, we have: <div id="accordion"> <div> <h3><a href="#">Accordion</a></h3> <div style="font-size: 1.1em; height:auto;">Blah blah blah...</div>
autocomplete source=test.php
Hello NG, switching autocomplete from JQuery-Plugin to JQuery UI makes some trouble. Using a Javascript-array for "source" all went fine. Changing source to an php-Page nothing appears on screen. Debugging with firebug "test.php?term=xxx" is sent to the server, the answer is: HTTP/1.1 200 OK Date: Thu, 17 Mar 2011 15:43:34 GMT Server: Apache/2.2.9 (Debian) DAV/2 SVN/1.5.1 PHP/5.3.5 mod_ssl/2.2.9 OpenSSL/0.9.8g X-Powered-By: PHP/5.3.5 Content-Length: 84 Keep-Alive: timeout=15, max=99 Connection:
Drop Targets from Attributes?
I'm new to web development, and even newer to jQuery, so if this is a dumb idea, please let me know. What I want to do is to simplify the drag/drop stuff to allow me to add a few attributes to the drop recipients to allow different types of draggables onto it. So, let's say I have 3 lists I can drag from. A, B and C Next, I have 2 places I can drop to: M and N What I would like to do is to define M in a way that would let me drop A and C onto it using html attributes: <div id="1" class="droppable"
Using autocomplete with alternate form values (ala select box)
Is there a way to use autocomplete (with remote data) to show one value but return another in the form? For example, in a select box you may have an option: <option value="12345">Pick this option</option> Selecting the option shows "Pick this option" but "12345" is the value submitted with the form. How can I do this with autocomplete? (There are several thousand rows, so using the combobox sample does not appear to be an option.)
Datepicker
I need to set the default month to September when the datepicker is opened, how do I do this?
Animate object position with consistent speed.
Is it possible to animate an object with a consistent speed? I am having issues because I need an element to maintain the same rate of speed whether it is moving from point A to B or from A to C. Current the 'duration' is at time far too fast or far too slow if the object is already near its destination.
AutoComplete - How do I capture the element of the "AutoComplete"which is to "hover"?
I'm needing to do a query that will filter element of the list where I'm browsing, that is,when I navigate with the arrow "UP" "DOWN"Consultation will be activated and displaythe corresponding result in another field, anyone know? Ex:
datepicker and object element
I have problem with jquery datepicker. On my page it is displayed above HTML object element (activeX). When I click on datepicker, calendar shows, but part of it is displayed under object element. Browser is IE8 Is there any solution for this issue?
How do is populated the selected part of the multiselect in the order I want?
I save the order of the selected items in a database but when i call the selected items for adjustements I can't recall the selected order. How do is populated the selected part in the order I want? list is for example A B C and I saved C B in that order. When I call that order back it displays B C and not C B. Can anybody help me with this problem?
().dialog is not a function?
Hello, I figure I'm making some simple mistake trying to use the dialog widget, but I can't figure it out. The error message I get is: $("#dialog_box").dialog is not a function Here's is the html I'm using: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javscript"></script> </head> <body> Test 1,2,3.... <div id="dialog_box">Dialog
How to generate dynamic slider with dynamic minimum and maximum value
Hello everyone, I have trying to implement dynamic slider with different range values for last three days. But failed to implement. I also tried to get help from this forum and from other websites but didn't find anything helpful. Finding no other option, i am posting this here. What i am trying to implement: I implemented a module from admin to set slider options for multiple attribute with their minimum and maximum values. Using php code i am displaying their minimum and maximum values dynamically.
multiselect Sorting not working when only plus button is used
Hi, When i only select the elemenst by using the plus(+) button, my list is not sorted by the way i clicked them when i POST it using a form. For example, my list is: A B C D I click plus on the D and then A. The selected list is now: D A. But if i go post this onto another page via a web form my list goes back to original placement like this: A D instead of D A as i selected. However if i play with them up or down, by dragging them, it works. $.widget("ui.multiselect", { options: { sortable: true,
datepicker show 3 month, current month in th emiddle
Hi, I would show 3 months, with the current month in the middle (not first). I have tried in various ways (min and max, etc) but there are always side effects or otherwise must do noise calculations (example: if I m in 15th and i put minDate="-1M", all days before 15th of previous month are not accessible, the same fro the next month, days after 15th). Furthermore, with min and max you can not choose other months before or after. Is there a solution? Thanks!
Trouble populating table data in IE7
Hi, i want to populate a table $(target).html(data); the target is my dynamic div value and data is the place where i get html values. I works fine in mozilla and it dosent work in IE 7.i dont have any script errors,every thing is working fine,but the table is not displayed. //my ajax call $.ajax({ url: $("#parceldt form").attr("action"), type: "POST", data: $("#parceldt form").serialize(), dataType: "html",
Accordion animation right margin?
I'm using an accordion with a custom ThemeRoller theme. I needed to add a right margin to match the spacing of other elements on the page. I've found places places in the css where I can add my margin successfully (Interactions and Accordion sections), and everything looks fine when the accordion is static. When I collapse or expand a panel however, the content portion loses the right margin during the animation, then jerks into place when the animation stops. I've dug through everything that looks
Modal Form to Edit and Delete
Hello to everybody My question is: is possible to use a modal form to edit or delete registers of some data base ? For example, I have a page (asp) that show me 5 registers of my database. I need that every single register can be edited (to change his current values) or deleted (to delete specifically this record) using the modal form Thank you very much
Autocomplete developed on MAMP does not work on WAMP?
I have recently enjoyed developing a browser based data entry app with UI. It was developed on a mac and is primarily targeted for IE. When I moved the code and data to a windows server using WAMPSERVER other jqueryUI elements seem to work including dialog and validator but autocomplete does not. Development was done on 1.8.8 and updated to 1.8.10. After testing with demos I learned that remote strings don't work on later releases of autocomplete on PC WinXP so I learned and rebuilt using JSON.
using multiple jquery theme styles and jqueryUI Dialog problem.
hello. i have a page that uses a theme. i wanna show a dialog that uses another theme. i read this Article from filamentGroup, but it didn't work for me. it's like i didn't add any style to my page. here's my section that i use for dialog: <div class="schoolTemplate"> <div id="Dialog"> </div> </div> i created a custom theme with schoolTemplate css class scope. here it's my jQuery to set Dialog: $('#Dialog').dialog(); but it doesn't work. what's the problem ? thanks.
Dialog Buttons don't work in Greasemonkey
I'm trying to create a dialog box in Greasemonkey and everything goes well until I add buttons. If I remove the "buttons:" part of the dialog function, it functions as expected (just without buttons obv). // ==UserScript== // @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js // @require http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js // ==/UserScript== $('head').append('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/redmond/jquery-ui.css"
autocomplete bug after search
Using jquery 1.4.4, jquery-ui 1.8.10 (also appeared on 1.8.6) Problem occurs on this page (able to reproduce on FF3.6 and IE8) : http://www.websense.com/content/kb-search.aspx?q=proxy Type a search into the search box with mouse hovering above the search box and click enter (instead of clicking the search button). Autocomplete will appear with the search results. When this happens it becomes stuck and will not remove when you click off the automcomplete menu. You have to select an item to remove
refresh div and wait animated image before doing a POST to server
Hi, I need to develop a way to display a "wait/page loading" image before I make calls to the server. So I created an animated gif at http://www.ajaxload.info/ and put the image in a DIV tag with it's attribute set to display:none. Basically when a user clicks on my page, I want to display this "wait" animation before making the call to the server to get my data. Code: $.ajax ({ type: "POST", url: "data.asmx/myPage", data: "test", contentType:
Accordion - How to select header content
I am very new to jQuery, so please forgive what might be a simple question I have a jQuery Accordion working well. I have implemented a Change event function. How do I fetch the selected header's text content? That it, how do I access the text from the <a> tag? <a href="#" class="ui-widget-header"> ... some text ... </a> Or, how to I access the ui.newHeader and/or ui.newContent objects change: function (event, ui) { ... } A small code sample would be
Using "date range" datepicker with "live"
I need to implement a version of this official date range datepicker example to work on a page that is loaded via AJAX. I assume I need to squeeze a "live" in there somewhere... Here's what I have so far. It almost works, except for the fact that it doesn't restrict the "#DueDate" when I select a "#StartDate". $().ready(function() { var dates = $('#StartDate, #DueDate').live('click', function() { $(this).datepicker({ defaultDate: '+1w',
Why is the position of tabs('select'...) important in moving from tab to tab programmatically
Hi folks, Up until I updated to jquery-ui-1.8.10 (already using jQuery 1.5), the following code has worked as (I) expected: function doStuff(ej,pk) { $.get("scripts/ajax_traffic.asp?id=dostuff&opt="+ej+"&opt2="+pk+"&q=" + new Date().getTime(), function(responseText){ $('#tab1').html(responseText).fadeIn(500, function() { ... do other stuff ... }); $("#prolearn").tabs("select",1); }); }; The tab is fueled and then focus is moved from tab0 (from where the ajax call is initiated) to tab1. Now, that
jQuery Resizable -> automatically find all elements for resizing and resize all elements properly
Hi guys, I have a few issues. Im currently trying to make a resizable page. I think this code is almost done, but there are just a few things I'd like to have in this page and I've had some trouble realizing them. * edited * resizing works fine now Secondly. I'm still not happy about the detection of all elements. 2 much is still hardcoded. Getting elements by the ID. I'd like to make it more dynamic. So if you guys have anything to automatically detect the elements around the element that you are
How to put the jQuery ui autocomplete menu into an iframe?
I want to put the suggestion menu into an iframe so that the suggestion information could not be covered by the next frame. So ,what should i do? Well ,I've tried to modify the menu codes like <div><iframe style='position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left: 0; scrolling: no;' frameborder='0' src='about:blank'><ul></ul></iframe></div>, but unfortunately it doesn't work. the autocomplete code: this.menu = $( "<ul></ul>" ) .addClass( "ui-autocomplete" )
Server side event not fire from jquery
this is an asp.net-c# application. function bundAnchorClick() { //alert("bundAnchorClick called.."); $("a[id*=anchor1]").click(function () { $.fx.speeds._default = 1000; $("#div1").children().hide(); $("input[id$='btn']").click(); $("#div1").dialog({ show: "fold", hide: { effect: "clip", pieces: 60, duration: '1000', autoOpen: false }, modal: true, resizable:
Accordion : How to selet the header text of the selected header
I am very new to jQuery, so please forgive what might be a simply question. I have an Accordion working nicely. In the accordion's Change event function, how can I fetch the selected header's text? Or perhaps, how do I access ui.newHeader and/or ui.newContent? change: function (event, ui) { .... } An small sample of code would be very much appeciated!
minDate Not Working in IE(8)
Hello, I am using the following code for a booking calendar. [code] <? $dte=$_GET['dte']; ?> <? $date=date('Y-m-d'); $mqry=mysql_query("select distinct date from calendar where date > '$date' and ctr='1'"); ?> <script type="text/javascript"> var dateList = new Array(); <? while($marr=mysql_fetch_array($mqry)) { ?> dateList.push("<? echo $marr['date']; ?>"); <? } ?> </script> <script type="text/javascript"> StartDate = new Date('<?= $dte ?>'); $("#date").datepicker({ minDate: StartDate, dateFormat:
Question: Im displaying a dialog UI on the screen when hovering over table rows.
Im displaying elements from the table row onto a form type screen. Very long table rows, extends well off the screen. I dont design 'em, I code 'em, ... Is there a way to configure a delay when .hover is used? If this has been previously discussed, please forgive ...I couldnt find any examples of this ... Please dont tell me there is no delay config for hover, please dont tell me.
dialog opens but page scrolls to top
I have several links that have onmouseover function to open dialog on a div. The problem is that if the page is long, and when I move to the bottom of the page, when I mouse over the tag, the page is scrolled to the top. How to avoid this problem? I have the above code: <a href='#' onmouseover="openDialog(19,'tooltip'); return false;" onmouseout="closeDialog(19)" id="note_19" style="cursor:pointer"> <div id="dialog_content_19" title="Product: #0015" style="display: none;">
Sortables without the mouse (i.e. via callbacks)
I downloaded the full jQuery UI bundle and played around extensively with the demos. One thing that interested me was Sortables, though all the demos only provide a mouse interface. Is there a way to use Sortables via commands? Like instead of clicking and dragging a sortable, you create an input button and when pressed it rearranges the stack? Any brief example would be appreciated greatly. I'll continue looking into it myself in the mean time. Thanks in advance!
Redirecting to Login page on 401 using tabs
How would I catch a 401 response using tabs, to redirect to my login page (i.e. after a session timeout). My current code is: $(document).ready(function() { $("#tabs").tabs(); }); Thanks in advance, ripnet
Tabs with custom effect
Hello everybody, I found out how I can apply a fade in and out effect or a slide effect, if I activate another tab or on rotation. But my problem is, I like to slide out from right to left (what is working) and slide in the new tab also from right to left (but it slides in from left to right). How can I change this? The direction option is ignored: $( "#slideshow" ).tabs({ fx: [{width:"hide", duration:"normal", direction:"left"}, {width:"show", duration:"normal", direction:"right||left will be ignored"}]
jQuery autocomplete
Hi, I'm using jQuery 1.3.2 and jQuery UI 1.8.10. I want to try autocomplete, but this far I only succeeded with local data. When I tried to use PHP as source, I failed to get any result. The php code receives the typed text in $_GET["term"], but the returned JSON data is not displayed. The code looks like this: <head> ... <script type="text/javascript"> jQuery(document).ready(function(){ var data = ["alpha", "auto", "auto1", "auto2", "auto3", "beta"]; //this worked jQuery("#city_id").autocomplete({
IE Dialog not firing the first time
I'm having a strange issue with using the Dialog UI in IE. I have click handlers set up for imgs on a page that utilize Dialog to display the full size image when they are clicked. So, I use a placeholder div at the bottom of the page that gets updated with the img src and then .dialog() is called on that div. Everything works fine in FF, Chrome, Safari, but in IE it seems that on the first click, the placeholder div updates, but no dialog. Subsequent clicks fire the dialog, but then the title
Autocomplete with thousands entries
I All, I'm trying to use the UI autocomplete toghether with a php page that retreives thousands of entries from a Mysql database (about 20.000). My problem: when I write something in the input field, I often obtain a script timeout and the autocomplete doesn't work. Has anybody a working example with mysql to post here? Thank you Here the code I'm using: In the page with the form: <link type="text/css" rel="stylesheet" media="all" href="jquery/css/ui-lightness/jquery-ui-1.8.10.custom.css" /> <script
Programatically adding a draggable to a list of sortable
Hi All, How to add a draggable to sortable programatically ? <script> $(function() { $( "#sortable" ).sortable({ revert: true }); }); $(document).ready(function() { setTimeout(add(), 3000); }); function add(){ var $obj = $( "<li class='ui-state-default' id='d7' >Item 7</li>" ); $obj.draggable({ connectToSortable: "#sortable" }); $obj.appendTo($('#sortable')); } </script> </head> <body> <ul id="sortable"> <li class="ui-state-default" id="d1" >Item 1</li> <li class="ui-state-default"
Jquery Lightbox Iframe
Hi i have test around different many iframe plugin... now i just wonder is possible use Jquery UI dialogs using for Iframe to link another pages ...like "Login.jsp" i have test some of lightbox, but not sure which is best and what is your prefer and why hope i get some insight from you
Slides issue
Hi folks: I don't know if anyone out there can give me some advice about a slides issue that I'm having. Basically the slide shuts perfectly, but on opening the hidden paragraph/table or other the slide opens well past the requred position and then suddenly snaps back into the correct position. I am using a simple function: function init(){ for(var i=0; i<10; i++){ $('#index'+i).slideUp('slow'); $('#sub'+i).slideUp('slow'); } } function slide(num){ $('#index'+num).slideToggle('slow');
Next Page