[jQuery] Re: event.pageX/Y in IE
Can you make a test page available that demontrates this problem?
And what version of IE has the problem?
On Oct 13, 6:47 am, Pops [EMAIL PROTECTED] wrote:
I am not sure how I missed this early in my plugin development, but I
see it now.
For my new hover plugin, I noticed jQuery was extending the event
structure with extra mouse information such as:
event.pageY and event.pageX
and that this extended event is passed to my show and hide handlers.
Well, to make a story short, after working out my plugin logic for
screen and viewport dimensions, compensating for scrolls, etc, testing
it under IE, I see that the event pass to me show handler does not
have the extended information.
In other words, in my function callback:
function handleShow(e)
{
var mX = e.pageX;
var mY = e.pageY;
...
}
Under IE, the mouse X/Y variables are undefined.
To fix it, I had to copy some fix method logic in jQuery that checks
and sets the event.pageX/Y properties, like so:
function fixEvent(e)
{
// Calculate pageX/Y if missing and clientX/Y available
// note: IE seems to be the only one that needs this because
// jQuery will add it for others. Don't know why not
// for IE.
if ( e.pageX == null e.clientX != null ) {
var e = document.documentElement, b = document.body;
e.pageX = e.clientX + (e e.scrollLeft || b.scrollLeft || 0);
e.pageY = e.clientY + (e e.scrollTop || b.scrollTop || 0);
}
return e;
}
function handleShow(e)
{
e = fixEvent(e)
var mX = e.pageX;
var mY = e.pageY;
...
}
Again, I don't know how I missed this early on because I was testing
IE and FF as I was doing my work. But in the final analysis, this
is the behavior I am seeing under IE only.
Why would jQuery not set the extended event info with IE?
Thanks in advance.
--
HLS
[jQuery] Re: event.pageX/Y in IE - RESOLVED
Hi Wizzud,
Figured it out. Two things:
1) I screwed up fixEvent() when I copied its logic from jQuery, the
statement
var e = document.documentElement
overrode the event variable. But that bugger simple got me lost in
finding the real problem.
2) jQuery selector hover binding vs direct mouse events in tags.
I have a few test suites and I didn't realize the different with the
ones using a jQuery hover bind vs a direct onMouseOver/Out event
setting. Maybe you can give me some tips here.
For my new wcTipster plugin, its original and main purpose was to
create a single hover handler to handle a large load requirement, 400+
a tags in a tree that binds slow with jQuery. FF is fast, but IE is
terrible here.
So for this setup, the plugin function is basically this:
function wcTipsters(fnShow,fnHide) {
...
var ready = false;
this.start = function() { ready = true; }
this.handleHover = function(ob,e) {
if (!this.ready) return;
...
if (e.type == mouseover) fnShow.apply(ob,[e]);
if (e.type == mouseout) fnHide.apply(ob,[e]);
...
}
}
and to implement it with a server-side created page with 400+
elements, I do:
script type='text/javascript'
$(window).load(function() {
wctipster.start();
});
// expose wctipster instance for the A tag mouse events
var wctipster = new wcTipster();
/script
and the body will have 400+ tags with the direct events assigned:
a href= class=wcpreview
onMouseOver=wctipster.handleHover(this,event);
onMouseOut=wctipster.handleHover(this,event);
/a
To allow for smaller loads where speed isn't an issue, I made
wcTipster a jQuery plugin like so:
//==
// This provides a jQuery wrapper plugin for wcTipster
//==
(function($) {
$.fn.wcTipster = function(f,g) {
var tip = new wcTipster(f,g);
this.bind(mouseover,function(ev) { tip.handleHover(this,ev);})
this.bind(mouseout, function(ev) { tip.handleHover(this,ev);});
tip.start();
return this;
};
})(jQuery);
and implement it in smaller load pages:
script type='text/javascript'
$(window).load(function() {
$('a.wcpreview').wcTipster(});
});
/script
The problem was that my fnShow() callback was designed to use
event.pageX/Y and they were only available when the jQuery did the
hover binding.
With the direct mouse event, this jQuery event fix up action was
lost.
So to resolve it, I changed this.handleOver() to fix up the event:
this.handleHover = function(ob,e) {
...
e = fixEvent(e);
...
}
Phew! So this resolves it for IE when I'm using rthe direct mouse
tag events. The typo just throw me off :-)
Thanks for your interest to help out.
--
HLS
On Oct 13, 5:24 am, Wizzud [EMAIL PROTECTED] wrote:
Can you make a test page available that demontrates this problem?
And what version of IE has the problem?
On Oct 13, 6:47 am, Pops [EMAIL PROTECTED] wrote:
I am not sure how I missed this early in my plugin development, but I
see it now.
For my new hover plugin, I noticed jQuery was extending the event
structure with extra mouse information such as:
event.pageY and event.pageX
and that this extended event is passed to my show and hide handlers.
Well, to make a story short, after working out my plugin logic for
screen and viewport dimensions, compensating for scrolls, etc, testing
it under IE, I see that the event pass to me show handler does not
have the extended information.
In other words, in my function callback:
function handleShow(e)
{
var mX = e.pageX;
var mY = e.pageY;
...
}
Under IE, the mouse X/Y variables are undefined.
To fix it, I had to copy some fix method logic in jQuery that checks
and sets the event.pageX/Y properties, like so:
function fixEvent(e)
{
// Calculate pageX/Y if missing and clientX/Y available
// note: IE seems to be the only one that needs this because
// jQuery will add it for others. Don't know why not
// for IE.
if ( e.pageX == null e.clientX != null ) {
var e = document.documentElement, b = document.body;
e.pageX = e.clientX + (e e.scrollLeft || b.scrollLeft || 0);
e.pageY = e.clientY + (e e.scrollTop || b.scrollTop || 0);
}
return e;
}
function handleShow(e)
{
e = fixEvent(e)
var mX = e.pageX;
var mY = e.pageY;
...
}
Again, I don't know how I missed this early on because I was testing
IE and FF as I was doing my work. But in the final analysis, this
is the behavior I am seeing under IE only.
Why would jQuery not set the extended event info with IE?
Thanks in advance.
--
HLS
[jQuery] Re: Undefined selector returning the document
Hi Jake,
You can file a new ticket here:
http://dev.jquery.com/newticket/
You might need to register first, which you can do here:
http://dev.jquery.com/register
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 12, 2007, at 7:55 PM, Jake wrote:
How do I file a ticket?
On Oct 1, 4:28 pm, Michael Geary [EMAIL PROTECTED] wrote:
I think that is my fault; it was a patch I submitted way back at the
beginning of last year. But you're right, $(undefined) shouldn't
select the
document, only $() with no arguments at all should. Want to file a
ticket on
it?
The offending code is at the beginning of jQuery.fn.prototype:
// Make sure that a selection was provided
selector = selector || document;
That really should be:
// Select document object for $()
if( ! arguments.length ) selector = document;
-Mike
From: Jake
I am having a problem with jQuery (2.1.1).
I have a set of variables defined and depending on
circumstances some may be undefined.
A simple stupid example:
var element_id;
var the_element = jQuery(element);
the_element.click(function () { alert('Hello World'); });
The result of this is that any click anywhere produces the
Hello World alert box. The expected behavior was that no
click event would be bound since element_id was undefined and
so no matching element could be found. Not binding document.click.
I suppose jQuery behaves this way is so calling jQuery()
without any parameters returns document and you can work on
it in the short concise jQuery way.
But doesn't this seem like incorrect behavior?
[jQuery] Re: ANNOUCE: jQuery lightBox plugin
Hi Leandro, Wrong URL. :) Rey... Leandro Vieira Pinho wrote: Thanks everyone. I have released a new version: 0.3. Applying many suggestions here mentioned. See it: http://localhost/leandrovieira/www/projects/jquery/lightbox/ to see the changelog see Changelog Tab in the jQuery plugin page. Regards
[jQuery] Re: jqGrid new version
Tony, it's possible update one cell (that input or combo select) from database ?
[jQuery] queue, dequeue, stop, and the endless mouseovers
Hi everyone,
Someone asked me to try to replicate something he saw here:
http://www.andrewsellick.com/examples/tabslideV2-mootools/
It looked pretty straightforward, and I was able to reproduce the
main effect pretty easily -- except that the Moo tools one looks
better because it doesn't try to slide up every tab when the mouse
goes quickly over a number of them. You can see the problem with mine
here (note, I changed the photo and tab colors to protect the innocent):
http://test.learningjquery.com/tabslide/
I know this little problem can be resolved with the hoverIntent
plugin, but I'd like to gain a better understanding of the new
animation methods in jQuery 1.2, and I thought that one of them would
help, but I can't quite get things to work. I tried various
combinations of .queue() and .dequeue() and .stop(), but nothing
worked right.
So here is what I have now. As you can see, I also tried using the
new :animated selector, and that almost worked, but not quite (which
is why it's commented out now):
$(document).ready(function() {
var $panelBodies = $('div.panel_body');
$panelBodies.slice(1).hide();
var slideTabs = function() {
var $this = $(this);
$this.parent().siblings().children('div.panel_body')
.animate({height: 'hide'}, 300, function() {
$(this).prev().removeClass('visible');
});
// if ($panelBodies.filter(':animated').length 2) {
$this.next(':hidden').animate({height: 'show'}, 300,
function() {
$(this).prev().addClass('visible');
});
// }
};
$('div.panel_container h3').mouseover(slideTabs);
});
Can anybody help this poor lost boy?
thanks,
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: jqGrid new version
Tony it's possible update one cell (that input text or combo select) from database? On Oct 7, 4:35 pm, Tony [EMAIL PROTECTED] wrote: I have released a new version ofjqGrid. Demo page here:http://trirand.com/jqgrid/jqgrid.html Home page:http://www.trirand.com/blog/ Enjoy.
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
The mootools one keeps freezing for me in FF/Vista. I think yours feels
smoother and acts better than the moo one.
RE: Queue: It's over my head. :)
Glen
On 10/13/07, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi everyone,
Someone asked me to try to replicate something he saw here:
http://www.andrewsellick.com/examples/tabslideV2-mootools/
It looked pretty straightforward, and I was able to reproduce the main
effect pretty easily -- except that the Moo tools one looks better because
it doesn't try to slide up every tab when the mouse goes quickly over a
number of them. You can see the problem with mine here (note, I changed the
photo and tab colors to protect the innocent):
http://test.learningjquery.com/tabslide/
I know this little problem can be resolved with the hoverIntent plugin,
but I'd like to gain a better understanding of the new animation methods in
jQuery 1.2, and I thought that one of them would help, but I can't quite
get things to work. I tried various combinations of .queue() and .dequeue()
and .stop(), but nothing worked right.
So here is what I have now. As you can see, I also tried using the new
:animated selector, and that almost worked, but not quite (which is why it's
commented out now):
$(document).ready(function() {
var $panelBodies = $('div.panel_body');
$panelBodies.slice(1).hide();
var slideTabs = function() {
var $this = $(this);
$this.parent().siblings().children('div.panel_body')
.animate({height: 'hide'}, 300, function() {
$(this).prev().removeClass('visible');
});
// if ($panelBodies.filter(':animated').length 2) {
$this.next(':hidden').animate({height: 'show'}, 300, function()
{
$(this).prev().addClass('visible');
});
// }
};
$('div.panel_container h3').mouseover(slideTabs);
});
Can anybody help this poor lost boy?
thanks,
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: queue, dequeue, stop, and the endless mouseovers
Hi
I'm hijacking your thread to challenge you ( if its possible ;-) ).
I 'm trying (with no success) to do the same as you, but fades in addition:
on over : hovered image fades in - tab goes up
on out : tab goes down - image fades out
I tried a lot of different ways, with queue() dequeue(), using hover()
or onmousehover(),
using $this = $(this); really a lot of different variation and I got a
lot of different fancy results,
With most of times the hovers fx being repeated lots of times, some
strange flickering or so.
Any I'll kept trying, but any help, any pointer to a tutorial for
animations would be much appreciated.
-Olivier.
Karl Swedberg wrote:
Hi everyone,
Someone asked me to try to replicate something he saw here:
http://www.andrewsellick.com/examples/tabslideV2-mootools/
It looked pretty straightforward, and I was able to reproduce the main
effect pretty easily -- except that the Moo tools one looks better
because it doesn't try to slide up every tab when the mouse goes
quickly over a number of them. You can see the problem with mine here
(note, I changed the photo and tab colors to protect the innocent):
http://test.learningjquery.com/tabslide/
I know this little problem can be resolved with the hoverIntent
plugin, but I'd like to gain a better understanding of the new
animation methods in jQuery 1.2, and I thought that one of them would
help, but I can't quite get things to work. I tried various
combinations of .queue() and .dequeue() and .stop(), but nothing
worked right.
So here is what I have now. As you can see, I also tried using the new
:animated selector, and that almost worked, but not quite (which is
why it's commented out now):
$(document).ready(function() {
var $panelBodies = $('div.panel_body');
$panelBodies.slice(1).hide();
var slideTabs = function() {
var $this = $(this);
$this.parent().siblings().children('div.panel_body')
.animate({height: 'hide'}, 300, function() {
$(this).prev().removeClass('visible');
});
// if ($panelBodies.filter(':animated').length 2) {
$this.next(':hidden').animate({height: 'show'}, 300,
function() {
$(this).prev().addClass('visible');
});
// }
};
$('div.panel_container h3').mouseover(slideTabs);
});
Can anybody help this poor lost boy?
thanks,
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: Binding bug ?
I've seen this in situations where the event handlers may be applied
more than once. I got into the habit of doing
$(#foo).unbind(click).click(function () {...});
I think the $.one() method is meant for this type of situation though.
The docs say it will apply a handler that should only happen once for an
element...
Shawn
Flesler wrote:
I lost a couple of hours of my life wondering why would this happen, I
was working on jQuery.Listen, and after binding, unbinding, and
rebinding, the handler was being triggered twice.
I finally came up with a case where that happens, only using jquery's
binding methods:
$('#foo')
.click(function(){})
.mouseover(function(){})
.unbind('click')
.click(function(){
alert('click!!');
});
clicking on foo should alert once, but in my PC, it does twice ( FF
and IE ).. is this a bug ? I'll open a ticket just in case... Ticket
#1798. - http://dev.jquery.com/ticket/1798
Ariel Flesler
[jQuery] Access parent page from ajax generated html
It seems this post was deleted... Why?
If I have a main page and a section of it generated by Ajax, how do I
access an element in the main page from the section generated by Ajax?
Or, in code speak: (how can I make something like this work)
html
img id=removeMeAfterAjax src=images/fredington.jpg /
div id=AjaxHolder
!-- BEGIN retrieved via Ajax --
a onClick=$('#removeMeAfterAjax').remove();Remove
Fredington/a
!-- END retrieved via Ajax --
/div
/html
[jQuery] Determining the length of an object/array in IE
I know this should be simple, I know this should work, but it isn't and doesn't. so if you take a look-see at http://www.roberthenrylowe.com/lab/jQuery/codeconverter.html in Firefox, you'll see what I am trying to accomplish and in fact, it works there. Basically I take a code block and make it a fancy formatted ol, except in IE, the jQuery code found at http://www.roberthenrylowe.com/lab/jQuery/codeconverter.js fails silently around line 20 and don't understand why. Can anyone help out? Thanks!
[jQuery] How to bind data to the ajax callback function?
Below is an example to use jQuery.get() to get some html data.
I expect that 0, 1 (or 1, 0) are displayed, however, it
displayed 2, 2.
How can I do?
var url='http://foo.bar/?param=';
for(var i=0; i2; i++){
$.get(url+i, function(html){
doit(html, i); // bind 'i' to the callback function
});
}
function doit(html, tag){
alert(tag);
}
[jQuery] Re: Best practice for form serialize?
If you know the form name, you have most of what you need. Using
jQuery's selectors, get a reference to the form:
$(form[name='myform']);
Then from there find each of the child form elements (luckily, most form
elements are input boxes:
$(form[name='myform'] input);
Repeat the above for the other form tags in your form - select,
textarea, etc.
Then apply your event handler:
$(form[name='myform'] input).blur(function () {
$.ajax({url: 'mypage.php', . . .});
});
Repeat this for each selector type you may need (selects, text areas,
etc.) - but the inner code will be the same, so you should probably
create a function that does the submission.
The $.ajax call really depends on your needs. You'll need the Success
parameter set so you can populate the DIV with the results (or use a
$.post() if you want to short cut a little). Serializing your data for
submission, well, that's what pulled me into this thread. I want to see
how others are doing it.
For myself, I create a string variable, and manually create the string
based on the form values. Maybe using the .serialize() or
.serializeArray() methods (http://docs.jquery.com/Ajax - bottom of list)
would be a better option.
There ARE plugins to help with form management/submission. The Form
plugin has helped me some. But, it's really just a shortcut to doing it
manually - under the hood I *think* it's just doing the same type of
thing as what I posted above...
Any better ways to do this? I'm not sure I'm steering you straight
here, but am relatively confident my suggestions will work. The
question is if my method is more work than I should be doing.. :)
Shawn
mo2g wrote:
I have a web page with two forms on it. It originally used Prototype
and I would like to convert it to jQuery.
The main form has text, checkboxes, radio buttons, etc.
I want to watch the form and if any form element changes I want to
serialize the entire form and post it to a URL, receive the result and
show it in a DIV.
Basically I will be using this form to return a live search result
total so that the user can see how many results will be returned with
certain search form choices.
I have viewed many different tutorials both with and without plugins.
I am posting here in hopes that the experts on this forum can point me
in the right direction. Should I use plugins and if so which ones?
Here are a couple of my requirements:
1. I need to be able to reference only the one form. There may be
multiple forms on the page.
2. I need to watch all the elements for change which includes
checkboxes and radiobuttons.
3. I would like the page to load as quickly as possible.
4. When i serialize the form to submit it for the live results, I need
all the form elements to post correctly including the checkboxes.
Thanks in advance.
[jQuery] Re: How to use history remote with search results
On 12 Okt., 22:18, ogurec [EMAIL PROTECTED] wrote:
Hi,
i use history remote plugin and i try to make it work
when i send request from search form.
I tried this approach:
$('#search_form').submit
(
function()
{
var aurl = this.action;
var adata=$(':input',this).serialize();
$.ajax (
{
type:'GET', url:aurl+'?'+adata, dataType:'html',
success:function(x)
{
$.ajaxHistory.update('#' + aurl);
}
}
);
}
);
But with no success. Maybу someone can point me into right direction...
Simply adding to history like that is not supported yet. You need to
attach the form submit to a click event and history enable that link,
try (you must not forget to initialize history as well):
$('a#submit-form').history(function() {
// ajax submit...
});
$.ajaxHistory.initialize();
with a link like:
a id=submit-form href=#submitSubmit/a
--Klaus
[jQuery] Re: Livequery and History / Remote togehter. Help.
Can someone please help?I have been stuck with this for about 2 weeks now. I
have also tried listen and the other history plugin.
gimperdaniel wrote:
I will try to explain myself as clear as possible:
I have used Ajax in the past. Not with jquery though. I have been working
with jquery for about a month. So I know some, but definitely still
learning.
I downloaded Livequery:
http://jquery.com/plugins/project/livequery
And had no problems. I got all my ajax requests wrapped up with livequery.
Then I found out about History/Remote:
http://www.stilbuero.de/jquery/history/
And I had no problems getting it to work, except when I wrap it with the
livequery function.
As I understand, this is the basic livequery function:
$('a') .livequery('click', function(event) {
return false;
});
and this is the basic History/Remote function:
$('a.remote').remote(#divID);
$.ajaxHistory.initialize();
I combined both this way:
$('a.remote').livequery(function() {
$(this).remote(#divID);
});
I removed the click from the livequery function because it was causing
redundancy. That's probably because the history remote already has the
click
in it.
The problem is:
Because History/Remote is inside the livequery, the page refresh and page
bookmark wont work. It only works after you click the first time on a
link.
Thus only the forward button and back button work.
If I make an instance of History/Remote outside livequery then the links
get
all messed up and call the main page inside itself.
Since I am new. I think I not using livequery properly. My links in the
HTML
are used just like in the example of History remote.
Again, I can get both of them to work, I just cant figure out how to use
them together.
I appreciate any help.
PS: I really like jquery. Way easier to learn then mootools
--
View this message in context:
http://www.nabble.com/Livequery-and-History---Remote-togehter.-Help.-tf4614169s27240.html#a13176988
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
View this message in context:
http://www.nabble.com/Livequery-and-History---Remote-togehter.-Help.-tf4615611s27240.html#a13190818
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Ajax tabs detect automatically
On 10 Okt., 18:39, zorba [EMAIL PROTECTED] wrote:
The best woud be if you could just have a look at this site I'm
currently developping.
http://maroc.visages-trekking.com/beta/randonnee-ski-rando.php
access with login 'zorba' / password 'kazantzakis'
As you see there is a list of items into tabs, each item linking to a
'product' page wich also contains tabs.
This version uses Tabs 2.7, but I had some trouble with IE7 and Clear
Type fonts, so I decided to upgrade.
The following page now uses UI tabs 3.0, then as soon as the page is
loading, it also loads the html of the first 'product page' linked
http://maroc.visages-trekking.com/beta/randonnee-trekking-voyage-dese...
I hope you unterstand now why I'd like to disable auto detect or auto
loading,
Maybe this could be an option {remote:disable} ,
or I can change a couple of lines in your great code?
Thank you very much
Thierry
PS I do not guarantee bug or css fixes in IE at the moment ;)
I had a look at the page and - to be honest - I had a hard time
understanding where and how you are using Tabs. From what I've seen I
have the impression that you're using Tabs in a way it isn't supposed
to be, but I'm still not sure.
I'd appreciate it if you would create a simplified test case to help
me understanding the issue.
--Klaus
[jQuery] How about add js language enhancement to jQuery in next version
I found the enhancement of prototype and motool is very helpful to coding. Anyone agree with me? Thanks! Jiming
[jQuery] Re: How to use history remote with search results
On 12 Okt., 22:18, ogurec [EMAIL PROTECTED] wrote:
Hi,
i use history remote plugin and i try to make it work
when i send request from search form.
I tried this approach:
$('#search_form').submit
(
function()
{
var aurl = this.action;
var adata=$(':input',this).serialize();
$.ajax (
{
type:'GET', url:aurl+'?'+adata, dataType:'html',
success:function(x)
{
$.ajaxHistory.update('#' + aurl);
}
}
);
}
);
But with no success. Maybу someone can point me into right direction...
Adding to history like that is not yet supported. It's required to
click on a link that changes the fragment identifier of the current
URL. Try (don't forget to initialize history):
$('a#submit').history(function() {
// ajax submit...
});
$.ajaxHistory.initialize();
with a link a id=submit href=#submittedSubmit/a
--Klaus
[jQuery] Re: slow livequery after loading 900 rows of table
You can try event bubbling (event delegation) that should work
faster...
On Oct 12, 11:46 am, kamiseq [EMAIL PROTECTED] wrote:
ok it seems that livequery is the problem here, I ve
readhttp://docs.jquery.com/Tutorials:AJAX_and_Eventsand it seems it will
be the better way, will not?
On 12 Paź, 12:57, kamiseq [EMAIL PROTECTED] wrote:
im loading simple table into my DOM tree, i have about 900 rows and 7
cols, it shouldnt be that bad. now i used liveguery to bind events to
6 objects for each row. I understand that livequery is going through
the whole 900x6 elements and binds events but then it should be all
fine.
I dont understand why clicking on some element is taking so long, at
least 5 second, I have no idea if it is the problem with livequery or
with jQ or JS is just that slow. I am not really happy with making
tests how jQ would act if table wasnt loaded with load(). if you have
any experience I would be glad to hear something about that.
do you know how can I redesign my code to work faster! I dont need to
mention that with 20 rows everything was fine:D hehe but for Christ's
sake 900 it is nothing!!
the code is usually something like that:
$('tr.shortinfo td.access').livequery(function(){
$(this).hover(
function(){
$(this).css('background-color', '#e6');
},
function(){
$(this).css('background-color', '#fff');
}
);
}).livequery('click', function(event) {
$(this).parent().next().filter('tr.showfullinfo').
removeClass('hidden');
});
and this is using 100% of CPU for 20sec- Hide quoted text -
- Show quoted text -
[jQuery] Re: Extremely poor performance of jQuery on AJAX partial page updates
I can use PasteMonkey but I don't see how it can help in this case -
what exactly do you want me to paste in it? The line that takes over
20 seconds to execute is the regexp applied to the HTML that's passed
to jQuery constructor. There is no point in editing HTML (I think)
because it is automatically generated by the server and is very
dynamic. I just pasted one example of it. There is no way to predict
all possible combinations of that HTML.
The issue I think is in regexp, or IE performance when applying
regexp. The regexp is in jquery.js.
Are you suggesting that the problem is in the HTML markup I'm trying
to insert into the page?
On Oct 12, 7:12 pm, polyrhythmic [EMAIL PROTECTED] wrote:
Alex,
May I recommend to you PasteMonkey?
http://pastemonkey.org/
Charles
doublerebel.com
On Oct 12, 11:42 am, koollx [EMAIL PROTECTED] wrote:
I'm trying to use jQuery 1.2.1 to add AJAX functionality to my web
application. I am using jQuery Form plugin to submit te form via AJAX
and have a server-side algorithm that returns page updates. The server
returns a JSON array with HTML elements to be updated and then I loop
through that array and process each item. For update, I first remove
the existing DOM element, then recreate it using jQuery constructor,
and then append it to the parent. It works find in FireFox, but in IE
the performance is horrendous. It takes 25 seconds in IE6 and IE7
pretty much hangs. I traced the delay to the following line of code in
jQuery init method:
var m = quickExpr.exec(selector);
So it seems that jQuery is to blame for the performance. Is there
something I can do to improve it? Is this a bug/issue that needs to be
resolved? I'd like to help fix it but I'm not familiar with jQuery
design well enough to know why the regexp is there and how we can
simplify/remove it. Here's my update code:
var $component = $(state.html);
$component.appendTo(parent);
And the HTML that takes particularly long is pasted below (it may look
like a large page but it isn't. It loads into the browser without
jQuery AJAX in less then a second):
div id=\JTabbedPane10546001\ style=
\position:absolute;left:0px;top:46px;width:884px;height:644px\
tabbedPane=\true\
ul
lia href=\#JTabbedPane10546001-tab-0\spanButton
Demo/span/a/li
lia href=\#JTabbedPane10546001-tab-1\spanSource
Code/span/a/li
/ul
div id=\JTabbedPane10546001-tab-0\ style=
\position:absolute;left:2px;top:26px;width:874px;height:585px\div
id=\JPanel12136681\ style=\position:absolute;left:2px;top:1px;width:
874px;height:611px;clip:rect(0px 874px 611px 0px)\ class=\ border\
div id=\JPanel14907335\ style=
\position:absolute;left:2px;top:2px;width:874px;height:
611px;clip:rect(0px 874px 611px 0px)\
div id=\JTabbedPane30196714\ style=
\position:absolute;left:0px;top:0px;width:874px;height:611px\
tabbedPane=\true\
ul
lia href=\#JTabbedPane30196714-
tab-0\spanButtons/span/a/li
lia href=\#JTabbedPane30196714-
tab-1\spanRadio Buttons/span/a/li
lia href=\#JTabbedPane30196714-
tab-2\spanCheck Boxes/span/a/li
/ul
div id=\JTabbedPane30196714-tab-0\ style=
\position:absolute;left:2px;top:26px;width:868px;height:555px\div
id=\JPanel5403403\ style=\position:absolute;left:2px;top:1px;width:
868px;height:581px;clip:rect(0px 868px 581px 0px)\
div id=\JPanel16702321\ style=
\position:absolute;left:5px;top:5px;width:548px;height:
567px;clip:rect(0px 548px 567px 0px)\ class=\ border\
fieldset style=\position:absolute;left:
9px;top:8px;width:529px;height:61px;clip:rect(0px 549px 81px 0px)\
class=\ border\
legendText Buttons/legend
input type=\button\ id=
\JButton7715289\ name=\JButton7715289\ value=\One \ class=
\button\ onClick=\return doSubmit('/button/JButton7715289')\ style=
\position:absolute;left:11px;top:21px;width:69px;height:27px\
span style=\font-size:1;width:
10;position:absolute;left:80px;top:34px;width:11px;height:1px
\nbsp;/span
input type=\button\ id=
\JButton5689693\ name=\JButton5689693\ value=\Two\ class=\button
\ onClick=\return doSubmit('/button/JButton5689693')\ style=
\position:absolute;left:92px;top:21px;width:66px;height:27px\
span style=\font-size:1;width:
10;position:absolute;left:158px;top:34px;width:11px;height:1px
\nbsp;/span
table border=0 cellpadding=2
cellspacing=0 class=\button\ onclick=\return doSubmit('/button/
JButton7083822')\ id=\JButton7083822\
[jQuery] newbie: question
hi, To use AJAX in my website, I select the a field. I'll would like to know if it is possible to select only the link who have not an onclick method. Thanks,
[jQuery] Selection
Hi. I want to apply a function to all links, but not these in a div
with id #xy. There could be nested elements in #xy with links in it.
How can I modify $('a').MyFunction() to do this?
Thanks and regards,
Katja
[jQuery] Case-insensitive version of :contains(text) ?
The selector :contains(text) appears to be case sensitive (though there's no mention of this in the jQuery docs). Is there a case insensitive version?
[jQuery] Re: ANNOUCE: jQuery lightBox plugin
I have released a new version: 0.3. Applying many suggestions here mentioned. Marvellous! Thanks for considering and implementing our needs and suggestions. You've also gotten rid of the physical url references in the css. That makes this module much easier to implement and maintain! See it:http://localhost/leandrovieira/www/projects/jquery/lightbox/ Hehe, can't see your localhost from here :) http://leandrovieira.com/projects/jquery/lightbox/ Erlend :)
[jQuery] Re: slow livequery after loading 900 rows of table
If you have many handlers, for many different elements, you could
check http://jquery.com/plugins/project/Listen
Ariel Flesler
On Oct 12, 11:46 am, kamiseq [EMAIL PROTECTED] wrote:
ok it seems that livequery is the problem here, I ve
readhttp://docs.jquery.com/Tutorials:AJAX_and_Eventsand it seems it will
be the better way, will not?
On 12 Paź, 12:57, kamiseq [EMAIL PROTECTED] wrote:
im loading simple table into my DOM tree, i have about 900 rows and 7
cols, it shouldnt be that bad. now i used liveguery to bind events to
6 objects for each row. I understand that livequery is going through
the whole 900x6 elements and binds events but then it should be all
fine.
I dont understand why clicking on some element is taking so long, at
least 5 second, I have no idea if it is the problem with livequery or
with jQ or JS is just that slow. I am not really happy with making
tests how jQ would act if table wasnt loaded with load(). if you have
any experience I would be glad to hear something about that.
do you know how can I redesign my code to work faster! I dont need to
mention that with 20 rows everything was fine:D hehe but for Christ's
sake 900 it is nothing!!
the code is usually something like that:
$('tr.shortinfo td.access').livequery(function(){
$(this).hover(
function(){
$(this).css('background-color', '#e6');
},
function(){
$(this).css('background-color', '#fff');
}
);
}).livequery('click', function(event) {
$(this).parent().next().filter('tr.showfullinfo').
removeClass('hidden');
});
and this is using 100% of CPU for 20sec- Hide quoted text -
- Show quoted text -
[jQuery] Layout support in jQuery UI
Hi, I have gone through the widget and components available in jQ ui, however there are no ready made layout components as such which can be used. I don't wish to use third party plugins such as ext, scriptaculous etc for that. Is there something I am missing or layouts are not natively part of the jQ UI? ~Shishir
[jQuery] Bookmark with jQuery
Did anyone successed in making a script that can bookmark a webpage? The script I used worked with IE but I would like the script to work with Firefox and Opera too. Do you have any idea how to do that with jQuery? Thanks L.
[jQuery] Dynamic attributes selectors
Hi,
I have this small issue that I cannot solve.
I look for an element checking the attribute href:
$('a[href='#last_name']').text('ciao');
And It's fine but if I try to use a variable the selector fail:
var forAttr = '#last_name';
$('a[href=forAttr]').text('ciao');
forAttr is exactly #last_name
Some help???
Thanks
Andrea
[jQuery] Re: How to iterate and manipulate an object
Hector, I'm afraid you lost me there. I'm always eager to improve my code, but I am having trouble figuring out what you're talking about. I *think* you were saying that the code promotes some bad coding habit having to do with loop iteration, but I'm not sure what that could be. The only loop in the code is a numeric for loop that iterates over an array. I'm curious to know what you're referring to regarding the internal loop counters and references and such. Maybe the easiest way to help me understand would be if you could post a snippet of code that does things the wrong way, to illustrate the problem you're talking about. (I wonder if you were thinking of the message someone else posted suggesting that a for in loop on a JS object would iterate the items in the order they were inserted? There's no guarantee of that, which is the reason for the keysByIndex array in my code.) The bug in the code I posted is that the [].splice() calls change the indices of existing entries in the keysByIndex array, which means that the index properties in the itemsByKey items become invalid. There are several ways that could be fixed; which is best would depend on the optimization goals for the code. And that's where I committed a real software engineering sin, which is not having clear requirements before coding. It was just an off-the-cuff coding example, after all. :-) FWIW, the assumptions I made were: * There may be a large number of items in the cache. * You want to be able to remove individual items as well as prune the oldest items. * When you prune the oldest items, you want it to be faster than it would be to iterate over the entire collection (i.e. you may prune a small number of the oldest items in a large collection). If those last two items aren't requirements, the code could be much simpler. Get rid of the keysByIndex array, and just put a sequence number in each cache item. Keep track of the lowest sequence number currently in the cache. To prune n of the oldest items, iterate over the entire cache, and delete each item you find with a sequence number less than that lowest number plus n. When done, update that saved lowest number. It's also not hard to fix the code so it iterates over only the number of items you want to prune. If you don't need a remove() method, it's very easy: Simply get rid of the index property in each cache item. That's only needed for remove(). If you do need a remove method, it can also be fixed pretty easily, but now I'm getting way off topic... :-) -Mike From: Pops Hi Mike, I didn't analyze your code, but as I said (or maybe I was thinking of saying it but do not) is that JavaScript, to me, a guy is extremely strict and high software quality development practices, promotes bad coding habits. I say that because I have already caught myself doing stuff that I would not otherwise just because javascripts allows it. So in this case, the idea that the associated array for loop interation is not ordered is reason enough not to bother with any more with it. Even though, as you indicated and I believe you, it is harmless and it is very tempting to use that logic, I just do not feel right it won't pull the rug from under the feet of the internal loop counters or references in various javascript RTEs. So even though JS may allow it, from a design standpoint, to me, it is bad practice to wrote code with this behavior simply because it can carry over to other languages where it will definitely be an run time error. I am already fighting global variables :-) I'm trying to write code in JS like its real OOPs language and its really not. :-) I don't think it is off topic because anything that has to do with Javascript is related to jQuery.In this thread, I was designing a cache for a jQuery plugin. Also, when I posted the original message, I was also thinking that maybe someone would mention jQuery's own makeArray and related ideas to see and/or mention how jQuery maintains its own cache. Anyway, are you really going to make use study your code to see what was wrong with it? :-) just tell us. g
[jQuery] Jquery and Pseudo classes
How does set the classes of an a tag? I would like to trigger the active, hover or link attributes Thanks
[jQuery] Re: Determining the length of an object/array in IE
You're making an assumption that in IE there are newline characters in the retrieved html - there aren't. Try this ... // $codetext.pop(); // $codetext.shift(); if(!$codetext[$codetext.length-1]) delete $codetext[$codetext.length-1]; if(!$codetext[0]) delete $codetext[0]; ...and you'll see the end result. Your pop() and shift() were actually removing the entire *single* element of $codetext as returned by IE (post split). On Oct 13, 7:52 am, Rob [EMAIL PROTECTED] wrote: I know this should be simple, I know this should work, but it isn't and doesn't. so if you take a look-see athttp://www.roberthenrylowe.com/lab/jQuery/codeconverter.html in Firefox, you'll see what I am trying to accomplish and in fact, it works there. Basically I take a code block and make it a fancy formatted ol, except in IE, the jQuery code found athttp://www.roberthenrylowe.com/lab/jQuery/codeconverter.jsfails silently around line 20 and don't understand why. Can anyone help out? Thanks!
[jQuery] Re: Dynamic attributes selectors
Try...
var forAttr = '#last_name';
$('a[href=' + forAttr + ']').text('ciao');
On Oct 13, 10:03 pm, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
Hi,
I have this small issue that I cannot solve.
I look for an element checking the attribute href:
$('a[href='#last_name']').text('ciao');
And It's fine but if I try to use a variable the selector fail:
var forAttr = '#last_name';
$('a[href=forAttr]').text('ciao');
forAttr is exactly #last_name
Some help???
Thanks
Andrea
[jQuery] Re: How about add js language enhancement to jQuery in next version
Not me. On Oct 13, 3:43 pm, Jiming [EMAIL PROTECTED] wrote: I found the enhancement of prototype and motool is very helpful to coding. Anyone agree with me? Thanks! Jiming
[jQuery] Re: ANNOUCE: jQuery lightBox plugin
ahahah, I have forgotten tha corret URL, sorry. It´s http://leandrovieira.com/projects/jquery/lightbox/ Regards. On Oct 13, 8:34 am, Erlend Schei [EMAIL PROTECTED] wrote: I have released a new version: 0.3. Applying many suggestions here mentioned. Marvellous! Thanks for considering and implementing our needs and suggestions. You've also gotten rid of the physical url references in the css. That makes this module much easier to implement and maintain! See it:http://localhost/leandrovieira/www/projects/jquery/lightbox/ Hehe, can't see your localhost from here :)http://leandrovieira.com/projects/jquery/lightbox/ Erlend :)
[jQuery] Re: Selection
$('a').filter(function(){ return ($
(this).parents('#xy').length==0); }).MyFunction();
On Oct 13, 9:28 am, ksuess [EMAIL PROTECTED] wrote:
Hi. I want to apply a function to all links, but not these in a div
with id #xy. There could be nested elements in #xy with links in it.
How can I modify $('a').MyFunction() to do this?
Thanks and regards,
Katja
[jQuery] json-to-tree?
Hi All, Anyone know of a tree plugin that can populate from a json source (with minimal fuss)? How about a breadcrumbing plugin that can read from a json source? I basically have a bunch of nested categories in json and am exploring various navigation options, focusing mainly on plugins that won't require much reconstruction of the json data, ideally able to read from a json source (locally or remotely, doesn't matter...I can fetch the remote as needed). I looked at some Ext 2.0 tree demo's that can do it, but am looking for a jquery way. TIA, Jack
[jQuery] Re: Jquery and Pseudo classes
Why do you need jQuery for that?
a:link {}
a:hover {}
a:active {}
all work fine in CSS?
Check out http://www.jquery.com/api. You can see a nice list of all of the
things jQuery can do there.
Glen
On 10/13/07, wattaka [EMAIL PROTECTED] wrote:
How does set the classes of an a tag? I would like to trigger the
active, hover or link attributes
Thanks
[jQuery] Re: Dynamic attributes selectors
var forAttr = '#last_name';*$('a[href=forAttr]').text('ciao');*
should be
var forAttr = '#last_name';*$('a[href=' + forAttr + ']').text('ciao');*
**
Hi, I have this small issue that I cannot solve. I look for an element
checking the attribute href: $('a[href='#last_name']').text('ciao'); And It's
fine but if I try to use a variable the selector fail: var forAttr =
'#last_name'; $('a[href=forAttr]').text('ciao'); forAttr is exactly
#last_name Some help??? Thanks Andrea
[jQuery] slideToggle flickers on slideDown in FF but not IE
The flicker or flash of white I am struggling to find a solytion for
is only happening when slideToggle slides down, the initial slideDown
slideUp do not flicker. Flicker occurs in FF, but not in IE.
$(document).ready(function() {
initSlideboxes();
function initSlideboxes()
{
$('#slidebar').slideDown(1000);
setTimeout(function()
{
$('#slidebar').slideUp(3000);
}, 5000);
$('#slidebar').html($('#hidebar').html());
$('#slidebartrigger').click(function(){$
('#slidebar').slideToggle(slow); });
};
});
[jQuery] Re: Using multiple versions of jQuery on the same page
Any chance someone could elaborate on what George explained? It sort
of makes sense to me, but I'm still a bit lost. What would I do if a
page I'm working on already has Prototype and JQuery 1.1.4 (loaded
with noConflict()), and I wanted to then add JQuery 1.2.1 and some
plugins? Is that even possible or should I just learn how to use
1.1.4 (which is being loaded because of a few Wordpress plugins)? I'm
new to JQuery so I've been learning the latest build. Is it very
different from 1.1.4? Sorry for the wide variety of questions.
Any help or knowledge would be greatly appreciated.
-Nicholas
On Oct 9, 9:29 am, George [EMAIL PROTECTED] wrote:
After looking at the code it seems quite straight-forward. Someone
correct me if I've got the wrong end of the stick.
Summary: The first version you include will get reinstated, the second
version getting blown away.
How it works: When you include jQuery, it makes a copy of the window.$
and window.jQuery variables and puts them into _$ and _jQuery
(variables inside jQuery itself) respectively. So if there's already a
copy of jQuery included on the page (call it v1) and you go include
your second copy (call it v2), v1 will get 'backed up' into the _$ and
_jQuery variables inside v2 and the second copy you include will go
into window.$ and window.jQuery. At this point, if you use the $
function or the jQuery object, you'll be using v2. When you call
jQuery.noConflict(true), it will run against v2 because that's what's
in window.jQuery and it'll take the variables in _$ and _jQuery (which
are v1), put them back into window.$ and window.jQuery, and return you
a copy of v2 for you to put into a variable (called jQv2 for example).
At this point, window.$ and window.jQuery will be v1 and jQv2 will be
v2. So if you want to use v1, you carry on using $(...) or
jQuery.whatever(...) and if you want to use v2, you use
jQv2('#someId') or jQv2.whatever(...).
Hope this makes sense.
George.
On Oct 4, 12:27 am, Glen Lipka [EMAIL PROTECTED] wrote:
We are making a jQuery+stuff script that will go on lots of random pages
with unknown libraries.
Some of those pages will have jQuery. (Variousversions)
If I am including our script last; what is the best way to make sure our
script doesn't interfere with any of the existing page, including old
versionsof jQuery.
Solution #1: We renamed jQuery in our script everywhere to be veryjQuery.
Solution #2: ???
Note: Solution #1 solved the problem, but feels invasive. Is there a
noconflict() way to do this?
Glen
[jQuery] Re: Dynamic attributes selectors
Yep thanks
Andrea
On 13 oct, 16:52, Per Ghosh [EMAIL PROTECTED] wrote:
var forAttr = '#last_name';*$('a[href=forAttr]').text('ciao');*
should be
var forAttr = '#last_name';*$('a[href=' + forAttr + ']').text('ciao');*
**
Hi, I have this small issue that I cannot solve. I look for an element
checking the attribute href: $('a[href='#last_name']').text('ciao'); And
It's fine but if I try to use a variable the selector fail: var forAttr =
'#last_name'; $('a[href=forAttr]').text('ciao'); forAttr is exactly
#last_name Some help??? Thanks Andrea
