jQuery .after() not working in IE - javascript

I am trying to add a table row to a table using .after() but it's not working in any IE, I keep getting this error "Object required" and the error seems to be coming from line 5151 in my jQuery library.
Here is my code:
$('#view').live('click',function(){
var parent = $(this).parent();
parent.after("<tr><td>Test</td></tr>");
});
Any ideas?

A likely reason is that the HTML code isn't valid without a table tag.
Create the elements as separate elements instead:
parent.after($('<tr/>').append($('<td/>').text('Test')));

I would definitely validate your HTML first; this kind of thing often fails beacuse IE is less "generous" when things aren't valid.
Do you know what parent is? is it definitely a tr?

Works fine for me in IE, FF and Chrome: demo.

Related

Jquery selector not working in Chrome?

I used Jquery to select two elements and hide them with their attributes by the following:
$('input[name=login]').hide();
$('span[class=forgot]').hide();
Both lines properly selects the desired elements and hide them well in FF and IE. However in chrome, the selector is not picking up the object. Anything I should do differently?
You should use:
$('input[name="login"]').hide();
$('span[class="forgot"]').hide();
(note the additional quotes)
It may be that you're missing quotes:
$('input[name="login"]').hide();
Also, for classes, you might as well use the native selector:
$('span.forgot').hide();
For the span selector, you can use:
$('span.forgot').hide();
As for the input, you can use:
$('input[name="login"]').hide();
look for console errors in developer tool.
you can try with
jQuery('input[name=login]').hide();
jquery('span[class=forgot]').hide();
You should try:
$(document).ready(function(){
$("input[name='login']").hide();
$('span.forgot').hide();
});
Thanks guys, turns out there is some issue with me referencing the Jquery library.
I do not know what is the reason, but referencing the library does not seem to be working.
After I copy pasted the entire Jquery Js file into the code. Everything works.
Again Thanks all for your help.

alternate option for getElementById in JS?

I have a MVC app.
I have written JS code below in the "Create" view. The code below code works perfectly in Google chrome and Mozilla Firefox; but it's not working in IE 8.
$('#PaymentType').change(function(){
var ptype=document.getElementById("PaymentType").value;
});
So I changed it to the code below and it works... on IE 8 as well
$('#PaymentType').change(function(){
var ptype = $(this).val();
});
Now, the problem is that I am not going to use getElementById anymore...
What if I want to get the values from another control? Which alternate option is there available to getElementById?
You just use $('#otherId').val() to get the value.
Also on a side note in your second code example you could've just used var ptype = this.value;
If you're using jQuery you don't need to use document.getElementById anymore.
I would be interested to know why it doesn't work though, it looks like it should.

Problem with jQuery - error when trying to find 2 tags

