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
>
>
