Anyone else able to shed some light on this?
Spot wrote:
Nathan,
Ok, I am aware of the base use of each() (been coding in PHP for about
eight years), but I cannot see how it is viable in this case.
Making a long story short...
This plug-in is a selector(auto-completer). To be more specific, it is
several selectors. I have a specific plugin for each selector, and am
$.extend()ing a base (external) DataSelector class, which has the
boilerplate functionality (pulling data, building DOM elements,
handling arrow keys, etc), and the plugins only have code specific to
that data type.
The problem I am having, is that even when using two different
plugins, I get namespace conflicts (e.g. the last called plugin on the
page, overwrites the namespace for all the previous).
Ok, now because I am specifically hooking the plugin to only _one_
element each time, I cannot see how each() is helpful. Unless it needs
to somehow return the one element with an index.
Does this make sense?
Again, I appreciate your assistance greatly.
Thanks!
Nathan wrote:
Yeah, Copy/paste gets ya no where for sure.
For each() you should check out: http://docs.jquery.com/Core/each
Which states: "Execute a function within the context of every matched
element"
From my previous example, "this.each()" is the same as saying:
$('#divNameHere').each();
So that runs your plugin only within that element.
So this:
$('#nav a', obj).click(function(){
$('#someDiv').fadeIn();
})
Is also this in each instance:
$('#divNameHere #nav a').click(function(){
$('#someDiv').fadeIn();
})
So it's changing out what '#divNameHere' is depending on what elements
you are applying your plugin to.
Hopefully that helps answer your question.
If you're not already. Use Firefox with Firebug and put something like
console.log('this is: ', this); in your plugin within the this.each()
funciton. Firebug then will log what this is in each instance. And FYI
console.log will give you a JS error in IE so comment it out before
testing in IE.
On Apr 7, 2:58 pm, Spot <s...@napalmriot.com> wrote:
Nathan, first off, thank you for responding.
I understand about passing the obj as scope. That makes perfect sense.
However I am a little confused as to the purpose of returning
this.each.
What is the goal there?
I find it better to understand why something works, as opposed to just
copy/pasting. It saves everyone time in the long run. :)
Thanks again!
Nathan wrote:
To do this you need to have "return this.each" and optionally change
the instance of "this" which is the name of the object you are apply
the plugin to, to "obj" using "var obj = $(this);".
Then when you call a selector, you'll need to add "$('#nav
a', obj)"
note the ", obj".
This will keep it within the name space of what ever selector
you
apply this to when the plugin is initialize.
(function($){
$.fn.extend({
plauginNameHere: function() {
return this.each(function() {
var obj = $(this); // this just changes
the use of 'this' to obj
$('#nav a', obj).click(function(){
$('#someDiv').fadeIn();
});
})
}
});
})(jQuery);
On the page level you will then need to initialize the plugin
on the
HTML page level.
<script type="text/javascript" charset="utf-8">
$(function(){
$('#divNameHere'). plauginNameHere(); // first instance
$('#secondDivNameHere'). plauginNameHere(); // second
instance
});
</script>
So what ever the selector name is above, for example
"#secondDivNameHere", will then be the 'this' that we changed to 'obj'
using a var in plugin script. So in this example the plugin's "obj" is
"#secondDivNameHere".
Let me know if that helps.
On Apr 6, 1:44 pm, Spot <s...@napalmriot.com> wrote:
How would one develop a plugin which can exist multiple times on the
same page, without conflicting with each others namespaces?
