[mochikit] Re: Ajax Dom Replacement
Hi, Thank you all for your help. I ended up using jQuery.replaceWith because it just works. -- Gregor Arnar Birgisson schrieb: > Hey there, > > First of all, not that in general a string can represent a HTML > fragment containing more than one element. Consider: > --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "MochiKit" group. To post to this group, send email to mochikit@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/mochikit?hl=en -~--~~~~--~~--~--~---
[mochikit] Re: Ajax Dom Replacement
On Sep 8, 6:48 pm, "Per Cederberg" <[EMAIL PROTECTED]> wrote: > I guess it is just a matter of taste, but I'd use > MochiKit.DOM.replaceChildNodes instead of multiple insert and remove > calls. Yes, me too if I have to replace all children ;) Regards .. Amit Mendapara --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "MochiKit" group. To post to this group, send email to mochikit@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/mochikit?hl=en -~--~~~~--~~--~--~---
[mochikit] Re: Ajax Dom Replacement
I guess it is just a matter of taste, but I'd use
MochiKit.DOM.replaceChildNodes instead of multiple insert and remove
calls.
Cheers,
/Per
On Mon, Sep 8, 2008 at 3:44 PM, Amit Mendapara <[EMAIL PROTECTED]> wrote:
>
> Yes, exactly. In that case:
>
> var old = $('thisisatd');
>
> var tr = TR(null);
> var tbl = TABLE(null, TBODY(null, tr));
>
> tr.innerHTML = 'A new text id="thisisanothertd" colspan="3">A new text';
>
> forEach(tr.childNodes, function(td){
> old.parentNode.insertBefore(td, old);
> });
>
> removeElement(old);
>
> Regards
> ..
> Amit Mendapara
>
> On Sep 8, 5:52 pm, "Arnar Birgisson" <[EMAIL PROTECTED]> wrote:
>> Hey there,
>>
>> On Mon, Sep 8, 2008 at 13:43, gregor <[EMAIL PROTECTED]> wrote:
>> > I would like to change a DOM Object with a turbogears ajax call.
>> > At the moment the ajax call returns a string with the html of the node
>> > that should be replaced. How can I swap the existing DOM Object with
>> > the new one I got from the ajax callback?
>>
>> > InnerHTML replaces the inner part of the element, but I want to
>> > replace the whole thing. OuterHtml seems to what I need but it does
>> > not work in Firefox. swapDOM takes two DOM-Objects, but I've only got
>> > a string for the replacement. How can I convert a string to a DOM
>> > object?
>>
>> First of all, not that in general a string can represent a HTML
>> fragment containing more than one element. Consider:
>>
>> "number1number2"
>>
>> My point is that you cannot take any string and convert it to just one
>> DOM element. However, say your strings always contain one complete
>> element, or that you just want to pick out the first one, you can
>> create a temporary element (not injected in the document) to use
>> innerHTML on, and the use swapDOM to inject the first child. I.e.
>> (note, this is untested code written directly in the email):
>>
>> var str = "something from an ajax call";
>> var container = DIV();
>> container.innerHTML = str;
>> swapDOM("id-of-element-to-remove", container.firstChild);
>>
>> Actually, if you did want *all* elements from the fragment, you could
>> to this I guess:
>>
>> var str = "something from an ajax call";
>> var container = DIV();
>> container.innerHTML = str;
>> insertSiblingNodesAfter("id-of-element-to-remove", container.childNodes);
>> removeElement("id-of-element-to-remove");
>>
>> However, you should note that with the proper content-type for the
>> ajax response and depending on your specific use, you might already
>> have a ready-made DOM object in the XMLHttpRequest object under the
>> property responseXML
>>
>> cheers,
>> Arnar
>>
>> > Pseudo example:
>>
>> >
>> >
>> > A text
>> >
>> >
>>
>> > From the Ajax call I get the string back "> > colspan="3">A new text".
>> > How can I replace the td with this new string?
>>
>> > My current function to do this looks like this:
>>
>> >var doReplace = function (req) {
>> >for (var e in req.changes) {
>> >var element = document.getElementById(e)
>> >if (element) {
>> >element.outerHTML = req.changes[e]; // <- Does not work in
>> > Firefox
>> > }
>> >else {
>> >alert("element not found:" + e);
>> >}
>> >}
>> >}
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~--~~~~--~~--~--~---
[mochikit] Re: Ajax Dom Replacement
Yes, exactly. In that case:
var old = $('thisisatd');
var tr = TR(null);
var tbl = TABLE(null, TBODY(null, tr));
tr.innerHTML = 'A new textA new text';
forEach(tr.childNodes, function(td){
old.parentNode.insertBefore(td, old);
});
removeElement(old);
Regards
..
Amit Mendapara
On Sep 8, 5:52 pm, "Arnar Birgisson" <[EMAIL PROTECTED]> wrote:
> Hey there,
>
> On Mon, Sep 8, 2008 at 13:43, gregor <[EMAIL PROTECTED]> wrote:
> > I would like to change a DOM Object with a turbogears ajax call.
> > At the moment the ajax call returns a string with the html of the node
> > that should be replaced. How can I swap the existing DOM Object with
> > the new one I got from the ajax callback?
>
> > InnerHTML replaces the inner part of the element, but I want to
> > replace the whole thing. OuterHtml seems to what I need but it does
> > not work in Firefox. swapDOM takes two DOM-Objects, but I've only got
> > a string for the replacement. How can I convert a string to a DOM
> > object?
>
> First of all, not that in general a string can represent a HTML
> fragment containing more than one element. Consider:
>
> "number1number2"
>
> My point is that you cannot take any string and convert it to just one
> DOM element. However, say your strings always contain one complete
> element, or that you just want to pick out the first one, you can
> create a temporary element (not injected in the document) to use
> innerHTML on, and the use swapDOM to inject the first child. I.e.
> (note, this is untested code written directly in the email):
>
> var str = "something from an ajax call";
> var container = DIV();
> container.innerHTML = str;
> swapDOM("id-of-element-to-remove", container.firstChild);
>
> Actually, if you did want *all* elements from the fragment, you could
> to this I guess:
>
> var str = "something from an ajax call";
> var container = DIV();
> container.innerHTML = str;
> insertSiblingNodesAfter("id-of-element-to-remove", container.childNodes);
> removeElement("id-of-element-to-remove");
>
> However, you should note that with the proper content-type for the
> ajax response and depending on your specific use, you might already
> have a ready-made DOM object in the XMLHttpRequest object under the
> property responseXML
>
> cheers,
> Arnar
>
> > Pseudo example:
>
> >
> >
> > A text
> >
> >
>
> > From the Ajax call I get the string back " > colspan="3">A new text".
> > How can I replace the td with this new string?
>
> > My current function to do this looks like this:
>
> > var doReplace = function (req) {
> > for (var e in req.changes) {
> > var element = document.getElementById(e)
> > if (element) {
> > element.outerHTML = req.changes[e]; // <- Does not work in
> > Firefox
> > }
> > else {
> > alert("element not found:" + e);
> > }
> > }
> > }
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~--~~~~--~~--~--~---
[mochikit] Re: Ajax Dom Replacement
Amit Mendapara schrieb:
> As your Ajax result is a TD, innerHTML wont work if you don't create
> whole TABLE with TBODY. You should do this:
ok. That's another problem.
What I want is a generic solution that works for all html elements
without special cases (like this) in Javascript.
>
> MochiKit.Query('#thisisatd').replaceWith(' colspan="3">A new text');
That looks exactly like what I am looking for. Cool!
Thank's. Looking forward to your realease!
--
Gregor
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~--~~~~--~~--~--~---
[mochikit] Re: Ajax Dom Replacement
On Mon, Sep 8, 2008 at 14:52, Arnar Birgisson <[EMAIL PROTECTED]> wrote:
> On Mon, Sep 8, 2008 at 13:43, gregor <[EMAIL PROTECTED]> wrote:
>> I would like to change a DOM Object with a turbogears ajax call.
>> At the moment the ajax call returns a string with the html of the node
>> that should be replaced. How can I swap the existing DOM Object with
>> the new one I got from the ajax callback?
>>
>> InnerHTML replaces the inner part of the element, but I want to
>> replace the whole thing. OuterHtml seems to what I need but it does
>> not work in Firefox. swapDOM takes two DOM-Objects, but I've only got
>> a string for the replacement. How can I convert a string to a DOM
>> object?
>
> First of all, not that in general a string can represent a HTML
> fragment containing more than one element. Consider:
>
> "number1number2"
>
> My point is that you cannot take any string and convert it to just one
> DOM element. However, say your strings always contain one complete
> element, or that you just want to pick out the first one, you can
> create a temporary element (not injected in the document) to use
> innerHTML on, and the use swapDOM to inject the first child. I.e.
> (note, this is untested code written directly in the email):
>
> var str = "something from an ajax call";
> var container = DIV();
> container.innerHTML = str;
> swapDOM("id-of-element-to-remove", container.firstChild);
Here's a quick test:
http://www.hvergi.net/arnar/public/test/load.html
cheers,
Arnar
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~--~~~~--~~--~--~---
[mochikit] Re: Ajax Dom Replacement
Hey there,
On Mon, Sep 8, 2008 at 13:43, gregor <[EMAIL PROTECTED]> wrote:
> I would like to change a DOM Object with a turbogears ajax call.
> At the moment the ajax call returns a string with the html of the node
> that should be replaced. How can I swap the existing DOM Object with
> the new one I got from the ajax callback?
>
> InnerHTML replaces the inner part of the element, but I want to
> replace the whole thing. OuterHtml seems to what I need but it does
> not work in Firefox. swapDOM takes two DOM-Objects, but I've only got
> a string for the replacement. How can I convert a string to a DOM
> object?
First of all, not that in general a string can represent a HTML
fragment containing more than one element. Consider:
"number1number2"
My point is that you cannot take any string and convert it to just one
DOM element. However, say your strings always contain one complete
element, or that you just want to pick out the first one, you can
create a temporary element (not injected in the document) to use
innerHTML on, and the use swapDOM to inject the first child. I.e.
(note, this is untested code written directly in the email):
var str = "something from an ajax call";
var container = DIV();
container.innerHTML = str;
swapDOM("id-of-element-to-remove", container.firstChild);
Actually, if you did want *all* elements from the fragment, you could
to this I guess:
var str = "something from an ajax call";
var container = DIV();
container.innerHTML = str;
insertSiblingNodesAfter("id-of-element-to-remove", container.childNodes);
removeElement("id-of-element-to-remove");
However, you should note that with the proper content-type for the
ajax response and depending on your specific use, you might already
have a ready-made DOM object in the XMLHttpRequest object under the
property responseXML
cheers,
Arnar
> Pseudo example:
>
>
>
> A text
>
>
>
> From the Ajax call I get the string back " colspan="3">A new text".
> How can I replace the td with this new string?
>
> My current function to do this looks like this:
>
>var doReplace = function (req) {
>for (var e in req.changes) {
>var element = document.getElementById(e)
>if (element) {
>element.outerHTML = req.changes[e]; // <- Does not work in
> Firefox
> }
>else {
>alert("element not found:" + e);
>}
>}
>}
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~--~~~~--~~--~--~---
[mochikit] Re: Ajax Dom Replacement
As your Ajax result is a TD, innerHTML wont work if you don't create
whole TABLE with TBODY. You should do this:
var old = $('thisisatd');
var tr = TR(null);
var tbl = TABLE(null, TBODY(null, tr));
tr.innerHTML = 'A new text';
swapDOM(old, tr.firstChild);
For your information, I'm implementing a jQuery style helper module
(see previous post) that will easy such tasks, for example:
MochiKit.Query('#thisisatd').replaceWith('A new text');
The MochiKit.Query will take care of creating valid DOM from the given
row html text and also executes JavaScript within the text if any.
Though almost finished, the module is still not made public. I'm
reviewing some of the code and will release the code within a week or
so...
Regards
..
Amit Mendapara
On Sep 8, 4:43 pm, gregor <[EMAIL PROTECTED]> wrote:
> I would like to change a DOM Object with a turbogears ajax call.
> At the moment the ajax call returns a string with the html of the node
> that should be replaced. How can I swap the existing DOM Object with
> the new one I got from the ajax callback?
>
> InnerHTML replaces the inner part of the element, but I want to
> replace the whole thing. OuterHtml seems to what I need but it does
> not work in Firefox. swapDOM takes two DOM-Objects, but I've only got
> a string for the replacement. How can I convert a string to a DOM
> object?
>
> Pseudo example:
>
>
>
> A text
>
>
>
> From the Ajax call I get the string back " colspan="3">A new text".
> How can I replace the td with this new string?
>
> My current function to do this looks like this:
>
> var doReplace = function (req) {
> for (var e in req.changes) {
> var element = document.getElementById(e)
> if (element) {
> element.outerHTML = req.changes[e]; // <- Does not work in
> Firefox
> }
> else {
> alert("element not found:" + e);
> }
> }
> }
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~--~~~~--~~--~--~---
