I noticed something weird when using the uncompressed source of Dojo our code runs normally without error. I tried these two from the archives so far
dojo-release-1.10.6-src and dojo-release-1.10.8-src
However when I switch to the built versions, either
dojo-release-1.10.6 or dojo-release-1.10.8
There is an error that occurs when using dojo.query
TypeError: root.getElementsByTagName is not a function
My function call looks like this
var dom_frag = domConstruct.toDom(response);
var title = dojo.query(".accordion_title", dom_frag)[0];
where response contains HTML string. (too long to post here)
EDIT: Image of debugger showing contents of 'dom_frag'
Ok, have you checked to see if the dom_frag variable is a single dom node? If the dom fragment is multiple nodes, then the dojo.query won't work, because it needs to search the children of a single dom node.
To solve this, try wrapping the toDom contents with a single node... like so:
var dom_frag = domConstruct.toDom("<div>"+response+"</div>");
var title = dojo.query(".accordion_title", dom_frag)[0];
This is, of course, a bit of a hack... but if you can't guarantee that the response will end up a single node, then you need to do it.
Make sure your root is actually a DOM element as:
the Element.getElementsByTagName() method returns a live
HTMLCollection of elements with the given tag name. The subtree
underneath the specified element is searched, excluding the element
itself. Ref.
I am using XHTML, JSF and JavaScript to create a form, validate the information that has been submitted into their respective fields through the use of a onclick() in a h:commandButton.
I have managed to create a JS file that checks for empty fields and alerts the user if true, that works fine. I next wanted to try to make sure that the input matches the type defined in the tag using the typeMismatch property, in a function i've called Validity. Here is my code so far:
function Validity() {
var checkName=document.getElementById("formdiv:cardName");
var checkCard=document.getElementById("formdiv:cardnumber");
var checkExp=document.getElementById("formdiv:expDate");
var error="";
var inputChecks=[checkName, checkCard, checkExp];
for (i=0; i < inputChecks.length; i++){
if(inputChecks[i].value.validity.typeMismatch){
error= "Your fields dont match the required input type. E.g Card Number must be a number"
}
}
document.getElementById("errorMessage").innerHTML=error;
}
My problem lies on line 48 where i get a "Uncaught TypeError: Cannot read property 'typeMismatch' of undefined'. I have only been coding JS for a week so am relative new to it, so I'm sure it's down to how I'm declaring/ referencing something. I've have already checked w3schools and other sources all to no avail. So I'm hoping someone here will be able to help. Any suggestions would be greatly appreciated
The only thing that we can discern from the code you've given and the error is that the 'validity' property hasn't been defined.
It's important to note the difference between null and undefinied in JavaScript.
Effectively the fact that it's undefined suggests that it's never been set. My guess would be that you have some problem where either the code that's setting the validity property isn't being executed, or it's behaving differently than what you'd expect.
If you add more information such as the rest of the code (JavaScript and XHTML) someone might be able to answer more specifically.
Truthy and Falsy values might also be useful to learn about as it's quite common for these sorts of things to unexpectely happen
So, I have some code that should do four things:
remove the ".mp4" extension from every title
change my video category
put the same description in all of the videos
put the same keywords in all of the videos
Note: All of this would be done on the YouTube upload page. I'm using Greasemonkey in Mozilla Firefox.
I wrote this, but my question is: how do I change the HTML title in the actual HTML page to the new title (which is a Javascript variable)?
This is my code:
function remove_mp4()
{
var title = document.getElementsByName("title").value;
var new_title = title.replace(title.match(".mp4"), "");
}
function add_description()
{
var description = document.getElementsByName("description").value;
var new_description = "Subscribe."
}
function add_keywords()
{
var keywords = document.getElementsByName("keywords").value;
var new_keywords = prompt("Enter keywords.", "");
}
function change_category()
{
var category = document.getElementsByName("category").value;
var new_category = "<option value="27">Education</option>"
}
remove_mp4();
add_description();
add_keywords();
change_category();
Note: If you see any mistakes in the JavaScript code, please let me know.
Note 2: If you wonder why I stored the current HTML values in variables, that's because I think I will have to use them in order to replace HTML values (I may be wrong).
A lot of things have been covered already, but still i would like to remind you that if you are looking for cross browser compatibility innerHTML won't be enough, as you may need innerText too or textContent to tackle some old versions of IE or even using some other way to modify the content of an element.
As a side note innerHTML is considered from a great majority of people as deprecated though some others still use it. (i'm not here to debate about is it good or not to use it but this is just a little remark for you to checkabout)
Regarding remarks, i would suggest minimizing the number of functions you create by creating some more generic versions for editing or adding purposes, eg you could do the following :
/*
* #param $affectedElements the collection of elements to be changed
* #param $attribute here means the attribute to be added to each of those elements
* #param $attributeValue the value of that attribute
*/
function add($affectedElements, $attribute, $attributeValue){
for(int i=0; i<$affectedElements.length; i++){
($affectedElements[i]).setAttribute($attribute, $attributeValue);
}
}
If you use a global function to do the work for you, not only your coce is gonna be easier to maintain but also you'll avoid fetching for elements in the DOM many many times, which will considerably make your script run faster. For example, in your previous code you fetch the DOM for a set of specific elements before you can add a value to them, in other words everytime your function is executed you'll have to go through the whole DOM to retrieve your elements, while if you just fetch your elements once then store in a var and just pass them to a function that's focusing on adding or changing only, you're clearly avoiding some repetitive tasks to be done.
Concerning the last function i think code is still incomplete, but i would suggest you use the built in methods for manipulating HTMLOption stuff, if i remember well, using plain JavaScript you'll find yourself typing this :
var category = document.getElem.... . options[put-index-here];
//JavaScript also lets you create <option> elements with the Option() constructor
Anyway, my point is that you would better use JavaScript's available methods to do the work instead of relying on innerHTML fpr anything you may need, i know innerHTML is the simplest and fastest way to get your work done, but if i can say it's like if you built a whole HTML page using and tags only instead of using various semantic tags that would help make everything clearer.
As a last point for future use, if you're interested by jQuery, this will give you a different way to manipulate your DOM through CSS selectors in a much more advanced way than plain JavaScript can do.
you can check out this link too :
replacement for innerHTML
I assume that your question is only about the title changing, and not about the rest; also, I assume you mean changing all elements in the document that have "title" as name attribute, and not the document title.
In that case, you could indeed use document.getElementsByName("title").
To handle the name="title" elements, you could do:
titleElems=document.getElementsByName("title");
for(i=0;i<titleElems.length;i++){
titleInner=titleElems[i].innerHTML;
titleElems[i].innerHTML=titleInner.replace(titleInner.match(".mp4"), "");
}
For the name="description" element, use this: (assuming there's only one name="description" element on the page, or you want the first one)
document.getElementsByName("description")[0].value="Subscribe.";
I wasn't really sure about the keywords (I haven't got a YouTube page in front of me right now), so this assumes it's a text field/area just like the description:
document.getElementsByName("keywords")[0].value=prompt("Please enter keywords:","");
Again, based on your question which just sets the .value of the category thingy:
document.getElementsByName("description")[0].value="<option value='27'>Education</option>";
At the last one, though, note that I changed the "27" into '27': you can't put double quotes inside a double-quoted string assuming they're handled just like any other character :)
Did this help a little more? :)
Sry, but your question is not quite clear. What exactly is your HTML title that you are referring to?
If it's an element that you wish to modify, use this :
element.setAttribute('title', 'new-title-here');
If you want to modify the window title (shown in the browser tab), you can do the following :
document.title = "the new title";
You've reading elements from .value property, so you should write back it too:
document.getElementsByName("title").value = new_title
If you are refering to changing text content in an element called title try using innerHTML
var title = document.getElementsByName("title").value;
document.getElementsByName("title").innerHTML = title.replace(title.match(".mp4"), "");
source: https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML
The <title> element is an invisible one, it is only displayed indirectly - in the window or tab title. This means that you want to change whatever is displayed in the window/tab title and not the HTML code itself. You can do this by changing the document.title property:
function remove_mp4()
{
document.title = document.title.replace(title.match(".mp4"), "");
}
I'm clueless.
In my Jquery Mobile Plugin I'm declaring:
var $currentEntry = $.mobile.urlHistory.stack[$.mobile.urlHistory.activeIndex].url;
$activePage = $('div:jqmData(url="'+ $currentEntry +'")');
So I'm taking the active page's url and use it to construct an $activePage object.
This works fine on desktop, but on my iPad (iOS3.3), $currentEntry is defined correctly, but $activePage is undefined.
Question:
What can be reasons for this?
You can rule out race conditions, because wrapping this in a 10sec timeout still produces the same result. Also, if I console the respective page directly and query it's data-url, it shows the correct value. So how come the above still gives me undefined on iOS
undefined
while working correctly everywhere else?
Thanks for any hints!
EDIT:
The element will be dynamic, but I can console for the page in my setup directly like so:
console.log( $('div:jqmData(wrapper="true").ui-page-active').attr('id') );
console.log( $('div:jqmData(wrapper="true").ui-page-active').attr('data-url') );
Both return the correct id and data-url, so the elements must exist.
EDIT2:
I can query for the attribute data-url which gives me the correct value. However, I cannot select using this attribute like so:
$('div[data-url="'+$currentEntry+'"]').length
which gives me 0
I am going to admit that I am blind-guessing, but you should try:
$activePage = $('div').filter(function(){return $(this).jqmData('url') === $currentEntry})
BTW, just for semantics i think "$currentEntry" shouldn't start with a dollar sign if it is not a jQuery object.
I have a JavaScript object with some properties. Lets say:
var haystack = {
foo: {value: "fooooo"},
bar: {value: "baaaaa"}
};
Now, I want to access one of those properties, but I don't know which one. Luckily, this variable does:
var needle = "foo";
In modern browsers I seem to be able to do the following and it works:
haystack[needle].value; # returns "fooooo"
But in IE6 it throws a wobbly, haystack[...] is null or not an object.
Is there a way to achieve what I'm trying to achieve in IE6? If so, how so?
EDIT - Adding further information in response to the comments below...
What I am trying to achieve is actually related to CKEditor. I haven written a plugin image manager that opens in an iframe.
What I then want to achieve is to place the chosen image back in the correct instance of CKEditor (and there can be more than one instance on some pages).
What I have done (and I know this is an ugly hack), when the iframe is opened I have put a hidden field next to it with the name of the instance. So the parent page contains some markup like this:
<iframe><!-- Image manager --></iframe>
<input type="hidden" id="ckinstance" value="article_body" />
So then, inside the iframe when an image is selected to be inserted I have some JavaScript that looks like this:
var CKEDITOR = window.parent.CKEDITOR;
var instance = window.parent.$('#ckinstance').val();
var img = '<img src="/whatevers/been/selected" />';
CKEDITOR.instances[instance].insertHtml(img);
window.parent.$.modal.close();
This works fine in FF, Chrome, etc. Just IE6 is complaining with:
CKEDITOR.instances[...] is null or not an object.
EDIT 2
I've just done some debugging and actually it looks like IE6 is failing on window.parent.$('#ckinstance').val() and is returning undefined.
So the original problem that I've described is not the problem at all.
Still need help though :)
It's quite annoying when you spend a couple of hours scratching your head over something, only to realise the solutions is:
Tools > Internet Options > Delete Files