On Dec 30, 10:51 am, fran23 <f...@lavabit.com> wrote:
> Thanks Scott ! Your proposals are an inspiration in doing things better.
Glad to help. This one will have to be shorter...
> > First of all, does the click have to be in the last paragraph itself?
> > Or could it be in some parent container of the paragraphs?
> > [...snip...]
>
> it's not possible to use the parent, I need the identified paragraph in the
> ajax-call
I guess the question is whether you can bind the event handler to the
container. The click event will still have a target that points to
your paragraph (or one of its children, and that's an annoying, but
tolerable, complication), so you can still use the paragraph to help
with your Ajax call.
> [ ... ]
> Coming back on my early show() coding, that bothers you (and me).
>
> The easiest way to update the content after an AJAX call seemed (to me) to
> replace ALL
> content (the old text) in calling Show( old + new text). That's not
> beautiful but
> may be useful - especially I could take the same principle in showing "a
> totally other chapter".
It's still not clear to me what portion of the markup is inline in the
page, and what chunks are retrieved from ajax calls, and with what
granularity. I would suggest that you update the page with what's in
the Ajax call, and not try to keep a separate version of the entire
data anywhere but in the DOM.
> Well, I will not do it longer this way. Instead I will append it ...
>
> $content.append("<s> ... </s>").children("a").click( function()
> {
> AJAX-call
> };
If $content already has children("a"), then you will be binding the
same event handler again. This might do better:
$("<s> ... </s>").appendTo($content).children("a").click( function
()
{
AJAX-call
};
In this case, you will bind the click handler this time only to the
"a" children of the newly appended portion.
> And now the special case when all content has to be substituted. That
> matches following code out of your proposal:
>> function showNextChapter() {
>> chapter = getNextChapter();
>> $content.empty().append("<h2>" + chapter.title + "<\/h1>");
>> $content.append(chapter.paragraphs[paragraphIdx]);
This line was left over from an incomplete refactoring. It should
really read:
$content.append(getNextParagraph());
but that's not really relevant to our discussion.
>> }
> [ ... ]
> a qualitative difference to my Show()-Function is a call on empty() in front
> of setting new content.
>
> This seem to be the solution to my trouble. In other words: I could take my
> Show()-Function
> (= RE-SETTING all text + event handlers) IF - that seem to be the point - IF
> I call the empty() function before.
I wouldn't recommend it, as you will now need to rebuild your content
from somewhere else. If that content is all coming in from the Ajax
call, this is fine.
> It would not be a beautiful way, I really agree, but it would be a working
> way without negative side-effects or problems. Can you confirm ? Calling
> empty() before setting the new content will work around your comment ( >>>
> But even here, there is still something strange. On each click of the div,
> you're binding another event handler to do the same job <<<
Yes, if you remove the items that have the event handlers on them,
then there should be no conflict.
> What will I do now ?
> *) I will take some lessons in Javascript OOP (... the prototype construct
> ... etc.)
> *) I will rework my code being more appropriate Javascript OOP
> *) I will append new paragraphs and give them a click handler (as the old
> <p>'s already have)
> *) I will do an empty() call on the container, before I give new content to
> it.
>
> Am I right ? Did I forget or misunderstand something ? Don't hesitate to
> contradict if you find something wrong !
Again, I would only do that last if I had all the replacement content
coming in from my Ajax call. The DOM is the right place to store this
kind of data.
> And thanks once more for your comments and inspirations !
Again, my pleasure.
By the way, I posted a second version of my earlier example, this one
more ready for ajax or other asynchronous processing, which can get to
be a chore. It's at
http://scott.sauyet.com/Javascript/Demo/2009-12-29b/
http://scott.sauyet.com/Javascript/Demo/2009-12-29b/?last
It's a straightforward reworking of the synchronous version posted
earlier.
> <s type=":-)">
> [a type="German"]einen guten Rutsch ins Neue Jahr[/a]
> [b type="English"]slide well to the New Year[/b]
> </s>
And a Happy New Year to you as well.
-- Scott
