jQuery Forum

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/

I've updated my news ticker plugin with some bug fixes and added a few
more examples of how to use it:
http://www.texotela.co.uk/code/jquery/newsticker/

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/

Updated my plugin for removing options from a select box. It now takes
a regular expression as well as a string and number.
http://www.texotela.co.uk/code/jquery/select/
_______________________________________________
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/