Re: [jQuery] jQuery + OOP + AJAX
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...]
fran wrote ...
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.
yes. You're right. I have to rework my assumption: It's possible to bind the
click event to one of its parents and I can get the clicked element with
var target = $(event.target);
as found in your sample code. I reworked my code, this works fine but I
encountered a new problem: It's not be done appending a new paragraph and
catching the click event in one of it's parents. I even have to bind some
additional events to the new paragraph elements. You wrote:
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.
this is the trace to find solutions for the new problems. My XML structure
is as follows
[content]
[s]
[a]...[/a]
[b]...[/b]
[/s]
[/content]
I append a [s] element, the click on the new [a] or [b] is well be caught in
[content] - that works fine - but I have to bind additional events to [s],
[a] and [b]
[s] should get a hover-handler
[a] [b] should get an other hover-handler
I have to code this additional functionallity and I think it can be done
with something similar to your code
$(s ... /s).appendTo($content).children(a).click( function()
I will go on ...
thanks for your proposals and links to solutions
-- fran
btw {
the target variable in your sample code has a $-prefix ($target). I think
this is just an eye-catcher for variables - a similar coding to php. If not
- if it has to do with something special in Javascript or jQuery - please
let me know ...
}
--
View this message in context:
http://old.nabble.com/jQuery-%2B-OOP-%2B-AJAX-tp26945051s27240p26976695.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] jQuery + OOP + AJAX
Thanks Scott ! Your proposals are an inspiration in doing things better.
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.
that's the CENTER OF MY TROUBLE ...
[...snip...]
Well, first of all, it's a somewhat strange UI. I certainly wouldn't
want to click for every paragraph; and even if I did, I would think a
Next button would be a better place to click than on the paragraph
itself. But that aside, I'm sure it can be done.
its just an example for simplicity.
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
The real structure is XML as follows:
content
s
a ... /a
b ... /b
/s
s
a ... /a
/s
s
a ... a
b ... b
/s
content
[a] contains text
[b] its translation
there might be text ([a] ) without a translation ( [b] )
each text ([a] or/and [b]) can be modified or deleted. Adding new text means
to append
s
a ... /a
/s
this would be the next paragraph in the simplified example.
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.
Well, I will not do it longer this way. Instead I will append it ...
$content.append(s ... /s).children(a).click( function()
{
AJAX-call
};
- the old content will not be touched and the new one will added and bound
to a click handler
(as the old one's already have)
And now the special case when all content has to be substituted. That
matches following code
out of your proposal:
var $content = $(#content);
function showNextChapter() {
chapter = getNextChapter();
$content.empty().append(h2 + chapter.title + \/h1);
$content.append(chapter.paragraphs[paragraphIdx]);
}
function showNextParagraph() {
if (!moreParagraphsForChapter()) {
showNextChapter();
return;
}
$content.append(getNextParagraph());
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.
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
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 !
And thanks once more for your comments and inspirations !
s type=:-)
[a type=German]einen guten Rutsch ins Neue Jahr[/a]
[b type=English]slide well to the New Year[/b]
/s
-- fran
--
View this message in context:
http://old.nabble.com/jQuery-%2B-OOP-%2B-AJAX-tp26945051s27240p26968839.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] jQuery + OOP + AJAX
thanks a lot for your patience and all these useful hints ! :)
There are several things that bother me about this code. The example,
by the way, does not run properly in IE8 (nor, I expect in earlier
versions.)
I'm working on a standalone C++ app. The Frontend/UI is the Gecko-Engine
that is embedded in the backend written in C++. All what a webserver does
shall later be done by the C++ backend. Therefore my web code hast just to
be compliant with Firefox/Gecko.
... simpler code work for you?:
$(function() {
$(#MyDiv).html(data_at_startup).click(function() {
// Simulation of an AJAX-call
$(this).html(data_out_of_an_AJAX_call);
});
});
Yes. The show( AJAX_data ) function helps to substitute the total content of
#MyDiv. The total substitution of all present p's ( with the old one +
the new one) in #MyDiv using show() seemed to be the most easiest way (1)
not only showing the (added) new paragraph, but also (provide) ALL p's
with the click handler.
var myDivObject = {
show: function(txt) {
$(#MyDiv).html(txt).click( function() {
this.show( data_out_of_an_AJAX_call );
});
},
hide: function() { /* ... */},
otherVal: 17, // comma-separated list of members...
}
I have to take some lessons in Javascript OOP
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.
that's the CENTER OF MY TROUBLE. I did speak about the reason for using the
show() function above.
But maybe I can get your patience for one more special example that desribes
my intention and trouble more precisely: Let's assume I work on a web site
that should display the paragraphs of a book. The book has chapters and each
chapter has ps. I start displaying the first p (of the first chapter).
When read by the user he clicks on the p and the next paragraph will
shown.
$(#MyDiv).append(next_pragraph_from_AJAX_call).click( function()
{
get_next_paragraph_via_AJAX
}
I can go on this way until the last p of the current chapter is
added/shown. Now I should start with the first p of the second chapter.
Therefore I have to delete all p's (of chapter 1) and show the first p
of chapter 2. This is what my show()-function should do (that bothers you
[and me too]): replace all current shown p's and RE-START with one p -
the first one of chapter 2.
Do you have any hint how to do it better ?
sincerely
fran
--
View this message in context:
http://old.nabble.com/jQuery-%2B-OOP-%2B-AJAX-tp26945051s27240p26952980.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