I have the following DOM structure:
/*:DOC += <div id='testDiv' class='testDivClass'><div id='innerTestDiv'></div></div><span id='testSpan' class='testSpanClass'><span id='innerTestSpan'></span></span>
Now I tried to run jQuery select against them as follow. The first one returned alright, but the second one failed:
// works
var result = $('#testDiv')[0];
alert(result.id);
// failed: id is null or not an object
var result2 = $('#testSpan')[0];
alert(result2.id);
I tried selecting id instead of class and got the same results.
My question is: how can I get the second select to work? Is there some sort of invisible iterator/pointer in jQuery which I need to reset to the beginning of the DOM before the second select?
Thanks.
EDIT: Ok this is the official "does not work" version. testDiv matched, but testSpan did not, hence I got an error saying id is null or not an object error in the second alert.
UPDATE: I did a test by swapping testDiv and testSpan in the html. Now BOTH select failed.
UPDATE2: I have changed the html back to what it used to look like. I'm using JsTestDriver to write up the test, but it is actually not calling anything at the moment. The actual html looks messier than this (more nested tags). I'm trying to get this simplified version to work first. It appears that jQuery was able to get into the first select, whether it'll be span or div, but couldnt get out of it to do the second select. I've replaced jQuery.js and jsTestDriver.jar to no avail.
Thanks.
The .className selector matches by class, not ID.
Therefore, $(span.testSpan) won't match any elements.
You need to change it to $('span.testSpanClass') ot $(span#testSpan') (using the #id selector, which matches ID).
For more information, read the documentation.
I don't know why, but for me your code worked well.
I added $(document).ready(function() { before that code, and when I opened the test page, the alert box showed up perfectly, both of them! I don't know when do you want this alert box showed, but if it is when visitor open the page, just add that code. Otherwise, add
function objectid() {
var result = $('#testDiv')[0];
alert(result.id);
var result2 = $('#testSpan')[0];
alert(result2.id);
}
That code worked well for me, too.
PS: Sorry if you don't understand my bad english.
More than likely, there is something else wrong with the HTML you're actually using. Since you're posting only a tiny bit of the html, we can't actually test your problem. Post the entire page, or at least the smallest piece of it that actually has the problem when you run your test.
I tested the jQuery code you reported on JS Bin, and the code worked fine. As the code is very basic, I don't think the problem is caused by the version of jQuery used.
What I ended up doing is wrapping the entire html with a div or span tag. I found that jQuery could not get out of a div/span tag once it gets into one (in my above example), so I just make it to go into a div/span tag once.
Not sure whether this is a patch or ugly fix, but it solved my problem for now.
Thanks for all the help!
Use "#" to select by id, use "." to select by class...

How to get TextArea contents without error in IE?

I am using jQuery, and I get the contents of a TextArea as follows:
// get the SQL from the text area at the top:
//sql = $("#sql").val();
//sql = $("#sql").text();
sql = $("#sql").attr("value");
<textarea id="sql" rows="9" cols="99"></textarea>
This works fine in all browsers except IE
I have tried several ways, but nothing works in IE
It gives me the message: "Object doesn't support this property or method".
There must be a simple way to do this that works in all browsers, right?
I see you commented out:
sql = $("#sql").val();
That actually is the correct way to get the text in a TextArea. It works in all browsers.
Make sure that you don't have another HTML element with the same id as the textarea. This could be the source of the error.
I don't think textarea has a value attribute. I think using .val() should work though.

Debugging IE8 Javascript Replace innerHTML Runtime Error

function DeleteData(ID)
{
var ctrlId=ID.id;
var divcontents=document.getElementById(ctrlId).innerHTML;
var tabid=ctrlId.replace(/div/,'tab');
var tabcontents=document.getElementById(tabid).innerHTML;
alert(document.getElementById(tabid).innerHTML);
document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";
document.getElementById(ctrlId).innerHTML='';
}
I am trying to replace the Table with empty table but
document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";
this line is causing Unknown Runtime Error
You can't set value to a table's innerHTML, you should access to child cells or rows and change them like that :
document.getElementById(tabid).rows[0].cells.innerHTML = 'blah blah';
For more info/example : Table, TableHeader, TableRow, TableData Objects
In IE8, you cannot change the innerHTML of an object when the code that attempts that is fired from within the object.
For example:
<span id='n1'>
<input type=button value='test' onclick='DoSomething(this);'>
</span>
with the following code tucked in some remote corner of your document:
<script type='text/javascript'>
function DoSomething(element)
{
document.getElementById("n1").innerHTML = "This is a test"
}
</script>
This will fail with the error unknown runtime error. I believe it has to do with the fact that you're trying to replace the HTML code which fired the current line of execution. The onclick event is part of the code being replaced by the DoSomething function. IE8 doesn't like that.
I resolved my issue by setting a timer event for 250 milliseconds, such that the function called at the end of the 250 milliseconds replaces the span's innerHTML.
I find out that in IE8 some elements are in readonly: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
Therefore if you try to set innerHTML for these elements IE8 notify alter with Unknown Runtime Error.
More details here: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx.
The simplest way is to convert read-only elements to div element.
I had the same issue but my error was because I was inserting a p tag directly underneath a p element as in:
document.getElementById('p-element').innerHTML = '<p>some description</p>';
I don't really see how this is HTML format error; seems more like another IE8 bug.
Great, I had the same situation with setting the innerHTML. When I read this I realised that one of the elements was a TR and one was a TD and the TD was working.
Changing the code so that they're both TDs fixes it, which means that it is a rather non-obvious problem caused by the structure of tables.
Presumably it throws the DOM awry when I start changing table rows since it can't store the table as an array any more.
I'm sure IE could give a more informative error message since it can't be that uncommon for the DOM to change on the fly and it seems strange that this would only throw an error for tables.
Ohh yes - remember that the HTML structure has to be valid.
I tried loading an entire page into a <p> tag - it failed (obviously), changing it to a <div> tag solved my problem!
So remember the HTML structure!
why it happend in IE...
case scenario:
Javascript unknown runtime error in IE while accessing Div inside Div to add ajax contents.
solution:
dont ever place nested divs in between the form tags to play with there contents .. :)
When using YUI try to use
Y.one('#'+data.id).setContent(html);
instead of:
Y.one('#'+data.id).set('innerHTML' , html);
If you need to set innerHTML to "" (empty string) then you can use removeChild instead
This is not a Big issue, since i faced same problem few days ago and the reason this error
occurs in ie is that - There exists an error in our html format or you are using an element other than <td> to replace innerHTML ie use only, dont use tables,divs to replace innerHTML.
SwapnilK

Categories

Resources