I am trying to write my own Dojo/Dijit Editor Plugin. the only Information i found on the topic is this forum post recommending to use the print plugin as a pattern.
So i did build my own plugin, copying the print plugin and not changing anything apart from the name.
Then i included the plugin to an editor instance.
But instead of getting the print buttons functionality and the print button, i get a button with classes "dijitButtonDisabled dijitDisabled" and no functionality.
The Print button does work though.
Anyone any idea why that is?
In JavaScript events are often hooked onto individual objects, which are referenced by things like id, classes, and other parameters. For this to work you need both the selector and the original element to match.
It sounds like you updated some parts of the code (by changing the names) but did not update the corresponding actions. I'd start by looking for any remaining events bound to the previous names (in jQuery, look for bind() or live()) and changing those selectors to the new names if you find them.
Related
how do I refresh a specific element in html using only vanilla javascript.
the goal is after adding an attribute to it with a value.
I will refresh the element.
Libraries like React are built for this purpose. But we can sort of do it with pure Javascript too. Here's what we need to do:
delete the element with parent.removeChild(element)
create another one with document.createElement(element)
set the properties the way you want element.setAttribute(name, value)
add it to the parent element with parent.appendChild(newElement)
I have working example here in this link: https://codepen.io/edo9k/pen/poyRJJN?editors=1010
But you can also update the element directly, instead of 'refreshing' it. Which can be done with element.setAttribute or getting the attribute directly like a I do changing the font size of the element in line 20 of the example: elm.style.fontSize = counter + "pt";.
Your question lacks context, but depending on what you're trying to do, you should consider a library or some alternative method of updating this element. There might be security issues doing it like the way I'm proposing here, both by modifying attributes directly or by deleting/adding a new element.
You can find detailed explanation of all these API function in Mozilla's Web Docs: https://developer.mozilla.org/pt-BR/docs/Web/API
I am working on a Web-App where users should be enabled to enter a lot of tabular data in the most convenient way possible.
Therefore I started of with a standard HTML-Table and began applying adding CSS properties and JS functions to it. So for so good. People will be able to drag around cells and duplicate rows on the fly. The latter is causing quite some issues because e.g. date fields that have a jQuery-UI Datepicker Widget enabled will mess up the functions once cloned.
I thought about adding a Pseudo-CSS Class to the cells that have JS associated with to destroy the Plugin-Instances on them and Re-Instantiate the JS upon completion. This brings me to my question:
Is there a way using JS to walk through the DOM-Tree and detect every Instance of any kind of JS-Code/-Plugin (maybe by its Namespace?) so I could attach the mentioned Pseudo-Class to that certain Table-Cell?
Thanks a lot,
Tobias
I have been evaluating a lot of different client-side JS template engines (doT, parrot, dust.js, microtemplating, underscore, etc). They all work similarly, using some type of tags to represent data, and with some giving the ability to embed pure JS into the template, including loops, if/then, etc. However, they all work by converting the template itself into a string, then into javascript, in order to interpolate the variables, execute loops, etc.
When this conversion happens, any event handlers that were attached to the original objects within the template (i.e. created by jQuery at document.ready) are of course lost. To add these handlers back to the resulting HTML would then necessitate going back and re-applying any such event handlers after each template rendering.
I'm trying to think of a way to create a template engine with full javascript support, but which preserves any events attached to the template before cloning.
Imagine a scenario where the template is for a list of items. Each item includes buttons which perform specific tasks on that item (i.e. edit, delete, rename, copy, you get the idea).
To make the code clean and easily maintainable, it would make sense to apply Click events to these buttons in the template HTML at document.ready(). Then each time the template is cloned for a new list item, the events are cloned too.
However, with current templating libraries, all events are lost at the cloning stage, which necessitates applying all events to the cloned object each time the list is updated. If this is live data, or if the user is adding new items to the list, this seems like it would become very convoluted to keep track of the events and ensure they are properly attached each time an item is added.
I know jQuery has a clone() function which clones events, and this works great for basic templates, but when you get try to incorporate arbitrary JavaScript into the template, this becomes impractical.
I am trying to avoid templates which depend on html element attributes to configure loops, decisions, etc, because the template code becomes very ugly. A clean template with simple tags for data substitutions, simple JS for-loops for repeated elements, and simple references to the source data, is desired.
Anyone have ideas on how to do this?
Instead of over-complicating templating, you should use event delegation, so that this problem does not even present itself.
And yes, jQuery had .delegate – it is deprecated, and has been replaced by .on, which can do the same thing, see http://api.jquery.com/delegate/#entry-longdesc
I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.
I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.
I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.
essentially, this is like a mirror effect, without the flip.
the closest thing I found so far is:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Any recommended practices for performing this task are appreciated.
(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).
Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.
If you're using jquery you can use one div and "clone" it. You can read this for more information.
http://api.jquery.com/clone/
If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).
I have a large application built in ExtJS and am looking for the best way to handle custom events from anywhere in the application. For example I might want to put an anchor tag in some text in the application which will open a custom component in my app. At the moment I listen to clicks on the body and if the target has a css class applied to it in a certain format I use that to perform an action.
For example I might have:
<a class="ACTION-View-Customers">View Customers</a>
My event handler will pull the classname apart and do the action. The problem with this approach is that it's difficult to pass many parameters through to the handler. What I propose is to use JSON inside the anchor's class or href tags, like so:
View Customers
Can you think of any problems with this approach and suggest any alternatives? Thanks.
I personally would not use additional meta in the HTML itself, if it can be helped. I would apply specific IDs to links of specific purpose, and bind a click event to that object. I've also found the DomQuery object (needed to find and reference the anchors) interesting to work with. Since I usually use the JQuery adapter with Ext JS, I'll use JQuery's selectors to locate the specific DOM element, and JQuery's bind functions [.click(fn)], while using Ext internal to the function itself. JQuery and Ext JS make a great combo, especially with the new JQuery 1.3.1, which really speeds things up.
I suggest using HTML5's data- attributes. For example:
View Customers
var eventsource = link.getAttribute("data-event");
HTH
As you might know, HTML tag accepts ANY named attribute. So you may create some specifically called attribute(s) and pass any value(s) to them (f.e. my-bogus-param="something"), By this you can develop any sophisticated parameter passing system. Then you can parse these attributes in event handler.