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?
Related
I'm trying to add a Polymer UI to an existing HTML page which contains a form. I don't have control over the content of the page, only the header and footer, so I can't change the form to use Polymer elements rather than <input>. So instead I'm trying to rewrite the form using Javascript.
I'm finding that adding an is attribute to an existing element has no effect --- the element doesn't get upgtaded.
I presume that this is all happening at a point after which Polymer has scanned the DOM looking for is attributes, so it's not noticing my change. (Although creating a new element with an is attribute and adding it also doesn't work, which is kind of weird, because adding a Polymer custom element does work.)
Is there any way around this; such as telling Polymer when I add the new element so that it can be upgraded properly?
To use is=, you must be extending a native element. These are called type extension custom elements (http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#usetypeextension).
In general, I don't believe adding the is= attribute at a later time has any effect on upgrading the element. The element needs to be declared up front with is= (e.g. <input is="core-input">) or instantiated dynamically using the special version of createElement:
var input = document.createElement('input', 'core-input');
In the declared case, this is the parsers signal to alter the prototype of the element when it's seen. In the JS case, that's done at creation time. If you just use el.setAttribute('is', 'core-input'), the element's prototype is already created by that point so it has no effect.
I have event objects I load into fullcalendar. Each event has a custom resources array field attached showing who the events are for. Loads fine. User can click on the event and eventClick gives me the event with the resources. I open a dialog to edit. After saving changes to the db, I want to update the calendar using updateEvent. The object I use to update contains the full resources array and all appears to update fine.
Here's the problem: Now when I click on the same event to edit again, the event returned by eventClick has the resources array length set to 0. i.e. all the resources elements are missing.
Thought maybe I wasn't updating with the 'original object' so tried removeEvents followed by renderEvent but get the exact same behavior.
What am I missing?
btw, using fullCalendar 1.6. I can just reload the calendar and it's fine, but I don't want to 'cause it flickers and means unnecessary bytes over the wire.
update
So if I use appointment.resources = angular.copy(appointment.resources) then everything works. I'm not clear on why though. Is it because the attached resources were from an angular $resource and when that refreshed the reference to the previous objects point nowhere?
I think it could be a reference problem.
When you create a fullCalendar event, it wraps the object to a new one.
So, if you do something like:
var myEvent = {id: 1, title: "MyTitle", resources:[1,2,3], start:moment()};
$.('#calendar').fullCalendar('renderEvent', myEvent);
It create another object, with some specific properties like backUps, specific methods, etc... You can access this object with:
var fcEvent = $.('#calendar').fullCalendar('clientEvents', myEvent.id);
But now:
fcEvent.resources != myEvent.resources
Anyway, is difficult to know exactly what's the problem without a piece of code. Is possible to create a Plunker?
You can use my public Skeleton for ui-calendar
I have a few javascript functions that changes DOM elements, such as add classes, replace images, etc...
Now, sometimes a page will create a popup or will populate a navigation tree with some extra items without loading a new page. In that case the new element loaded will of course not be affected by my javascript.
For example. Say I give all images an extra class via javascript. Now the page generates a popup with some images in it, and then those images won't be affected by my javascript and the images in the popup won't get said class.
I was wondering if there is a way to make javascript behave like CSS - to be persistent or to work all the time, so that those new images will also be targeted by my scripts?
I hope that id clear :)
Thanks!
EDIT:
I will provide a bit more information here:
Say I have a simeple function like this:
$('.somediv').addClass( '.anotherclass' );
now this function is executed after the page loads.
Is there a way where I can automatically run this function again, when it is detected that a new div of class .somediv has been added to the DOM?
Whenever the new elements are dynamically added to the page you could call a javascript function that resets all the necessary classes and event bindings. Otherwise, if you know on the server-side what classes are necessary for these items you could send them over with the class already assigned to it.
I'm very new to javascript and jquery, so I apologize if this is a very simple question ahead of time. :)
I'm using JQuery UI's Tabs in a simple webpage, and I was trying to add a double click function to the Tab names which would invoke a JQuery Modal Dialog and allow the user to change the name of the tab. Since I have a dynamic number of tabs on the page, I don't want to limit the doubleclick function to the specific tab's "id", so I've created a "class".
With what I have so far is within the dblclick function of the class "renameable-tabs". I want to override the text(), but once I'm inside the dialog constructor, $(this) now refers to the dialog box. I've tried to access the event.target and event.target.id and override the text(), but I just haven't had any luck getting it to work.
Any input/help would be appreciated! Thanks!
I've put together pretty simple jsfiddle to show the problem: http://jsfiddle.net/79Evd/
In the dblclick event handler store this is a local variable and then you can access it inside the dialog Add callback. This is an example of closure where javascript keeps track of all the variables within the scope.
Working demo
How do I use the refresh function from CodeMirror 2?
refresh()
If your code does something to change
the size of the editor element (window
resizes are already listened for), or
unhides it, you should probably follow
up by calling this method to ensure
CodeMirror is still looking as
intended.
I want to refresh all textareas after a link is clicked
I tried
$('.CodeMirror').each(function(){
getElementById($(this).attr('id')).refresh();
});
but it doesn't work....
When you instantiate the CodeMirror instance, it is placed as a property on the wrapper div.
$('.CodeMirror').each(function(i, el){
el.CodeMirror.refresh();
});
The above snippet does not recreate the editor, but instead uses the existing one.
The refresh method (just like all other CodeMirror methods) does not live on the DOM node, but on the instance object that's returned when you create the editor (by calling CodeMirror or CodeMirror.fromTextArea). So you'll have to store those somewhere for this to work.