[jQuery] Re: .replaceWith Issue

[Matthew Wehrle]

Brilliant! Thanks very much. :D

[jQuery] Re: .replaceWith Issue

[Ricardo]

IE doesn't handle custom elements well, make them all s or
s and it should be fine. Or if you need to keep it that way, try
putting this before all scripts:

if( $.browser.msie ){
  $.each('Name,Role,Interests,Words'.split(','), function(){
  document.createElement(this);
  });
};

creating an element with the custom tagnames at load forces IE to
recognize them for some reason.

On Aug 18, 7:21 pm, Matthew Wehrle  wrote:
> Hey guys,
>
> I'm having a bit of an issue with the site I'm building at the moment.
> It's currently underhttp://www.swfmania.co.uk/dotcommonwith the CSS
> athttp://www.swfmania.co.uk/dotcommon/style.cssand the relevant
> jQuery file athttp://www.swfmania.co.uk/dotcommon/tabs.js
>
> If you're using Firefox or Chrome you'll see that upon clicking the
> tabs, the image and text all changes. Happy days. However in Internet
> Explorer the text doesn't change, it merely adds onto itself (This
> will be a lot clearer if you check it out on the site.)
>
> Just wondering if anyone has any thoughts?
>
> Thanks, Matt :D

[jQuery] Re: replaceWith()

[ProfCrazyHorse]

After testing your statements, I see you are basically correct.
Contents of all my h2s were replaced by the content of the first one
(no concatenation).  The iteration (using each) and using html()
instead of text() seems to have worked.

Next, I will try the wrapInner technique...

Thank you!

On Aug 5, 11:05 am, mkmanning  wrote:
> The solution doesn't work. $("h2").text() concatenates all the text
> from every h2 (it would also miss any markup inside the h2). If you
> want to extract the contents into a variable, then you'll have to
> iterate over the collection of h2's to do the manipulation.
>
> There are other ways to accomplish this in jQuery. Try this:
>
> $("h2").wrapInner(document.createElement('h3')).find('h3').replaceAll
> ('h2');
>
> On Aug 5, 8:33 am, "Cesar Sanz"  wrote:
>
> > @ProfCrazyHorse:
> > Your solution seems simple.. why to change something that is working fine?
>
> >   - Original Message -----
> >   From: Charlie
> >   To: jquery-en@googlegroups.com
> >   Sent: Wednesday, August 05, 2009 6:38 AM
> >   Subject: [jQuery] Re: replaceWith()
>
> >   there are lots of ways in jQuery to create relationships between 
> > selectors depending on your markup. Without seeing any markup it's hard for 
> > anyone else to help you create those connections
>
> >   ProfCrazyHorse wrote:
> > I want to replace one element with another, and keep the element
> > contents intact.  For example, here, I'm replacing all h2 elements
> > with h3's:
>
> > $("a #replaceWith").click(function () {
> >    var h2Text = $("h2").text();
> >    $("h2").replaceWith("" + h2Text + "");
> > });
>
> > I have two questions.
>
> > First, how can I do this more simply?  I tried the following, but $
> > (this) refers to the anchor tag and not the h2 selector.  Is there a
> > way in jQuery to refer to the selector, i.e. $("h2")?
>
> > $("a #replaceWith").click(function () {
> >    $("h2").replaceWith("" + $(this).text + "");
> > });
>
> > My second question:  Is there a method more appropriate than
> > replaceWith to replace certain elements on the apge with others?
>
> > Thank you!

[jQuery] Re: replaceWith()

[mkmanning]

The solution doesn't work. $("h2").text() concatenates all the text
from every h2 (it would also miss any markup inside the h2). If you
want to extract the contents into a variable, then you'll have to
iterate over the collection of h2's to do the manipulation.

There are other ways to accomplish this in jQuery. Try this:

$("h2").wrapInner(document.createElement('h3')).find('h3').replaceAll
('h2');


On Aug 5, 8:33 am, "Cesar Sanz"  wrote:
> @ProfCrazyHorse:
> Your solution seems simple.. why to change something that is working fine?
>
>
>
>   - Original Message -
>   From: Charlie
>   To: jquery-en@googlegroups.com
>   Sent: Wednesday, August 05, 2009 6:38 AM
>   Subject: [jQuery] Re: replaceWith()
>
>   there are lots of ways in jQuery to create relationships between selectors 
> depending on your markup. Without seeing any markup it's hard for anyone else 
> to help you create those connections
>
>   ProfCrazyHorse wrote:
> I want to replace one element with another, and keep the element
> contents intact.  For example, here, I'm replacing all h2 elements
> with h3's:
>
> $("a #replaceWith").click(function () {
>    var h2Text = $("h2").text();
>    $("h2").replaceWith("" + h2Text + "");
> });
>
> I have two questions.
>
> First, how can I do this more simply?  I tried the following, but $
> (this) refers to the anchor tag and not the h2 selector.  Is there a
> way in jQuery to refer to the selector, i.e. $("h2")?
>
> $("a #replaceWith").click(function () {
>    $("h2").replaceWith("" + $(this).text + "");
> });
>
> My second question:  Is there a method more appropriate than
> replaceWith to replace certain elements on the apge with others?
>
> Thank you!

[jQuery] Re: replaceWith()

[Cesar Sanz]

@ProfCrazyHorse:
Your solution seems simple.. why to change something that is working fine?

  - Original Message - 
  From: Charlie 
  To: jquery-en@googlegroups.com 
  Sent: Wednesday, August 05, 2009 6:38 AM
  Subject: [jQuery] Re: replaceWith()


  there are lots of ways in jQuery to create relationships between selectors 
