I am trying to attach change event handler to the instance of kendoNumercTextBox.
I am able to get the instance of kendoNumercTextBox control using its ID, however Im not able to get the instance using class name
here is the code http://dojo.telerik.com/emIWa/11
NOTE
I DO NOT want to attach event handler at the time of instantiating
the control. I want to get the existing instance and then attach the
event handler.
Also i am actually using Kendo ASP.NET MVC, however
dojo doesn't allow me to write cshtml so i am using kendo UI for
the demo purpose above. But i think end result would be same.
The NumericTextBox is created like below in cshtml
#(Html.Kendo().NumericTextBoxFor(x =>x.numerictextbox).HtmlAttributes(new {#class = "MyClass"}))
You need to use a more specific jQuery selector. This for example will get the correct element which is the one with the data-role attribute:
var numerictextboxByClassName = $(".MyClass [data-role]")
If you use the developer tools in your browser to inspect the text box, you'll see that 'MyClass' is on several elements that comprise the widget, hence the need to be more specific. It is also worth noting that the handler will only attach to the first instance found using the selector so this method cannot be used to attach a handler to several such controls at the same time.
Related
I'm still learning GWT, yet already have to face some kind of challenge for a work I have to do. Can't show any specific code so I'll try to explain it well.
Here's the situation: A certain class "Navigator" creates and save the Presenter instances of my architecture to allow reusing them. There is a method show() inside that same class that actually displays the view related but that system only works full screen by calling RootPanel.get().
What i'd like to do is showing that presenter instance's view inside of a flex panel element declared in a class myView (related to a class myPresenter) that basically uses Flex Panel to structure it's content.
To make it maybe more clear:
class myView{
...
flexPanel.setWidget(firstWIdget)
flexPanel.setWidget(secondWidget) //secondWidget to be replaced by a "thirdWidget"
...
}
I'd like the secondWidget to be replaced by another one, let's call it thirdWidget, that consists of a specific presenter instance's view.
To resume, I'd like my presenter instance's view to not go full screen but only occupy a certain area of the screen.
The displaying is managed almost entirely programmatically, means very limited use of css files and no use at all of xml ui files.
How can I manage this ?
Thanks
Use a SimplePanel as a container for your views returned by your Navigation class instead of adding them directly to root panel, and use that instance of SimplePanel where ever you want.
I want to get the list of all events for any particular component dynamically. For example : If I take a Textfield , how can I get all possible events that are mentioned in ExtJs API Doc. so that user can choose and assign the event for any component.
component.events
Contains the list you need. You could have found out by yourself reading the source of addEvents method, which is linked from any event you wanted to find in a list.
For those still wanting an answer to this, https://coderwall.com/p/jnqupq/easily-capture-all-events-on-a-component-in-extjs has provided a nice means of doing so.
When debugging an ExtJS application, you'll often find it useful to listen to all events fired by a specific component. There is actually a handy built-in static method to do this called Ext.util.Observable.capture().
Here's a handy snippet that simply logs the event name and all arguments:
Ext.util.Observable.capture(myObj, function(evname) {console.log(evname, arguments);})
Even better, if you're currently inspecting your component's main element in your browser's developer tools, you can do this:
Ext.util.Observable.capture(Ext.getCmp($0.id), function(evname) {console.log(evname, arguments);})
Where $0 is the currently selected element. Should work fine in Chrome, Firefox, Opera, Safari.
If you don't want those logs to pollute your console anymore, simply call releaseCapture on your object:
Ext.util.Observable.releaseCapture(myObj);
This removes all captures on a given object so you don't have to reference your listener explicitly (which was likely an anonymous function :)).
Bonus tip: also be sure to check out the observe method which does something similar but allows you to listen to all events fired by all instances of a given class.
During the "validate" event, I'm attempting to gain access to the different UI elements within uploader.
As of right now, I only see private methods attached to the this context. Almost all of them are "private".
In the qq.Templating object within fine-uploader I see: getDropProcessing, etc which are the exact methods I need.
Are these exposed anywhere in the event handler, or on the object where I can access them without knowing the exact classes name? Or is there a way to access the selectorClasses object?
Example of what I'm trying to accomplish:
onValidate: function(imgData, btnContainer){
// "this" context is the qq.s3.fineUploader object created.
var uploader = $(this._options.element), // uploader element
processingEl = uploader.fineUploader('getDropProcessing'); // does not exist.
}
To gain access to a file item and its children in Fine Uploader UI, use the getItemByFileId API method. All other elements are represented in your template, so you should be able to select them using whatever class/attribute/ID you have assigned them in your template.
I am a newbie in JSF.I am creating a simple page with a checkbox and a readonly field.When I deploy to weblogic server ,I get what is expected output.
Now I have put autosubmit property on checkbox and partialtrigger propery on the other readonly field.My readonly field changes as expected on changing the state
of checkbox.I was curious to find out what Ajax code has been put in finally rendered page when i declare auto submit property to true.Basically I want to know
what is the html and ajax(javascript) code difference between the case when auto submit property is enabled and disabled.Is there any tool which can compare two source codes?
Thanks in advance.
Being able to see the exact difference in code may be difficult as the associated Javascript files for your JSF component toolkit have probably been minified, however you should at least be able to see the difference in the Javascript event declarations on the generated input element.
A tool like Firebug is the best choice as it gives you the ability to highlight DOM elements and view their corresponding styles, attributes, and events. It doubles as an excellent Javascript debugger as well, allowing you to place breakpoints in JS code so that you can walk through the execution of what is happening on each click event.
When autoSubmit is false, there is likely no Javascript event being triggered. When it is true however, there is likely an onclick event being triggered that is formulating an Ajax request. You might have a hard time figuring out what is happening because it is minified, however it is more than likely making such a call.
http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/js-api/symbols/jsf.ajax.html
is it possible to delay loading of some controls on an xpage?
This is the problem: let's say you have a control that does a fultextsearch and displays the result in a repeat control. this ft search might take a long time and will hold the webpage loading in a waiting state until the search result is ready.
I want my page to load most of the data initally, and some "time consuming" controls should be loaded in to the page as a sperate request after the inital load.
this way the user will immediatly see the webpage, but some of the data on the page will load a little bit later without holding the webpage in a waiting state from the server.
possible?
The downside to using rendered is that all the value bindings will still evaluate, even if the corresponding markup isn't sent to the page. So the trick here is making sure the components don't even exist until you want them to.
Every component has a getChildren() method. This returns a mutable List of components, which has a add() method. This allows you to add components to the page on the fly, either while the page is loading, or later during an event. For the purposes of what you're trying to do, you would want to defer adding the "expensive" components until a subsequent event.
Create an event handler attached directly to the view root (), give it a unique ID (e.g. "loadExpensiveComponentsEvent", set its refresh mode to partial, set a refresh ID to whatever div or panel will contain the search results, and set its event name to an arbitrary event (e.g. "loadExpensiveComponents"). This prevents your event from being triggered by actual user behavior. Set the event's code to SSJS that will inject your components.
Then add a script block () to trigger the event after the page has loaded:
XSP.addOnLoad(function(){
XSP.firePartial(null, "#{id:loadExpensiveComponentsEvent}");
});
Your page will load without the search result components. Once the page has fully loaded, it will trigger the component injection event automatically.
For guidance on how to code the injection event, open the Java file that has been generated from your existing page to see what components need to be injected and what to set their values to.
You can pack them into a panel and set their rendered status to rendered=#{viewScope.pageFullyLoaded}. Then in the onLoad event have a XSP. partialRefresh request where you set viewScope.pageFullyLoaded=true
A little ugly but doable. Now you can wrap that code into your own custom control, so you could have a "lazyGrid", "lazyPanel" etc.
Not sure why I did not think of this before. the dynamic content control in extlib actually solves this problem. the dcc can be triggered onClientLoad both using javascript and ssjs afer the page has loaded.
one problem I am facing now is that I am already using the dcc on my site so I need to put another dcc within my dcc. and this seem to be a bit buggy. I have reported it to the extlib team on openNTF.