Anyone experience this before? Only happens in Firefox (tested with 3), Internet Explorer is fine. I use ajaxError to alert a message when there is a server side error that isn't caught properly (ASP.NET). It is a full html document, which is auto generated (no control over it). Problem is, sometimes the response can be long (15kb +) and it prevents .html() returning the html in Firefox. e.g. $("body").ajaxError( function(e, req, settings) { var $response = $(req.responseText); console.log($response.find("code")); console.log($response.find("code").html()); }); The first console.log shows the object in the console containing the element I want, but it has no content (which the html from the server does). Anyone else have / able to replicate this problem? Thanks, -Sam
When you select the last date on the demo page (December 2018) and then click the 'next' button, it jumps to January of the first year (January 1998). This may be unexpected behaviour for some, especially since when you click on one of the days (say 1st January) it returns 2019 instead of 1998 as the year. If you select January 1998 and click 'Back', the dropdowns state December 1998, but the year is actually 1997 (so you get December 31 1997). Shouldn't yearRange set minDate and maxDate to prevent this happening - or at least add the years to the dropdowns if you reach the limits (which could be useful in some circumstances)? What I do is: $("#foo").datepicker({yearRange: "-55:0"}); And as a workaround I tried: $("#foo").datepicker({minDate: "-55y", maxDate: "0y"}); But it doesn't show anything older than 10 years ago. Demo page tested on: http://ui.jquery.com/repository/latest/demos/functional/#ui.datepicker -- Sam
At the moment, the tabs plugin uses ajax on the href attribute and loads it's content. To improve graceful degradation, how would you get it to use rel instead? For instance: <li><a href="page1.php" rel="page1_ajax.php"><span>Tab 1</span></a></ li> At the moment, page1.php would be loaded into a tab. page1_ajax.php would be the preferred page to load if ajax is used. page1.php contains the whole page, including navigation etc, but page1_ajax.php only contains the contents. The only workaround is to check the request headers on the php page and send the contents only if it is an AJAX request: if($_SERVER["X-Requested-With"] == "XMLHttpRequest") { .... send content only } else { .... send whole page }
If you try and store and retrieve a JSON object in a cookie using the cookie plugin (http://plugins.jquery.com/project/cookie), you get an unexpected result. For instance, save into cookie: $.cookie("mydata", {foo:"bar",baz:1}); Retrieve value: var mydata = $.cookie("mydata"); But that returns [object Object] A json parser (e.g. http://www.json.org/js.html) has to be used. Using this script, you can 'stringify' the object before storing it: $.cookie("mydata", JSON.stringify({foo:"bar",baz:1})); Then you retrieve it and use JSON.parse: var mydata = JSON.parse($.cookie("mydata")); While this is a workaround, perhaps it may be a good idea if the cookie plugin did this automatically (i.e. convert object to string and back again)? Rather than building in JSON parsing, maybe make the json.org parser a prerequisite? Then a check is done in the plugin code: if(typeof JSON != "undefined") { if(typeof value == "object") value = JSON.stringify(value); }
I current add a form to the page, which is then submitted and returns binary content (e.g. a PDF or Word/RTF Document) that causes a prompt for them to open/download the file: var form = $(document.createElement("form")).attr( { "method": "post", "action": "getdocument.ashx" }).html("<input type='hidden' name='RecordID' value='1'>"); $("body").append(form); form[0].submit(); The getdocument.ashx returns the following headers to cause the download dialog to appear: "content-type" = "application/rtf" "content-disposition" = "attachment; filename=Record1.rtf" Is there a way to use jQuery.post instead, I have tried the following, to no avail (I can see the response in Firebug, so the file is downloaded, but the user can't download it): $.post("getdocument.ashx", { "RecordID": "1" } ); Thanks, --Sam
When using the slider demo, I noticed that when you click (instead of hold down the slider), it does not scroll to the appropriate item, but the scroller image does move. Also, should the images be changed as it is a straight copy (or looks like) from the Apple site? -Sam
I have a div that is periodically loaded with html via an Ajax query and it may contain images which need clueTip's. The first time, the clueTip is applied, but any subsequent requests and it does not (the data is still loaded into the div correctly). Would removing the clipTip help and if so, how would you do that? Code: $.cluetip.setup({insertionElement: '#ajaxdata'}); var $ajaxdata = $("#ajaxdata"); var ajaxUrl = "/ajaxdata.ashx"; load(); // reload after 20 minutes var mins = 20; setTimeout(load, mins * 60 * 1000); function load() { // add the time (as IE caches Ajax) var seed = (new Date()).getTime(); $ajaxdata.load(ajaxUrl + "?s=" + seed, {}, function() { $(this).find("img").cluetip({splitTitle: '|', arrows: false, cursor: 'hand', hoverIntent:{interval: 100}}); }) }
When you create an element (using document.createElement) and add expands to it, they are removed when that element is used to wrap another one. Example: http://www.texotela.co.uk/wrapexpandos.php I use this method for my focusfields plugin, and as a result it does not work in Internet Explorer if jQuery 1.2.1 is used.
I have a strange situation where the browser crashes when a SlideToggle animation is applied. It happens with Internet Explorer 6 and 7. What makes it particularly odd is that it only happens for part of the site. Steps to reproduce: Go to http://www.nelctp.nhs.uk Click on Help in the bar at the top Then click on SiteMap The browser then becomes unresponsive. If you click on SiteMap on any other pages (as long as they are not under /help/) this problem does not occur and it slides down as intended. Anyone able to replicate this or know why it is happening?
When I apply the corner plugin to an element on the page, the layout is affected when I hover over a link with padding. This only seems to occur in Internet Explorer (IE 6 and 7), and I am unable to find out the cause. To replicate, go to http://www.nelctp.nhs.uk Resize the browser window (making it bigger illustrates the problem better), the boxes in the middle should move (to stay in the centre), but they don't. Then mouse over one of the links on the right. The right box moves to the correct position when this happens. I know it is the corner plugin, as a test without it applied works: http://www.nelctp.nhs.uk/?nocorner
I have written a plugin that counts down towards a date (for instance an important event, birthday, new years day etc): http://www.texotela.co.uk/code/jquery/countdown/ During testing though, I found the timing somehow seemed a bit off in Firefox (strangeley enough, IE seems to behave as intended). Two of the examples run the counter every second, but for some reason the time in seconds does not decrement each time by one (sometimes two or even three). If I only have one countdown (that runs every second) on the page, I don't see this happen though. All I can think of is changing it to check the time every half second or so, rather than every second.
Is there an easy way to get a remote script and run code when it has loaded as well as check the content type? $.getScript only works with those scripts on the same server. The problem I have is when using Google Maps I get often the sorry CAPTCHA page (the one you get if too many requests are made) instead of the JavaScript. This results in the rest of the JavaScript (not just the map) on the page not working. What I want to do is show that page (preferably in a Thickbox) when it happens so that the map will still work. The IP address is a common one (which is probably why the page is loaded) as it is used on a large WAN (NHS infact). I have asked on the Google Maps Help Group (July 31), but no one replied (even after replying to my own post over a week later. So I want to find out how to work around the problem. I have also tried having a proxy page at the server using ASP.NET and even then it doesn't work (only part of the script is loaded) which is a WebHandler: <%@ WebHandler Language="C#" Class="GoogleMaps" %> using System; using System.Web; using System.Text; using System.IO; using System.Net; public class GoogleMaps : IHttpHandler { public void ProcessRequest (HttpContext ctx) { ctx.Response.ContentType = "text/javascript"; ctx.Response.Write(GetRemoteScript(ctx, "http://maps.google.com/maps? file=api&v=2&key=GoogleMapsAPIKey")); ctx.Response.End(); } public bool IsReusable { get { return false; } } private string GetRemoteScript(HttpContext ctx, string url) { HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url); request.Referer = "http://www.mywebsite.nhs.uk"; request.ContentType = "text/javascript"; try { // get the response HttpWebResponse response = (HttpWebResponse)request.GetResponse(); // set the content length int contentLength = (int)response.ContentLength; // get the stream Stream responseStream = response.GetResponseStream(); // Pipes the stream to a higher level stream reader with the required encoding format. StreamReader readStream = new StreamReader(responseStream, ctx.Response.ContentEncoding); // create a char array char[] data = new char[contentLength]; // load from the stream into the char array readStream.Read(data, 0, contentLength); // return the data as a string return new String(data); } catch(Exception ex) { return string.Empty; } return string.Empty; } }
I've been looking at Jörn's Accordion plugin (http://bassistance.de/ jquery-plugins/jquery-plugin-accordion/) but not found any way to do a partial accordion (i.e. only apply it to part of a list). I have the structure: <ul id="menu"> <li><a href="/">Home</a></li> <li><strong>Header 1</strong><ul> <li>Sub 1.1</li> <li>Sub 1.2</li> <li>Sub 1.3</li> </ul></li> <li>No sub items here</li> <li>Or here</li> <li><strong>Header 2</strong><ul> <li>Sub 2.1</li> <li>Sub 2.2</li> <li>Sub 2.3</li> </ul></li> </ul> Only Header 1 and Header 2 should be collapsed. When I try on this structure, the browser (Firefox 2) freezes when I click a Header 1 or Header 2.
There is a CSS hack for clearing floated elements, but unfortunately, animations that are applied to those elements with this applied to don't animate properly in IE6. For an example: http://www.texotela.co.uk/clearfixbug.php I can work around it by wrapping another DIV around the one with the clearfix class applied to it and animating that instead, but I wanted to know if there was a way round it without requiring extra markup (i.e. is it a bug in jQuery?)
When I use $("h1").css("font-size") it differs across browsers. Firefox returns it the way I want (in pixels), but Internet Explorer it returns it as returned from the stylesheet (so it could be % or em). How can I then convert the %/em value into pixels? I am doing image replacement (byt getting the text and passing it onto a server side image generation web handler) and as a result the font size is 76px rather than 24px (due to using var fontSize = parseInt($this.css("font-size")))
Is it possible to only run validation when the form is submitted? I am using version 1.1 of the validation plugin (http://bassistance.de/ jquery-plugins/jquery-plugin-validation/) I want to do something only when the form is submitted, so tried this basic code: $("form").validate( { showErrors: function(errors) { alert("should only fire on submit"); } }) The alert shows when I try to submit the form, and also when I click the page after dismissing the alert. Test page: http://www.texotela.co.uk/validation.php
More a CSS question than jQuery, but are there any examples of vertical tabs being used with the tabs plugin? Like how the ones on the Google AdWords login page (https://adwords.google.com/select/ Login) work. It could be something useful to put on the example page as well (you may not always want horizontal tabs).
I am wanting to use the history plugin for a situation where Ajax is not used. Like how it works for the tabs plugin. Here is what I have so far: http://www.texotela.co.uk/sandbox/historytest/ The example on the test page (http://stilbuero.de/jquery/history/ index.html) is only for remote pages, it may be helpful if there was a non-Ajax example (like in mine where links added via JavaScript toggle the visibility of something else). One thing I am not sure how to do is how to handle it when there is no hash - e.g. click on 'Fieldset 2' and then press the back button (Fieldset 2 is still showing, instead of Fieldset 1). Another issue (which is unrelated to the history plugin, but would still like to know how to solve) is tables in absolutely positioned elements. In Firefox, the table cells are all the same size and the text does not fit properly in them (goes over the edge), in IE the table goes off the edge of the page (it is 100% of the page width rather than the container width (which with no width would hopefully just go up to the window edge)).
Haven't updated outlineTextInput's for a while (due to having issues with IE) - which is a plugin for adding outlines to text fields when they are given focus. Done a new version which does seem to work: http://www.texotela.co.uk/code/jquery/focusfields/ Only done very basic testing on Firefox and Internet Explorer. The input's are given a transparent background in Opera, so that could be easily remedied by giving the inputs a background colour via CSS.
Currently the corner plugin (http://www.malsup.com/jquery/corner/) is only used for rounded corners, it would be good if it also did borders as well to replace the existing one (and automatically inherit the widths and colours defined via CSS). I am aware there are examples for doing this (under Adornment on the plugin's page), but perhaps it would be better if the plugin handled this (adding the extra markup required). I have done a test, but come across some issues (doesn't work well for inline elements and pre's): http://www.texotela.co.uk/sandbox/roundedborder/
Anyone know of any good tools for debugging memory leaks in Firefox? I have installed the Leak Monitor extension, but it does not seem to work. Plus when it did (Firefox 1.5), the constant popups proved irritating. I want to find out what is causing leaks (both in the browser and web pages), rather than that they are occurring. _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
I have a parent window that is contains an iframe (containing a calendar) that I want to work with. Both are in the same domain (and folder) and both include jQuery. When I click on a day (i.e. a table cell), I want to get the id (which contains the date) to set the value of a text box in the parent form. I can get it to work with Firefox, but not Internet Explorer. Also, when the iframe page changes (i.e. I click a link within it), the load event isn't fired again in IE (but is in Firefox). This is what I have in the parent document: $( function() { var shifts = $(frames["shifts"]||"#shifts"); shifts.load( function() { alert("iframe loaded"); // fires each time the iframe loads in Firefox, but not IE var d = this.contentDocument; if(!d) d = this.document; // IE else d = d.defaultView; // firefox var days = d.$("td.shift"); days.each( function() { var self = $(this); var text = self.text(); self.empty().append("<a href='#'>").find("a").append(text).click( function() { alert("selected " + this.parentNode.id); return false; } ); } ) } ); } ) Perhaps in a future version of jQuery, it will do this transparently, i.e. var myiframe = $("#myiframe"); myiframe.load( function() { var d = this.document; d.$("a").click(function(){return false}); } ) _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
I have updated my plugins for working with select boxes. I am unable to test in Safari, but there should hopefully be no problems. Tested in IE 7, Firefox 2 and Opera 8.54. Available at http://www.texotela.co.uk/code/jquery/select/ Changes: addOption also replaces options with the same value (so that you don't get duplicates) selectOptions allow you to clear previously selected options (by supplying a boolean as the second parameter - setting to true clears, false leaves as is) Addition: copyOptions to copy options from one select to another. _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/