depending on your markup. Without seeing any markup it's hard for anyone else 
to help you create those connections

 

  ProfCrazyHorse wrote: 
I want to replace one element with another, and keep the element
contents intact.  For example, here, I'm replacing all h2 elements
with h3's:

$("a #replaceWith").click(function () {
   var h2Text = $("h2").text();
   $("h2").replaceWith("" + h2Text + "");
});

I have two questions.

First, how can I do this more simply?  I tried the following, but $
(this) refers to the anchor tag and not the h2 selector.  Is there a
way in jQuery to refer to the selector, i.e. $("h2")?

$("a #replaceWith").click(function () {
   $("h2").replaceWith("" + $(this).text + "");
});

My second question:  Is there a method more appropriate than
replaceWith to replace certain elements on the apge with others?

Thank you!

  

[jQuery] Re: replaceWith()

[Charlie]

there are lots of ways in jQuery to create relationships between
selectors depending on your markup. Without seeing any markup it's hard
for anyone else to help you create those connections

   

ProfCrazyHorse wrote:

  I want to replace one element with another, and keep the element
contents intact.  For example, here, I'm replacing all h2 elements
with h3's:

$("a #replaceWith").click(function () {
   var h2Text = $("h2").text();
   $("h2").replaceWith("" + h2Text + "");
});

I have two questions.

First, how can I do this more simply?  I tried the following, but $
(this) refers to the anchor tag and not the h2 selector.  Is there a
way in jQuery to refer to the selector, i.e. $("h2")?

$("a #replaceWith").click(function () {
   $("h2").replaceWith("" + $(this).text + "");
});

My second question:  Is there a method more appropriate than
replaceWith to replace certain elements on the apge with others?

Thank you!

  

[jQuery] Re: replaceWith returns the replaced element

[tchvil]

Richard,
Thanks for your reply.
It is neat but it leaks memory on IE.
While the following not:

$.fn.replaceWithAndReturnNew = function(html){
var div = document.createElement('div');
var replaced = this[0];
replaced.parentNode.replaceChild(div, replaced);
div.innerHTML = html;
var replacer = div.firstChild;
div.parentNode.replaceChild(replacer, div);
return $(replacer);};

The trick here is to insert the HTML after placing the element in the
DOM.
I've set a 1000 time loop over the example 4 at the page
http://beebole.com/pure/getting_started.html#example4
And with IE it's clear the memory is climbing fast.

Not sure this can be a bug for jQuery, as we are a bit extreme here on
the innerHTML usage.
Cheers,


On Sep 20, 2:31 pm, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
> $.fn.replaceWithAndReturnNew = function(htmls){
>   var replacer = $(htmls);
>   $(this).replaceWith(replacer);
>   return replacer;
>
> };
>
> - Richard
>
> On Sat, Sep 20, 2008 at 3:31 AM, tchvil <[EMAIL PROTECTED]> wrote:
>
> > Thanks a lot for your replies.
> > Ok, I guess there are good reasons to return the replaced object.
>
> > Now my question becomes... is there a better jQuery way of doing this
> > quite ugly thing:
>
> > $.fn.replaceWithAndReturnNew = function(htmls){
> >        var replaced = $(this)[0];
> >        var div = document.createElement('DIV');
> >        div.innerHTML = htmls;
> >        var replacer = div.firstChild;
> >        replaced.parentNode.replaceChild(replacer, replaced);
> >        return $(replacer);};
>
> > There's a working page there:http://friendpaste.com/GkTTkwQV
>
> > Cheers,
>
> > On Sep 18, 1:09 am, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> > > Sorry, I missunderstood the initial (and subsequential) posts.
> > > The present behavior (return the initially matched element) is the
> > > correct one. That's what I'd expect and it matches the behavior of
> > > remove(), append(), etc.
>
> > > Don't file any bug report :)
>
> > > Thanks Richard for pinging me about this.
>
> > > --
> > > Ariel Fleslerhttp://flesler.blogspot.com/
>
> > > On Sep 17, 6:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
>
> > > > I think this is a bug, I'd expectreplaceWithto return the old set,
> > > > just like append/etc.
>
> > > > Can you (tchvil) file a bug with a test case ? put it under core,
> > > > assigned to me.
>
> > > > Thanks
> > > > --
> > > > Ariel Fleslerhttp://flesler.blogspot.com/
>
> > > > On Sep 17, 8:04 am, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
>
> > > > > On Wed, Sep 17, 2008 at 6:58 AM, Karl Rudd <[EMAIL PROTECTED]>
> > wrote:
>
> > > > > > Nah, it's not a bug.
>
> > > > > >replaceWith( content )  Returns: jQuery
> > > > > > Replaces all matched elements with the specified HTML or DOM
> > elements.
> > > > > > This returns the JQuery element that was just replaced, which has
> > been
> > > > > > removed from the DOM
>
> > > > > > (http://docs.jquery.com/Manipulation)
>
> > > > > It may be well documented, but that doesn't mean it can't be a bug.
> > ;)
>
> > > > > > It's like doing a remove(), followed by an append(). Like
> > "remove()"
> > > > > > it also "returns" (well keeps in the jQuery collection) the
> > elements
> > > > > > it removes.
>
> > > > > This is quite a fundamental difference. Since .remove() returns a DOM
> > > > > Element, it's not chainable. SincereplaceWith() returns a chainable
> > jQuery
> > > > > object, it's reasonable to expect methods you call on that chain to
> > effect
> > > > > the new element, not your now removed/disconnected element(s). Like
> > many
> > > > > other methods, it could modify the chain. And if you wanted to get
> > back to
> > > > > the previous chain, you could call .end(). My 2c.
>
> > > > > - Richard

