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 !
Related
I Can see values coming through in console but the same values are not getting displayed in a webpage(Attached image(s) for easy imagiantion).
Can someone help me with the possible/expected scenarios.
Can't see values in dropdown.
Values are present/seen in console
P.S: It works well when I use Chrome browser and its a cascading menu.
Usage of "this" keyword got me in to this problem. While on my research I've used "document.getElementByID" to fetch values dynamically instead this keyword.
Thanks for your time.It's working now.
Edit: Kind of issue to one of my mates, he forgot to add text-size.
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.
On my page I'm currently doing something like this: http://jsfiddle.net/FBCSt/6/ I really don't know why, but in Chrome I got some strange issues with that - sometimes the contents of the div elements are not loaded correctly. In IE, Safari and Firefox it work fine, but as I said, in Chrome it is causing some trouble.
That's why I want to know, if there is a more sleek way to do this? (There are three buttons, every one is assigned to one div. Only one div should be visible)
I am thankful for every answer =)
EDIT: Thanks everybody. This is the solution. It works well =)
"a better way: jsfiddle.net/FBCSt/13 – #Mohammed ElSayed 20 mins ago"
Try this: http://jsfiddle.net/FBCSt/10/
In IE, Safari and Firefox it work fine, but as I said, in Chrome it is
causing some trouble.
I really don't see an issues when testing under Google Chrome 19.0.1084. But in any case,
That's why I want to know, if there is a more sleek way to do this?
Yep, there is. Since one of your tags is jQuery, I suggest you take a look at jQuery UI's tabs.
Why don't you use show() instead of toggle()? Maybe the issue is related to using toggle(). And you can combine the elements to be hidden: For example,
$('#page2,#page3').hide();
$('#page1').show();
Or as nicely put by Mohammad,
$('#page1').show().siblings().hide();
I have working solution on this url : pastebin it works in chrome and also in FF.also it will work even if you add 1000 id with page#100 but still it will not have too much code. thanks.
Like Abody97 said: try JQuery UI tabs
If you're looking for a "more sleek" way of doing this, try this fiddle: http://jsfiddle.net/NCbW6/
It doesn't bother with specific ids for each element so you can add as many as you'd like without changing the JS.
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().
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 :)