Opera: trouble with adding 'list' attribute - javascript

Today I've decided to add html5 datalist to certain input via user script. Here's the code. The problem is that list attribute isn't added. If I change it to anything different from list, like lst - it's there.
Is that supposed to be so? Is such behaviour set by specification or by browser?

OK, I did some research on this.
Spec says that input.list returns related datalist object, not the attribute value. So you should use setAttribute('list','edit-subject-themes') on input, which works fine. Seems like it was jQuery issue.
With problem solved, I'll sure use that technique in user JavaScript a lot :)

Related

Cloning a DIV with multiple inputs in Jquery Mobile

I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.

Internet Explorer 7 onclick event on submit button does not fire

I have a form which submits via ajax to the back-end and I'm writing a general disable function in javascript that I can use to set the onclick of an element. Typing this into the browser so ignore any syntax errors in the following.
function(elementID , processingText) {
var element = document.getElementById(elementID);
if (element) {
element.setAttribute("onClick", "alert('test')");
}
}
So basically the element should have an onclick event to set an alert. I can confirm that the onclick attribute is being set correctly and it fires in IE8+, Chrome and Firefox. It will not fire in IE7.
The element I'm testing on is a submit button in a form (one form on the page). It has many fields and one submit button.
EDIT The code dispatches with an action so it should submit anyway but not until after the alert has been acknowledged /EDIT
I've trawled the net for the past two hours and the following solutions do not work or are not an option-
Add a hidden input field to form.
Wrap submit button in tag and set the onclick in this tag.
Changing case of onclick to onClick
Any solutions which involve altering the html without using javascript are not an option, I'm trying to create a general disableElement function. I can target the script at IE7 so it does not have to work in all browsers, just IE7.
Any help would be greatly appreciated
IE7 has a lot of compatibility issues, of which this is just one. If you're writing javascript that needs to be compatible with IE7, you will end up writing a lot of redundant code that does the same thing in two different ways to cater for different browsers you're supporting.
Issues like this in old browsers are precicely the reason why libraries like jQuery exist. jQuery does a lot of things, but one thing it does very well is iron out many of these nasty little quirks that crop up when writing cross-browser javascript.
The cross-browser issues have become less important in recent years, as modern browsers (including IE) have much better standards support, but if you're supporting old browsers , and old IE versions in particular, my recommendation is to use jQuery (or a similar library), because they have already solved this problem, and plenty of others that will catch you out.
If you do use jQuery, your code will become:
$(element).click(function() {alert('test');});
Before anyone points it out, yes I know the OP didn't specify jQuery in the question, and may not want a jQuery answer, but in this case I would say it is the best answer available, because if you don't use it, you will end up having to write much of the same compatibility code yourself that is already in jQuery.
IE 7 does support setAttribute method but it seems that it is not possible to change an onclick attribute with it. For more info about this issue check this: Why does an onclick property set with setAttribute fail to work in IE?
Cheers

jQuery select box val undefined in IE9

I am facing a bug for now more than 2 hours.
I have a javascript code that generate (from json) a two levels select box for task and subtask.
I just figured out that this code doesn't work on IE9 and maybe other versions, and I was not able to find out why.
I created a JsFiddle to show you my code
http://jsfiddle.net/jkU6Y/18/
The goal is just to find the subtask ID to send via ajax or the task ID if the subtask is not selected.
On IE, I can't get this value and it return undefined.
document.write won't register the HTML you are writing out with the DOM in IE. Try to append it to body:
$("body").append($(html));
I cleaned my code and now it's working, so I think that the problem came from the fact that two or more elements may in certain situation have the same ID.
Thanks for your help cbayram and Jan Dvorak, have a good day !

Best way to locate source of Warning: Empty string passed to getElementById()

Warning: Empty string passed to getElementById().
Source File: chrome://browser/content/browser.xul
Line: 0
Some days ago I started getting the above message while developing my site. Things are working as they should (or at least I think they are), but I want to find out where this is coming from. I use jQuery so do not use getElementById() directly. Plus I have Firebug and the Web Developer extension for Firefox running.
I could laboriously put in code to check for an empty string being given to a jQuery selection or maybe look into jQuery itself, but my skills are minimal, so I'm asking here if anyone has offhand a good idea for quickly locating the source of the warning messages.
Source File: chrome://browser/content/browser.xul
This means that the error is in a Firefox extension, not in your code.
Was receiving this warning in Firefox.
I just came across this warning and found that there were labels for input fields but the labels for attribute was not set/empty so just completing the for attribute fixed this issue for me.
// Label's for attribute not set which caused the warning in FF
e.g. <label for=''>Text</label><input type="text" name="text" id="text" value="" />
If you are querying by '#' selector -- ensure the selector is unique (as it should be) or you will end up with this error in ff
In my case this was caused by Firefox performing HTML5 checks on the input fields on my form.
Once the "required" property was removed from the form elements everything seemed to work fine again.
This was something brought about by the MVC framework I use which generates these properties based on the model validation rules that require a field to be non-empty.
This answer was really helpful to me in finding why it was happening so I decided to share.
I've placed the following code OUTSIDE document.ready and got this error.
// Enable Line Items ONLY AFTER general info is filled out!
$( "#client_estimate_continue_next" ).click(function(e) {
//e.preventDefault();
console.log(this.id + ' click event fired.');
// DO SOMETHING...
});
I was able to fix the error by simply placing it INSIDE document.ready
Additional info:
I got the error but in my case it was coming from my own script according to FireFox.
I believe I got the error because I made a reference to the id of an element that was not yet fully rendered eg. NOT ready.
Warning: Empty string passed to getElementById().

Make text selectable in html pages looking like iPhone forms

I am working on an application than needs to create pages looking like this:
http://iui-js.appspot.com/samples/music/music.html#_usage
The problem I have is that, just like in the page linked above, the values are not selectable neither with iSafari nor with the desktop version of Safari.
I need to be able to select and copy the values (in the example page these are '2', '8' and '27').
I would be fine simply knowing why the above text is not selectable in the first place, as this would probably be enough to find a workaround solution.
Thanks everybody for the kind attention.
In this case the problem is caused by the following option
-webkit-user-select:none;
Alternative options, for the same property, are auto and text.
Further documentation available on Safari CSS reference page

Categories

Resources