[jQuery] Re: replaceWith returns the replaced element

[tchvil]

This one is slightly better altough not in jQuery style:

$.fn.replaceWithAndReturnNew = function(html){
var elm = $(this)[0].cloneNode(false);
$(this).after(elm).remove();
elm.innerHTML = html;
return $(elm);};


On Sep 20, 9:31 am, tchvil <[EMAIL PROTECTED]> wrote:
> Thanks a lot for your replies.
> Ok, I guess there are good reasons to return the replaced object.
>
> Now my question becomes... is there a better jQuery way of doing this
> quite ugly thing:
>
> $.fn.replaceWithAndReturnNew = function(htmls){
>         var replaced = $(this)[0];
>         var div = document.createElement('DIV');
>         div.innerHTML = htmls;
>         var replacer = div.firstChild;
>         replaced.parentNode.replaceChild(replacer, replaced);
>         return $(replacer);};
>
> There's a working page there:http://friendpaste.com/GkTTkwQV
>
> Cheers,
>
> On Sep 18, 1:09 am, Ariel Flesler <[EMAIL PROTECTED]> wrote:
>
> > Sorry, I missunderstood the initial (and subsequential) posts.
> > The present behavior (return the initially matched element) is the
> > correct one. That's what I'd expect and it matches the behavior of
> > remove(), append(), etc.
>
> > Don't file any bug report :)
>
> > Thanks Richard for pinging me about this.
>
> > --
> > Ariel Fleslerhttp://flesler.blogspot.com/
>
> > On Sep 17, 6:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
>
> > > I think this is a bug, I'd expectreplaceWithto return the old set,
> > > just like append/etc.
>
> > > Can you (tchvil) file a bug with a test case ? put it under core,
> > > assigned to me.
>
> > > Thanks
> > > --
> > > Ariel Fleslerhttp://flesler.blogspot.com/
>
> > > On Sep 17, 8:04 am, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
>
> > > > On Wed, Sep 17, 2008 at 6:58 AM, Karl Rudd <[EMAIL PROTECTED]> wrote:
>
> > > > > Nah, it's not a bug.
>
> > > > >replaceWith( content )  Returns: jQuery
> > > > > Replaces all matched elements with the specified HTML or DOM elements.
> > > > > This returns the JQuery element that was just replaced, which has been
> > > > > removed from the DOM
>
> > > > > (http://docs.jquery.com/Manipulation)
>
> > > > It may be well documented, but that doesn't mean it can't be a bug. ;)
>
> > > > > It's like doing a remove(), followed by an append(). Like "remove()"
> > > > > it also "returns" (well keeps in the jQuery collection) the elements
> > > > > it removes.
>
> > > > This is quite a fundamental difference. Since .remove() returns a DOM
> > > > Element, it's not chainable. SincereplaceWith() returns a chainable 
> > > > jQuery
> > > > object, it's reasonable to expect methods you call on that chain to 
> > > > effect
> > > > the new element, not your now removed/disconnected element(s). Like many
> > > > other methods, it could modify the chain. And if you wanted to get back 
> > > > to
> > > > the previous chain, you could call .end(). My 2c.
>
> > > > - Richard

[jQuery] Re: replaceWith returns the replaced element

[Richard D. Worth]

$.fn.replaceWithAndReturnNew = function(htmls){
  var replacer = $(htmls);
  $(this).replaceWith(replacer);
  return replacer;
};

- Richard

On Sat, Sep 20, 2008 at 3:31 AM, tchvil <[EMAIL PROTECTED]> wrote:

>
> Thanks a lot for your replies.
> Ok, I guess there are good reasons to return the replaced object.
>
> Now my question becomes... is there a better jQuery way of doing this
> quite ugly thing:
>
> $.fn.replaceWithAndReturnNew = function(htmls){
>var replaced = $(this)[0];
>var div = document.createElement('DIV');
>div.innerHTML = htmls;
>var replacer = div.firstChild;
>replaced.parentNode.replaceChild(replacer, replaced);
>return $(replacer);};
>
> There's a working page there: http://friendpaste.com/GkTTkwQV
>
> Cheers,
>
> On Sep 18, 1:09 am, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> > Sorry, I missunderstood the initial (and subsequential) posts.
> > The present behavior (return the initially matched element) is the
> > correct one. That's what I'd expect and it matches the behavior of
> > remove(), append(), etc.
> >
> > Don't file any bug report :)
> >
> > Thanks Richard for pinging me about this.
> >
> > --
> > Ariel Fleslerhttp://flesler.blogspot.com/
> >
> > On Sep 17, 6:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> >
> > > I think this is a bug, I'd expectreplaceWithto return the old set,
> > > just like append/etc.
> >
> > > Can you (tchvil) file a bug with a test case ? put it under core,
> > > assigned to me.
> >
> > > Thanks
> > > --
> > > Ariel Fleslerhttp://flesler.blogspot.com/
> >
> > > On Sep 17, 8:04 am, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
> >
> > > > On Wed, Sep 17, 2008 at 6:58 AM, Karl Rudd <[EMAIL PROTECTED]>
> wrote:
> >
> > > > > Nah, it's not a bug.
> >
> > > > >replaceWith( content )  Returns: jQuery
> > > > > Replaces all matched elements with the specified HTML or DOM
> elements.
> > > > > This returns the JQuery element that was just replaced, which has
> been
> > > > > removed from the DOM
> >
> > > > > (http://docs.jquery.com/Manipulation)
> >
> > > > It may be well documented, but that doesn't mean it can't be a bug.
> ;)
> >
> > > > > It's like doing a remove(), followed by an append(). Like
> "remove()"
> > > > > it also "returns" (well keeps in the jQuery collection) the
> elements
> > > > > it removes.
> >
> > > > This is quite a fundamental difference. Since .remove() returns a DOM
> > > > Element, it's not chainable. SincereplaceWith() returns a chainable
> jQuery
> > > > object, it's reasonable to expect methods you call on that chain to
> effect
> > > > the new element, not your now removed/disconnected element(s). Like
> many
> > > > other methods, it could modify the chain. And if you wanted to get
> back to
> > > > the previous chain, you could call .end(). My 2c.
> >
> > > > - Richard
>

