I want to add telerik RadNumericTextBox to innerHTML using javascript or jquery. How can i achieve this?
If you mean the RadNumericTextBox specified here, then you are looking for a server solution that has nothing to do with javascript.
innerHTML is a property of a DOM element that can't exist until firstly a DOM and secondly an element within it exists. So if you are looking for a server-side solution it has nothing to do with innerHTML or javascript (at least in regard to adding suitable markup at the server in ASP.NET).
If you are looking for equivalent functionality to be applied on the client, you can validate input at some convenient time (that is, convenient for the user) which is likely when a form is posted or when the user leaves the field in question (which will typically dispatch a blur event and perhaps a change event if the value changed).
You can also use the HTML5 input#type=number, however that will only work in browsers that support it (a good percentage don't).
A listener that validates that the value of a form control (probably an input in this case) is quite simple to write and attach to the element if that is what you want. In any case, innerHTML is unlikely to be involved in a suitable client-side solution.
What are you actually trying to do?
Related
I am currently working on writing the test automation for a web application that loads as an SWF file for our end-users, but a fully functioning Javascript version exists for the sole purpose of automation.
I have means to navigate through the application with keyboard shortcuts, but when it comes to executing click commands, I have no luck at all. Upon inspecting with Firebug/Firepath, the only value that I could find was an xpath (no id exists, no class, no anything really).
The next issue is the xpath itself.
It is:
Really brittle.
.//*[#id='flow']/div[1]/div/div[7]/div/div[3]/div[4]/div/div/div/div/div/div/div/div[3]/div[1]/img
This appears to be the xpath to the image that represents the button, not the button itself.
Executing .click() commands on the above type of xpath will do nothing until you manually hover your mouse over the button (regardless of moveToElement commands), where it will "click" the image but no functionality will run.
So I'm wondering after digging around in the actual JavaScript looking for identifiers, is there any way to select an element through any other properties? Or is there any way I can better "identify" a function? Perhaps find the xpath to the button that the image represents?
Using JUnit and Java, if that helps.
Thanks
Apparently, my comments answered the OP's question, so here goes, for reference sake:
If you need "the button itself", as you wrote in your question, use Inspect Element from the browser to find out what the actual element is you need and then simply remove from the right-hand side of your XPath expression enough axis steps until the part that remains selects the ancestor element that is the actual button element.
Now you should be able to send it a click event.
I'm afraid there won't be much we can do about the XPath statement to be "brittle", simply because you do not have an identifier to go on. That means that if the structure of the page changes, you will have to change the XPath (unless some of the ancestor elements have some notable identifiers).
I'm analyzing a piece of software made by others, it's called Editarea. This software is made in Javascript and it colorizes the word step by step while you're typing. This is the most useful feature of this software for me, as I have to make an editor which colorizes the words in real time. The problem is that I cannot understand "HOW" this task is being done by the javascript editor of editarea.
Is it possible to perform a real time color of a text in javascript without actually using onkeypress or onkeydown events? Or, for being more specific, is it possible to perform it by selecting a portion of text with a selection object or a range object depending of which browser the user is using?
I'm wandering because a cannot use a debugger(the script is all included in a string in the original version) so it's very hard to understand where the script i'm modifing is changing the color of the text.So I'm only asking if it can really be done only with a selection object or you absolutely need an onkeypress or onkeydown event to perform the task.
Thank you all for the answer.
Agnese
I don't have time to dig through their code, however, I can give you a clue as to where to look.
There is an obfuscated area of code in the form of a literal string being evaluated when the code runs, at the bottom of the 'edit_area_full.js' file. Take this code and look for everywhere either JQuery or raw Javascript is using this DOM element. I bet at some point, an event handler is being added dynamically when this code runs during the body 'onload' event.
I was wondering if it was possible to create a new kind of input, as opposed to the normal number, text, etc. For example, I am making a forest fire model for my internship, and one thing I am trying to add is wind. I was wondering if I could do something like <input type='wind'/> and define what that would look like and how it would behave. I could do it some other ways, but I also just wanted to know if it would be possible to do something like this.
Thanks
The list of available input types is here: http://www.w3.org/community/webed/wiki/HTML/Elements/input
The type attribute is enumerated (i.e. you can only use those values) with default of text.
However there is nothing stopping you from adding class="wind" or the like to the input and using JavaScript to alter the behavior of all such inputs.
In practice, nothing really prevents you from writing <input type='wind'/> in HTML and styling and scripting it, e.g. (using jQuery) $('input[type=wind]').click(handler). It won’t be valid HTML, but this just means it does no conform to specifications; browsers don’t care about that. They will treat the element as a normal text input box, because they do not recognize the attribute value and will therefore use the default type='text'. This means that the DOM node has text as the value of the type property, but its attributes array (well, array-like object) still has wind as the value for type
So it would be like using <input class='wind'>, as suggested by #ExplosionPills, just using a different attribute name, and with extra complications. Either way, the fallback (in situations where scripting is disabled) is an ordinary text input box.
If the fallback is not relevant (the page would not work at all without JavaScript), it would be simplest to use a span or div element with class and implement it the way you like. Then you would not have to deal with the default rendering and behavior of normal text input box; it can be a bit tricky to wipe them out in favor of your own rendering and functionality.
I have a problem embarrassing problem with hidden field not being part of DOM; at least I cannot find it using JavaScript. Field has "id" and "name" attributes, it is in the form, has a value and can be seen when looking at the view source in browser. So, I attach a click handler to a button, which looks for a hidden field using either document.getElementById or using jquery selectors (any combination of the selectors, by Id, by class name etc) and it is not part of DOM. How is this possible, or is it even possible? What could be a cause if this?
Edit:
Markup is huge, so I did not want to paste it in here. My question was basically, is it possible for hidden field to be missing from DOM. Why are people down-voting this? Is it not a valid question?
Maybe the field has been removed, the browsers viewsource doesn't care about changes of the DOM(It is just the response he gets from the server).
Use e.g. firebugs HTML-tab to inspect the current DOM.
Its possible if your javascript code is running as is, ie not inside a DOM ready event, but as in the normal flow of the document. If your javascript code is placed above the html that declares this hidden field, then the browser will execute the javascript before it got the chance to create the elemeent. You are able to see it in view source because by that time the browser has rendered everything.
So my blind guess is that your js code in NOT inside a DOM ready event. I could very well be wrong. Please post the least possible html markup and css and javascript that will reproduce this problem. You may use jsfiddle.net to share the code with us ...
In my application i am enabling and disabling a button according to the value selected by the user from the <h:SelectOneMenu>. I am using a valueChangeListener for the same operation.My doubt is whether it is good to use javascript or the valueChangeListener for better performance.
Rule #1: JavaScript can be disabled.
By the way, the valueChangeListener already won't be fired automatically without a little help of JavaScript. The onchange="submit()" part is JavaScript.
Depends on what you want to do once the value changes. With javascript, the only way to trigger a server side action is to submit() the form via the onchange attribute. This simply submits all information to the backing bean. The valueChangeListener on the other hand gives you more control on the server side (what element changed, what was the old value, what was the new value)