I have a plugin i created which works great when there is only one instance of it on the page.
However it uses a global variable to store the current item index.
When I place multiple instances of this on the page, it all goes wrong, as each block of script gets confused because there are multiple instances of the same global variable on the page.
Is there any way i can 'instantiate' each plugin i add to the page to avoid this, so each block of javascript only accesses its own global fields / properties?
You can attach the variable to the element using .data():
$(this).data('my-plugin', someValue);
// Note: if the above line is in a regular jQuery plugin ($.fn.myPlugin = ...)
// then 'this' does not need to be wrapped.
Retrieve it again with:
$(this).data('my-plugin');
This way the variable is associated directly with the element your plugin is initialised on.
Related
I'm using ScEditor and in normal situations I can get the instance like this, where sceditor is the class name of the textarea element to attach it to:
var instance = $('.sceditor').first().sceditor('instance');
However, I have a situation where I need to create an instance of the editor dynamically.
Creating it dynamically works fine, however attempting to get the instance doesn't work.
The code executes after a click event and on the first click it appears to create the instance fine but I cannot get the instance into a variable and work with it; however if I click the link again, I can now work with the instance, presumably because it now exists before I executed the code.
Is there a way I can get the instance in the same call that the instance is created?
I have a directive and inside it's template is a <img> element and I want to execute a custom method that is within my directives scope:
<my-directive>
<!-- my directives template -->
<p>...</p>
<img onload="myScopeMethod()">
<p>...</p>
<!-- my directives template -->
</my-directive>
I found this Get width height of remote image from url but this works only if im applying it to a directive that works on the <img> element.
The directives purpose is to show a widget that allows me to manipulate the image (scale it by dragging a slider) but I somehow need to get it's original size.
How can I get it to execute the method from my controllers scope?
You would generally want to take your load handler function out of the template itself and stick it in the link function. From there it kind of depends on your directive and whether you are using an isolate scope, inherited scope, or the same scope as the parent.
If you have a scope key in your directive definition object and it's set to an object literal, then you are using the isolate scope. In that case, you'll need to pass it in somehow, and the most straightforward way is to use the '&' option.
If you don't have a scope key or have a scope key and it's set to a boolean value you're using the same scope or an inherited scope. In this case, all you need to do is call $scope.originalScopeMethod() and it will either call it on the scope or find it in the prototype chain.
Here's an example with the three different scenarios. The table at the bottom is being fed from the 'main' controller scope while the small numbers are fed from the directive scope.
If it were me I'd probably go with either isolate or inherited scope so you can keep track of multiple images separately a little easier. The shared scope version in my example would only work for a single image, but you could make it work with an array or hash if you really wanted.
Let me know if I misunderstood your question in any way.
I've often used the word "parent" as a JavaScript variable name, and have never had any problems.
I've recently learned that "parent" can refer to something else such as when used to access an element in an IFrame's parent such as parent.document.getElementById("someID").
Should I stop using the word "parent" as a JavaScript variable name, and go through all my existing script to change it? Note that http://msdn.microsoft.com/en-us/library/ie/0779sbks%28v=vs.94%29.aspx and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words do not indicate that I shouldn't.
'parent' is not a reserved word but a global object in the browser's execution environment. Whether or not you want to have a variable name that conflicts with that is your decision.
For reference, here is a list of actual reserved words in JS:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
If it makes sense for your variable to be called parent then go ahead and name it that, you just need to be aware that it will shadow the parent property of the window object (the global scope), but that's not an issue since you can explicitly reference that using window.parent rather than just parent wherever you need to work with it.
The only time it should become an issue is if there is code that shares scope with your parent variable which is attempting to access window.parent without explicitly specifying that they want the property, and that's probably an indication that the code needs to be tweaked.
"JavaScript" isn't the same as "ecosystem within which JavaScript is executed".
Browsers have the window and document references, which have properties... like parent. You can still reference the global parent. If your parent is called on a different object there's no collision anyway.
I'm looking for a way to get a value (CodeMirror-instance) which is stored using jQuery's .data()-method from outside the document-context it was stored from.
My case is I have a jQuery-dialog with a CodeMirror-instance. I'm trying to create an ajax-save function but when the converted textarea is submitted, CodeMirror provides a callbackfunction which puts the current content to the textarea again.
I need the stored instance of CodeMirror from .data() to perform the callback manual so I can start processing the contents. Can this be achieved? And if so, how?
I've fixed my problem using an AJAX-save solution, therefore I didn't need to access the object anymore.
My problem has to do with being able to overwrite the variables declared within a function but not on every recall on the function. Here is my explanation:
Let's say I have three HTML elements when the page is loaded:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
I then run a javascript function manipulating each of these elements and applying functions to the "onmousemove" event. During the function call there are variable that are declared and should NOT be overwritten in order to keep the variable values unique to the element (otherwise mouse movement would be overwritten and would only work for the last element). I know this can be achieved by declaring them local variables.
My issue is the next part:
After this has all been done, I then have other events on the page that trigger the initial function to run again on the same element it ran on initially, but with different values, which now have to overwrite the originals. I would post the code but it is a few thousand lines of code so I'm hoping you all understand what I'm talking about.
I think I can fix this issue by duplicating the function and declaring the variables differently, but that would mean having two copies of a large block of code, which is never a good idea, in my opinion and I would like to avoid that.
So I figured out how to achieve what I wanted. I reworked my code into Objects. When I run the code initially each element has its own object with a variable global variable (window[element+'obj']) that manipulates the element with prototype methods, which keeps each elements values separate, then when I need to overwrite the values for a particular element, I call a method that resets all the values for that object. I will try to post some example code later for anyone that runs into this issue.
Thanks!