[jQuery] Re: replaceWith returns the replaced element

[tchvil]

Thanks a lot for your replies.
Ok, I guess there are good reasons to return the replaced object.

Now my question becomes... is there a better jQuery way of doing this
quite ugly thing:

$.fn.replaceWithAndReturnNew = function(htmls){
var replaced = $(this)[0];
var div = document.createElement('DIV');
div.innerHTML = htmls;
var replacer = div.firstChild;
replaced.parentNode.replaceChild(replacer, replaced);
return $(replacer);};

There's a working page there: http://friendpaste.com/GkTTkwQV

Cheers,

On Sep 18, 1:09 am, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> Sorry, I missunderstood the initial (and subsequential) posts.
> The present behavior (return the initially matched element) is the
> correct one. That's what I'd expect and it matches the behavior of
> remove(), append(), etc.
>
> Don't file any bug report :)
>
> Thanks Richard for pinging me about this.
>
> --
> Ariel Fleslerhttp://flesler.blogspot.com/
>
> On Sep 17, 6:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
>
> > I think this is a bug, I'd expectreplaceWithto return the old set,
> > just like append/etc.
>
> > Can you (tchvil) file a bug with a test case ? put it under core,
> > assigned to me.
>
> > Thanks
> > --
> > Ariel Fleslerhttp://flesler.blogspot.com/
>
> > On Sep 17, 8:04 am, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
>
> > > On Wed, Sep 17, 2008 at 6:58 AM, Karl Rudd <[EMAIL PROTECTED]> wrote:
>
> > > > Nah, it's not a bug.
>
> > > >replaceWith( content )  Returns: jQuery
> > > > Replaces all matched elements with the specified HTML or DOM elements.
> > > > This returns the JQuery element that was just replaced, which has been
> > > > removed from the DOM
>
> > > > (http://docs.jquery.com/Manipulation)
>
> > > It may be well documented, but that doesn't mean it can't be a bug. ;)
>
> > > > It's like doing a remove(), followed by an append(). Like "remove()"
> > > > it also "returns" (well keeps in the jQuery collection) the elements
> > > > it removes.
>
> > > This is quite a fundamental difference. Since .remove() returns a DOM
> > > Element, it's not chainable. SincereplaceWith() returns a chainable jQuery
> > > object, it's reasonable to expect methods you call on that chain to effect
> > > the new element, not your now removed/disconnected element(s). Like many
> > > other methods, it could modify the chain. And if you wanted to get back to
> > > the previous chain, you could call .end(). My 2c.
>
> > > - Richard

[jQuery] Re: replaceWith returns the replaced element

[Richard D. Worth]

On Wed, Sep 17, 2008 at 4:58 PM, Karl Rudd <[EMAIL PROTECTED]> wrote:

>
> Err remove() is chainable. It doesn't "return a DOM element", it
> "keeps hold" of the elements that it was called to remove from the
> DOM. So it acts just like replaceWith().
>
> There was a debate in the early stages of jQuery about whether or not
> methods (not including the base $/jQuery function) that created new
> objects should "select" those objects. As can be seen by the current
> state of things, it was decided against.


You're right. Thanks.

- Richard

[jQuery] Re: replaceWith returns the replaced element

[Ariel Flesler]

Sorry, I missunderstood the initial (and subsequential) posts.
The present behavior (return the initially matched element) is the
correct one. That's what I'd expect and it matches the behavior of
remove(), append(), etc.

Don't file any bug report :)

Thanks Richard for pinging me about this.

--
Ariel Flesler
http://flesler.blogspot.com/

On Sep 17, 6:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> I think this is a bug, I'd expect replaceWith to return the old set,
> just like append/etc.
>
> Can you (tchvil) file a bug with a test case ? put it under core,
> assigned to me.
>
> Thanks
> --
> Ariel Fleslerhttp://flesler.blogspot.com/
>
> On Sep 17, 8:04 am, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
>
> > On Wed, Sep 17, 2008 at 6:58 AM, Karl Rudd <[EMAIL PROTECTED]> wrote:
>
> > > Nah, it's not a bug.
>
> > > replaceWith( content )  Returns: jQuery
> > > Replaces all matched elements with the specified HTML or DOM elements.
> > > This returns the JQuery element that was just replaced, which has been
> > > removed from the DOM
>
> > > (http://docs.jquery.com/Manipulation)
>
> > It may be well documented, but that doesn't mean it can't be a bug. ;)
>
> > > It's like doing a remove(), followed by an append(). Like "remove()"
> > > it also "returns" (well keeps in the jQuery collection) the elements
> > > it removes.
>
> > This is quite a fundamental difference. Since .remove() returns a DOM
> > Element, it's not chainable. Since replaceWith() returns a chainable jQuery
> > object, it's reasonable to expect methods you call on that chain to effect
> > the new element, not your now removed/disconnected element(s). Like many
> > other methods, it could modify the chain. And if you wanted to get back to
> > the previous chain, you could call .end(). My 2c.
>
> > - Richard

