An invalid DOM is unpredictable and difficult to work around. I
would think that the hang up would probably be in jQuery.clean but
I'm not positive. Perhaps there is a better way to handle limiting
the amount of information within the clue tip. Maybe use CSS to set
overflow: hidden along with a set width/height (maybe a max width/
height). Actually I think there is a truncate plugin ... yup, there
is ( http://www.reindel.com/truncate/). I'm not sure if that helps
or not.
--
Brandon Aaron
On 9/22/07, Pops <[EMAIL PROTECTED]> wrote:
Hi Brandon,
Maybe you can assist here as well.
What started this was finding jQuery, actually the jQuery.ClueTip.js
plugin hanging the browser to the point of ending the task. During
the investigation and isolating the code to the testFilter() function,
I found the other .not issue.
Karl and I are not sure at this point, if this a jQuery .not issue or
a bug with the plugin.
The bug manifest itselft when there is a missing end tag, like </div>
in a content. It does not show up with the testFilter()
jQuery.fn.sanitize = function(t) {
return $(this).find('*').andSelf()
.filter( function() {
var $this = $(this);
if ( $this.is(t) ) {
// remove the element from the DOM
$this.remove();
// remove the element from the jQuery collection
return false;
}
// Otherwise keep the element in the jQuery collection
return true;
});
};
//<!--
function testFilter()
{
var s = "";
s = "";
s += "<div style='border: 2px solid silver;'>";
s += "Hi there!";
s += "<img src='http://www.santronics.com/images/
WINSbox-120x120.gif'/>";
s += "<hr style='background: green; height: 10px;'/>";
s += "<script>$('body').append('<button>foobar2</button>');</
script>";
//s += "</div>";
s = $(s).sanitize('script, hr, img');
$("#wcResult").html(s);
}
//-->
</script>
The cluetip used something like this to sanitize the data:
$('a.basic1').cluetip({
ajaxProcess: function(data) {
data = $(data).not('style, meta, link, script, title, hr,
img');
return data;
}
});
If the data had a missing </div>, it would hang the browser.
Commenting out the line:
data = $(data).not('style, meta, link, script, title, hr, img');
avoided the problem. This is what lead me to the other issue.
Now I tried to use your logic:
$('a.basic1').cluetip({
ajaxProcess: function(data) {
data = $(data).sanitize("script, img");
return data;
}
});
and the same thing happens - the browser hangs.
Again, it only happens if there is a missing end tag, which in this
case, can happen where there is a truncation for the preview tip
display.
I was thinking there was a problem with the .multiFilter() which is
where I spent most of my time in resolving the 2nd filtering issue
which sanitize() does seem to resolve now.
But that hang up still happens.
I am wonder if you could duplicate this and/or see where there might
be the problem.
--
HLS
On Sep 22, 8:34 pm, "Brandon Aaron" <[EMAIL PROTECTED]> wrote:
> Oh okay... So, the code is working, it matches only the DIV and
appends that
> DIV. However, that DIV still contains the other elements.
The .not method
> doesn't actually remove elements from the DOM just from the jQuery
> collection. I can see how this can be confusing for what you are
trying to
> achieve. Instead of using .not try using .filter and passing in a
function.
> Maybe like this:
>
> s = $(s)
> .find('*').andSelf()
> .filter( function() {
> var $this = $(this);
> if ( $this.is('script, hr, img') ) {
> // remove the element from the DOM
> $this.remove();
> // remove the element from the jQuery collection
> return false;
> }
> // Otherwise keep the element in the jQuery
collection
> return true;
> });
>
> Hope that helps! :)
>
> --
> Brandon Aaron
>
> On 9/22/07, Pops <[EMAIL PROTECTED] > wrote:
>
>
>
> > Hi Brandon,
>
> > Let me try this ....
>
> > I'm not seeing it work. Here is my test code. I tried all 3
methods:
>
> > <html>
> > <head>
> > <script type='text/javascript' src='/public/js/jquery-1.2.1.js'></
> > script>
> > <script>
> > //<!--
> > function testFilter()
> > {
> > var s = "";
> > s += "<script>$('body').append('<button>foobar1</button>');</
> > script>";
> > s += "<hr style='background: yellow; height: 10px;'/>";
> > s += "<img src='http://www.santronics.com/images/
> > WINSbox-120x120.gif'/>";
> > s += "<div style='border: 2px solid silver;'>";
> > s += "Hi there!";
> > s += "<img src='http://www.santronics.com/images/
> > WINSbox-120x120.gif'/>";
> > s += "<hr style='background: green; height: 10px;'/>";
> > s += "<script>$('body').append('<button>foobar2</button>');</
> > script>";
> > s += "</div>";
> > s += "<img src='http://www.santronics.com/images/
> > WINSbox-120x120.gif'/>";
> > s += "<hr style='background: cyan; height: 10px;'/>";
> > s += "<script>$('body').append('<button>foobar3</button>');</
> > script>";
>
> > //s = $(s).not('script, hr, img');
> > //s = $('*',s).andSelf().not('script, hr, img');
> > s = $('*',s).add(s).not('script, hr, img');
> > $("#wcResult").html(s);
> > }
> > //-->
> > </script>
>
> > </head>
> > <body>
>
> > <button onclick="testFilter();">test filter</button>
>
> > <div id="wcResult" style="padding: 10px; border: 1px solid
black;">
> > </div>
> > </body>
> > </html>
>
> > With all methods, the top and bottom elements are filtered,
but the
> > elements within the <div> remain.
>
> > What am I missing?
>
> > BTW, for this real case scenario, my workaround is to use .text
(), but
> > I will need to give people the option to some minimum secured
html.
>
> > --
> > HLS
>
> > On Sep 22, 1:39 pm, "Brandon Aaron" <[EMAIL PROTECTED]>
wrote:
> > > The .not and .filter methods only run against the matched
elements
> > within
> > > the jQuery collection. In order to filter all elements you
will need to
> > add
> > > all elements to the collection. I think something like this
should work
> > > (untested).
>
> > > $('*', data).andSelf().not('style, meta, link, script, title,
img');
>
> > > andSelf is a jQuery 1.2 method. If you are using an earlier
version you
> > > could use $('*', data).add(data)
>
> > > --
> > > Brandon Aaron
>
> > > On 9/22/07, Pops <[EMAIL PROTECTED] > wrote:
>
> > > > I noticed some example using something like so:
>
> > > > data = $(data).not("style, meta, link, script, title");
>
> > > > to filter out thes tags.
>
> > > > I tried using this to filter img as well:
>
> > > > data = $(data).not("style, meta, link, script, title, img");
>
> > > > and what I noticed is that this doesn't work if the
elements are
> > > > within other elements.
>
> > > > For example, I have this simple example:
>
> > > > <img src="1">
> > > > <div>
> > > > <img src="2">
> > > > </div>
> > > > <img src="3">
>
> > > > In this case, only img 1 and 3 will be filtered out. img 2
will
> > > > remain.
>
> > > > I am wondering if that is proper behavior for .not(elements)?
>
> > > > My goal is to filter all elements regardless of node or branch
> > > > depth.
>
> > > > Thanks
>
> > > > --
> > > > HLS