[jQuery] Re: replaceWith returns the replaced element

[Ariel Flesler]

I think this is a bug, I'd expect replaceWith to return the old set,
just like append/etc.

Can you (tchvil) file a bug with a test case ? put it under core,
assigned to me.

Thanks
--
Ariel Flesler
http://flesler.blogspot.com/

On Sep 17, 8:04 am, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
> On Wed, Sep 17, 2008 at 6:58 AM, Karl Rudd <[EMAIL PROTECTED]> wrote:
>
> > Nah, it's not a bug.
>
> > replaceWith( content )  Returns: jQuery
> > Replaces all matched elements with the specified HTML or DOM elements.
> > This returns the JQuery element that was just replaced, which has been
> > removed from the DOM
>
> > (http://docs.jquery.com/Manipulation)
>
> It may be well documented, but that doesn't mean it can't be a bug. ;)
>
>
>
> > It's like doing a remove(), followed by an append(). Like "remove()"
> > it also "returns" (well keeps in the jQuery collection) the elements
> > it removes.
>
> This is quite a fundamental difference. Since .remove() returns a DOM
> Element, it's not chainable. Since replaceWith() returns a chainable jQuery
> object, it's reasonable to expect methods you call on that chain to effect
> the new element, not your now removed/disconnected element(s). Like many
> other methods, it could modify the chain. And if you wanted to get back to
> the previous chain, you could call .end(). My 2c.
>
> - Richard

[jQuery] Re: replaceWith returns the replaced element

[Karl Rudd]

Err remove() is chainable. It doesn't "return a DOM element", it
"keeps hold" of the elements that it was called to remove from the
DOM. So it acts just like replaceWith().

There was a debate in the early stages of jQuery about whether or not
methods (not including the base $/jQuery function) that created new
objects should "select" those objects. As can be seen by the current
state of things, it was decided against.

Karl Rudd

On Wed, Sep 17, 2008 at 9:04 PM, Richard D. Worth <[EMAIL PROTECTED]> wrote:
>
> On Wed, Sep 17, 2008 at 6:58 AM, Karl Rudd <[EMAIL PROTECTED]> wrote:
>>
>> Nah, it's not a bug.
>>
>> replaceWith( content )  Returns: jQuery
>> Replaces all matched elements with the specified HTML or DOM elements.
>> This returns the JQuery element that was just replaced, which has been
>> removed from the DOM
>>
>> ( http://docs.jquery.com/Manipulation )
>
> It may be well documented, but that doesn't mean it can't be a bug. ;)
>
>>
>> It's like doing a remove(), followed by an append(). Like "remove()"
>> it also "returns" (well keeps in the jQuery collection) the elements
>> it removes.
>
> This is quite a fundamental difference. Since .remove() returns a DOM
> Element, it's not chainable. Since replaceWith() returns a chainable jQuery
> object, it's reasonable to expect methods you call on that chain to effect
> the new element, not your now removed/disconnected element(s). Like many
> other methods, it could modify the chain. And if you wanted to get back to
> the previous chain, you could call .end(). My 2c.
>
> - Richard
>

[jQuery] Re: replaceWith returns the replaced element

[Richard D. Worth]

On Wed, Sep 17, 2008 at 6:58 AM, Karl Rudd <[EMAIL PROTECTED]> wrote:

>
> Nah, it's not a bug.
>
> replaceWith( content )  Returns: jQuery
> Replaces all matched elements with the specified HTML or DOM elements.
> This returns the JQuery element that was just replaced, which has been
> removed from the DOM
>
> ( http://docs.jquery.com/Manipulation )


It may be well documented, but that doesn't mean it can't be a bug. ;)


>
> It's like doing a remove(), followed by an append(). Like "remove()"
> it also "returns" (well keeps in the jQuery collection) the elements
> it removes.


This is quite a fundamental difference. Since .remove() returns a DOM
Element, it's not chainable. Since replaceWith() returns a chainable jQuery
object, it's reasonable to expect methods you call on that chain to effect
the new element, not your now removed/disconnected element(s). Like many
other methods, it could modify the chain. And if you wanted to get back to
the previous chain, you could call .end(). My 2c.

- Richard

[jQuery] Re: replaceWith returns the replaced element

[Karl Rudd]

Nah, it's not a bug.

replaceWith( content )  Returns: jQuery
Replaces all matched elements with the specified HTML or DOM elements.
This returns the JQuery element that was just replaced, which has been
removed from the DOM

( http://docs.jquery.com/Manipulation )

It's like doing a remove(), followed by an append(). Like "remove()"
it also "returns" (well keeps in the jQuery collection) the elements
it removes.

Karl Rudd

On Wed, Sep 17, 2008 at 8:35 PM, Richard D. Worth <[EMAIL PROTECTED]> wrote:
> This sounds like a bug to me. Better raise it on the jQuery Dev list:
>
> http://groups.google.com/group/jquery-dev/
>
> - Richard
>
> On Tue, Sep 16, 2008 at 4:58 AM, tchvil <[EMAIL PROTECTED]> wrote:
>>
>> Hi,
>> replaceWith returns the JQuery element that was just replaced.
>>
>> In the example below:
>> $( 'div#old' ).replaceWith( 'new' ).html()
>>
>> It is the html of the old div that is returned.
>> Is there another set of commands to get the new one returned?
>>
>> Thanks,
>> tchvil
>>
>>
>> Here is a working example:
>>
>> http://www.w3.org/
>> TR/html4/strict.dtd">
>> 
>>
>>> src="http://jqueryjs.googlecode.com/
>> files/jquery-1.2.6.pack.js">
>>ReplaceWith Chain
>>
>>
>>old
>>
>>
>>  alert($('div#old').replaceWith('
new
').html());
>>
>>
>> 
>>
>
>

[jQuery] Re: replaceWith returns the replaced element

[Richard D. Worth]

This sounds like a bug to me. Better raise it on the jQuery Dev list:

http://groups.google.com/group/jquery-dev/

- Richard

On Tue, Sep 16, 2008 at 4:58 AM, tchvil <[EMAIL PROTECTED]> wrote:

>
> Hi,
> replaceWith returns the JQuery element that was just replaced.
>
> In the example below:
> $( 'div#old' ).replaceWith( 'new' ).html()
>
> It is the html of the old div that is returned.
> Is there another set of commands to get the new one returned?
>
> Thanks,
> tchvil
>
>
> Here is a working example:
>
> http://www.w3.org/
> TR/html4/strict.dtd ">
> 
>
>http://jqueryjs.googlecode.com/
> files/jquery-1.2.6.pack.js<http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js>
> ">
>ReplaceWith Chain
>
>
>old
>
>
>  alert($('div#old').replaceWith('
new
').html());
>
>
> 
>
>

[jQuery] Re: replaceWith -- Use with Classes

[vanoosterhout]

Thanks Karl,

Perfect.  Worked like charm.

Christopher

On Jan 25, 2:03 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> I can't build the whole thing for you because I don't know what is  
> being clicked and which element's class you want changed, but in  
> general you can manipulate classes with .addClass('some-class')  
> and .removeClass('optional-class-name') and .toggleClass('some-class').
>
> You'll find these methods (and more!) here:http://docs.jquery.com/Attributes/
>
> --Karl
> _
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Jan 25, 2008, at 12:23 PM, vanoosterhout wrote:
>
>
>
>
>
> > I know this may be a pretty elementary question, but I am trying to
> > figure out how to change a class based on a click.  I think should be
> > able to do this with replaceWith, but for some reason I am struggling.
>
> > I have this:
>
> > 1.Boat Select
> > 2.Halyard Length
> > 3.Shackle Select
>
> > and for example would like to change it to:
>
> > 1.Boat Select
> > 2.Halyard Length
> > 3.Shackle Select
>
> > Basically I want to be able to change the class ... and nothing else.
> > If anyone could provide a snippet of sample code I would be very
> > thankful.
>
> > Thanks,
>
> > Christopher- Hide quoted text -
>
> - Show quoted text -

[jQuery] Re: replaceWith -- Use with Classes

[Karl Swedberg]

I can't build the whole thing for you because I don't know what is  
being clicked and which element's class you want changed, but in  
general you can manipulate classes with .addClass('some-class')  
and .removeClass('optional-class-name') and .toggleClass('some-class').


You'll find these methods (and more!) here:
http://docs.jquery.com/Attributes/

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 25, 2008, at 12:23 PM, vanoosterhout wrote:



I know this may be a pretty elementary question, but I am trying to
figure out how to change a class based on a click.  I think should be
able to do this with replaceWith, but for some reason I am struggling.

I have this:

1.Boat Select
2.Halyard Length
3.Shackle Select

and for example would like to change it to:

1.Boat Select
2.Halyard Length
3.Shackle Select


Basically I want to be able to change the class ... and nothing else.
If anyone could provide a snippet of sample code I would be very
thankful.

Thanks,

Christopher

[jQuery] Re: .replaceWith() broken in Firefox 2 I think

[Steve Finkelstein]

John,

Well figures .. it is my code. .html() certainly does the trick. I
wasn't aware that replaceWith removes stuff from the DOM indefinitely.

A, thanks for saving me from hours of troubleshooting. I really
really appreciate it.

- sf

On 9/24/07, John Resig <[EMAIL PROTECTED]> wrote:
>
> Are you meaning to do .html(..) instead of replaceWith? replaceWith
> completely removes the element (which means that when it's called the
> second time, nothing happens, since the element no longer exists).
>
>  Whereas .html() simply replaces the contents of the element.
>
> --John
>
> On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
> >
> > This is actually happening in IE7 also. Is it possible that something
> > is hosed with my code? I'm more confident it's that than a broken
> > replaceWith() but I'd really like to know why it only works once, and
> > then I need a page refresh for that "ajax" effect.
> >
> > - sf
> >
> > On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
> > > Hi all,
> > >
> > > So I have a simple script which essentially uses .replaceWith() to
> > > replace the containing elements HTML with a success callback. This
> > > works fine the first time I invoke a function which calls
> > > .replaceWith() in the success call back, but any subsequent calls
> > > leaves the DOM unmodified.
> > >
> > > Here's an example screenshot of what my page looks like upon a random 
> > > page load.
> > >
> > > http://catalyst.httpd.org/tmp/1.png
> > >
> > > Ok so I have 4 notes. Let's delete one:
> > >
> > > http://catalyst.httpd.org/tmp/2.png
> > >
> > > Perfect, it's gone:
> > >
> > > http://catalyst.httpd.org/tmp/3.png
> > >
> > > Here's where the problem occurs... Let's delete another
> > >
> > > http://catalyst.httpd.org/tmp/4.png
> > >
> > > Hmmm, it didn't disappear from the DOM this time:
> > >
> > > http://catalyst.httpd.org/tmp/5.png
> > >
> > > The OB/GYN note is still there as rendered by the browser, however the
> > > server-side script surely wiped it:
> > >
> > > mysql> select id,name from ms_notes where id="CN";
> > > Empty set (0.00 sec)
> > >
> > > Here's what my code looks like to remove the note:
> > >
> > > function removeNote(id,name) {
> > > if(confirm("Are you sure you wish to delete: "+name+"?")) {
> > > // ajax code here to remove note.
> > > $.ajax({
> > >   url: "/dbserver.php",
> > >   type: "POST",
> > >   data: "delete="+id,
> > >   cache: false,
> > >   success: function(html) {
> > > $("#alpha_notes").empty();
> > > $("#alpha_notes").replaceWith(html);
> > >   }
> > > });
> > > }
> > > }
> > >
> > > Very important thing to factor in, is if I do a hard refresh on the
> > > page, here are the results... a missing OB/GYN note, which is the way
> > > it should be:
> > >
> > > http://catalyst.httpd.org/tmp/6.png
> > >
> > > Any idea folks? Would really appreciate any help. Firebug also shows
> > > that in its response to my POST call that the notes are not there in
> > > its table rendering. My server-side code looks like this:
> > >
> > > if($_POST['delete']) {
> > > global $db_alpha, $link;
> > > $alpha_note_set = array();
> > > $db = mysql_select_db($db_alpha, $link);
> > > if(!$db) {
> > > die("Can't connect to alpha, please contact steve.");
> > > }
> > >
> > > $sql = "DELETE from ms_notes
> > > WHERE ID='".$_POST['delete']
> > > ."' LIMIT 1";
> > > $result='';
> > > $result = mysql_query("$sql");
> > > if(!$result) { die("Something is broken... "); }
> > >
> > > $sql = "SELECT NAME,ID from ms_notes";
> > > $alpha_result_set = @mysql_query("$sql");
> > > $row='';
> > > if(mysql_num_rows($alpha_result_set)==0) { $html = "There are zero
> > > notes left to process in Alpha's database"; echo $html; exit; }
> > > while($row = @mysql_fetch_array($alpha_result_set, MYSQL_ASSOC)) {
> > > $alpha_note_set[] = $row; }
> > > $html='';
> > > $html = '';
> > > $html .= '';
> > > // count here basically just keeps track of a
> > > // neatly aligned table
> > > $count=0;
> > > foreach($alpha_note_set as $note) {
> > > $html .= " > > onclick=\"removeNote('".$note[ID]."','".$note[NAME]."')\">delete  $note[NAME]";
> > > $count++;
> > > if(($count % 2 == 0)) {
> > > $html .= "";
> > > }
> > > }
> > > $html .= '';
> > >
> > > // send this sucker back to the view.
> > > echo $html;
> > > }
> > >
> > > Thanks all.
> > >
> > > - sf
> > >
> >
>

[jQuery] Re: .replaceWith() broken in Firefox 2 I think

[John Resig]

Are you meaning to do .html(..) instead of replaceWith? replaceWith
completely removes the element (which means that when it's called the
second time, nothing happens, since the element no longer exists).

 Whereas .html() simply replaces the contents of the element.

--John

On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
>
> This is actually happening in IE7 also. Is it possible that something
> is hosed with my code? I'm more confident it's that than a broken
> replaceWith() but I'd really like to know why it only works once, and
> then I need a page refresh for that "ajax" effect.
>
> - sf
>
> On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
> > Hi all,
> >
> > So I have a simple script which essentially uses .replaceWith() to
> > replace the containing elements HTML with a success callback. This
> > works fine the first time I invoke a function which calls
> > .replaceWith() in the success call back, but any subsequent calls
> > leaves the DOM unmodified.
> >
> > Here's an example screenshot of what my page looks like upon a random page 
> > load.
> >
> > http://catalyst.httpd.org/tmp/1.png
> >
> > Ok so I have 4 notes. Let's delete one:
> >
> > http://catalyst.httpd.org/tmp/2.png
> >
> > Perfect, it's gone:
> >
> > http://catalyst.httpd.org/tmp/3.png
> >
> > Here's where the problem occurs... Let's delete another
> >
> > http://catalyst.httpd.org/tmp/4.png
> >
> > Hmmm, it didn't disappear from the DOM this time:
> >
> > http://catalyst.httpd.org/tmp/5.png
> >
> > The OB/GYN note is still there as rendered by the browser, however the
> > server-side script surely wiped it:
> >
> > mysql> select id,name from ms_notes where id="CN";
> > Empty set (0.00 sec)
> >
> > Here's what my code looks like to remove the note:
> >
> > function removeNote(id,name) {
> > if(confirm("Are you sure you wish to delete: "+name+"?")) {
> > // ajax code here to remove note.
> > $.ajax({
> >   url: "/dbserver.php",
> >   type: "POST",
> >   data: "delete="+id,
> >   cache: false,
> >   success: function(html) {
> > $("#alpha_notes").empty();
> > $("#alpha_notes").replaceWith(html);
> >   }
> > });
> > }
> > }
> >
> > Very important thing to factor in, is if I do a hard refresh on the
> > page, here are the results... a missing OB/GYN note, which is the way
> > it should be:
> >
> > http://catalyst.httpd.org/tmp/6.png
> >
> > Any idea folks? Would really appreciate any help. Firebug also shows
> > that in its response to my POST call that the notes are not there in
> > its table rendering. My server-side code looks like this:
> >
> > if($_POST['delete']) {
> > global $db_alpha, $link;
> > $alpha_note_set = array();
> > $db = mysql_select_db($db_alpha, $link);
> > if(!$db) {
> > die("Can't connect to alpha, please contact steve.");
> > }
> >
> > $sql = "DELETE from ms_notes
> > WHERE ID='".$_POST['delete']
> > ."' LIMIT 1";
> > $result='';
> > $result = mysql_query("$sql");
> > if(!$result) { die("Something is broken... "); }
> >
> > $sql = "SELECT NAME,ID from ms_notes";
> > $alpha_result_set = @mysql_query("$sql");
> > $row='';
> > if(mysql_num_rows($alpha_result_set)==0) { $html = "There are zero
> > notes left to process in Alpha's database"; echo $html; exit; }
> > while($row = @mysql_fetch_array($alpha_result_set, MYSQL_ASSOC)) {
> > $alpha_note_set[] = $row; }
> > $html='';
> > $html = '';
> > $html .= '';
> > // count here basically just keeps track of a
> > // neatly aligned table
> > $count=0;
> > foreach($alpha_note_set as $note) {
> > $html .= " > onclick=\"removeNote('".$note[ID]."','".$note[NAME]."')\">delete  $note[NAME]";
> > $count++;
> > if(($count % 2 == 0)) {
> > $html .= "";
> > }
> > }
> > $html .= '';
> >
> > // send this sucker back to the view.
> > echo $html;
> > }
> >
> > Thanks all.
> >
> > - sf
> >
>

[jQuery] Re: .replaceWith() broken in Firefox 2 I think

[Steve Finkelstein]

This is actually happening in IE7 also. Is it possible that something
is hosed with my code? I'm more confident it's that than a broken
replaceWith() but I'd really like to know why it only works once, and
then I need a page refresh for that "ajax" effect.

- sf

On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
> Hi all,
>
> So I have a simple script which essentially uses .replaceWith() to
> replace the containing elements HTML with a success callback. This
> works fine the first time I invoke a function which calls
> .replaceWith() in the success call back, but any subsequent calls
> leaves the DOM unmodified.
>
> Here's an example screenshot of what my page looks like upon a random page 
> load.
>
> http://catalyst.httpd.org/tmp/1.png
>
> Ok so I have 4 notes. Let's delete one:
>
> http://catalyst.httpd.org/tmp/2.png
>
> Perfect, it's gone:
>
> http://catalyst.httpd.org/tmp/3.png
>
> Here's where the problem occurs... Let's delete another
>
> http://catalyst.httpd.org/tmp/4.png
>
> Hmmm, it didn't disappear from the DOM this time:
>
> http://catalyst.httpd.org/tmp/5.png
>
> The OB/GYN note is still there as rendered by the browser, however the
> server-side script surely wiped it:
>
> mysql> select id,name from ms_notes where id="CN";
> Empty set (0.00 sec)
>
> Here's what my code looks like to remove the note:
>
> function removeNote(id,name) {
> if(confirm("Are you sure you wish to delete: "+name+"?")) {
> // ajax code here to remove note.
> $.ajax({
>   url: "/dbserver.php",
>   type: "POST",
>   data: "delete="+id,
>   cache: false,
>   success: function(html) {
> $("#alpha_notes").empty();
> $("#alpha_notes").replaceWith(html);
>   }
> });
> }
> }
>
> Very important thing to factor in, is if I do a hard refresh on the
> page, here are the results... a missing OB/GYN note, which is the way
> it should be:
>
> http://catalyst.httpd.org/tmp/6.png
>
> Any idea folks? Would really appreciate any help. Firebug also shows
> that in its response to my POST call that the notes are not there in
> its table rendering. My server-side code looks like this:
>
> if($_POST['delete']) {
> global $db_alpha, $link;
> $alpha_note_set = array();
> $db = mysql_select_db($db_alpha, $link);
> if(!$db) {
> die("Can't connect to alpha, please contact steve.");
> }
>
> $sql = "DELETE from ms_notes
> WHERE ID='".$_POST['delete']
> ."' LIMIT 1";
> $result='';
> $result = mysql_query("$sql");
> if(!$result) { die("Something is broken... "); }
>
> $sql = "SELECT NAME,ID from ms_notes";
> $alpha_result_set = @mysql_query("$sql");
> $row='';
> if(mysql_num_rows($alpha_result_set)==0) { $html = "There are zero
> notes left to process in Alpha's database"; echo $html; exit; }
> while($row = @mysql_fetch_array($alpha_result_set, MYSQL_ASSOC)) {
> $alpha_note_set[] = $row; }
> $html='';
> $html = '';
> $html .= '';
> // count here basically just keeps track of a
> // neatly aligned table
> $count=0;
> foreach($alpha_note_set as $note) {
> $html .= " onclick=\"removeNote('".$note[ID]."','".$note[NAME]."')\">delete  $note[NAME]";
> $count++;
> if(($count % 2 == 0)) {
> $html .= "";
> }
> }
> $html .= '';
>
> // send this sucker back to the view.
> echo $html;
> }
>
> Thanks all.
>
> - sf
>