Jquery Selector not working in IE7 - javascript

For the following HTML
<div id='parent'>
<input id='child' type=hidden value=''/>
</div>
I am doing
$('#parent #child').val('test')
OR
$('#parent > #child').val('test')
but none of the above is working in IE7. It does work in Firefox though
Any idea why is it not working ?

is it because you've got the HTML wrong? You should use " for attribute values. Sometimes IE is more sensitive to these things than Firefox

Your syntax seems correct. The only stuff I can think of that can muck this up are:
Make sure you've got your code between a $(document).ready() block
Maybe try .prop() instead of .attr() if you're using jQuery 1.6+

Try $('#child').val('test'); which would probably give the same result.

Related

Why jQuery selector works on Chrome but not on Safari?

I have the following code:
var l = $("input[name*=hello").length;
$('#result').text(l);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input name="hello" type="text">
</div>
<div>
<input name="hello" type="text">
</div>
<div id="result">
</div>
Where the jQuery selector is:
input[name*=hello
Check that the selector is not correctly written input[name*=hello since a ] is missing.
On Chrome I get on the div[id=result] the amount of inputs that I have with the name "hello" (2).
But on Safari I get an error on the Console:
Which is correct, so the question is: Why did Chrome "autocorrect" the selector? Is it possible to remove that behaviour?
If the selector doesn't contain any jQuery extensions, jQuery will use the browser's built-in document.querySelectorAll() function. When the selector is invalid, the behavior is unspecified, so it may differ between browsers. Some browsers try to "fix" the selector and return something useful, while other browsers signal an error. You shouldn't depend on this -- write correct selectors.

jquery data tag

I have the following setup
<div onclick="EditCalendarEvent('#_schedulerEvent.SchedulerID','#_schedulerEvent.SchedulerItemID', event)"
class="ScheduleEvent_Draggable ScheduleEvent"
data-schedulerID="#_schedulerEvent.SchedulerID"
data-schedulerItemID="#_schedulerEvent.SchedulerItemID">
#_schedulerEvent.Subject
</div>
alert($(ui.draggable).attr("data-schedulerID"));
alert($(ui.draggable).data("schedulerID"));
The first alert returns the proper ui, the second alert statment return undefined.
Which version of jQuery you are using. http://api.jquery.com/data/
Please use the latest version of jQuery. This is effective from 1.4 version. Please visit the above link for more information.

Issues with jquery id selector

I have this snippet of HTML:
<div class="clearfix" id="menu-file-div">
<label id="menu-file-label" for="id_menu_file">From File</label>
<div class="input">
<div id="file-upload">
<input type="hidden" name="menu_file" id="id_menu_file" />
<script type="text/javascript">var field_id = "id_menu_file";</script>
<script type="text/javascript">var append_to_element_id = "menu-upload";</script>
<script type="text/javascript">var loader_element_id = "newmenu-modal";</script>
<noscript>
<p>Please enable JavaScipt to upload a file.</p>
</noscript>
</div>
</div>
</div>
In my console, when I try to use the jquery id selector, it fails to return the input element:
> $("#id_menu_file")
[]
Any thoughts on why this is so? I feel like I'm missing something simple. Thank you!
EDIT - some other javascript was removing the element, that is why it's not showing up. Thanks all for your help.
To repeat my first answer (which may be applicable to others reading this post later, and which was deleted despite the fact that it "fundamentally answer[ed] the question"):
Is this HTML inside of a frame (iframe or regular)? That could make it difficult for jQuery to find your element, unless you give it the right context.
To add a context to a jQuery selector you just provide that context as an extra argument, for example: $('TD', aFrameElement);
If the element in question is not inside a frame (which is the case for zallarak), the problem is almost certainly a timing issue: the jQuery selection is happening before the element has gotten loaded on the page. You can test this theory by adding the following code (anywhere):
$(function(){
console.log($("#id_menu_file"))
});
If that is the problem, simply wrap your code in $(function(){ to fix matters.
try :
$("#id_menu_file").get(0)
$(selector) return arrays

xml() function in jQuery

There is already the html() function in jQuery.
The problem I am having with this function is that, in its returned html string, all the self-closing / are stripped off from the elements. For example,
<div>
<input type="text" name="textbox1" value="" />
</div>
Becomes:
<div>
<input type="text" name="textbox1" value="">
</div>
I know this is normal for this function since this is valid in html.
But I would like to have a function that returns valid xml so that the / is still there in the returned string.
It seems jQuery itself does not provide such a function, so I wonder if anyone knows of any plugin that can make this possible.
Thanks in advance.
I think you are misconceiving how browsers interpret HTML. They don't keep a copy of your source file and modify it according to your Javascript. Rather, a browser reads your HTML and parses it into a DOM representation. This corrects any mistakes you may have made in your HTML. When you try to get the HTML of an element, the element is converted to a string according to the current DOCTYPE. Since you probably have an HTML doctype (it's quite hard to get a browser to genuinely treat your document as XHTML), you get HTML returned to you.
Doing this in Javascript is almost certainly not the way to go.
I think this is what I need.
Thank you very much for everyone's reply.
http://code.google.com/p/jquery-clean/
UPDATE 1: I thought this plugin would work but actually it does not. The way I use it is that, I pass it the html string returned by html() and let it fix the tags which do not properly self-close.
However, the way it corrects the tags is not what I need (seems like a bug).
For example, passing it the following html:
<div><input type="text" id="txt1" name="txt1"><label for="txt1">TextBox1</label></div>
It gives:
<div><input type="text" id="txt1" name="txt1"><label for="txt1">TextBox1</label></input></div>
Rather than:
<div><input type="text" id="txt1" name="txt1" /><label for="txt1">TextBox1</label></div>
UPDATE 2: The bug I mention above is already fixed. This plugin works now. If you want to test it out, feel free to paste your html in this page and see if it works for you:
http://www.antix.co.uk/Content/Demos/jQuery-htmlClean/Test.htm
You could try using the native .innerHTML property (you cen get the native element using .get() in jQuery).

Javascript does not work in IE8

The following JavaScript works on IE7 but not on IE8:
onclick=history.back(1) or history.go(-1)
Any suggestions on why this is the case and how to overcome it.
Have you tried:
onclick="history.back()"
with the quotes?
And, responding to your statement that it doesn't work: au contraire, mon ami.
The following two files run fine on my IE8 install, using the files x1.html:
<html><head></head><body>
X1
<hr>
x2
</body></html>
and x2.html:
<html><head></head><body>
X2
<hr>
<button onclick="history.back()">Back!</button>
</body></html>
When I load x1, I can move to x2 with the link, then the button moves back to x1.
This works in all three compatibility modes, ergo it must be a setting on your browser which is affecting this.
One thing I had to do to get this to work was to go to Tools -> Internet Options -> Advanced -> Security and select Allow active content to run in files on My Computer, so it's almost certainly a security setting in your browser which is causing you grief.
i used this and works well :
<asp:Button ID="Back_BTN" runat="server" Text="بازگشت"
onclientclick="javascript:history.back(1);return false;" />
I also had this problem. Never check its also the same on ie7 or not
Code like below cant run on IE8. Can on FF3.5
<select size="2">
<option onclick="alert('hey hey')">Hey hey</option>
<option onclick="alert('a ha')">A Ha</option>
</select>
However, this on work
<select onclick="alert('uh oh')" size="2">
<option>Hey hey</option>
<option>A Ha</option>
</select>
I had the same problem and solved it like this...
<input type="button" value="Back" />
You need to put history.back() into your a href tag and also the onclick event.
Try history.back(), if that doesn't work then try this history.back();return false;
It may be a simple reversal of quotes. Try this
lblmessage.Text += '<br> <u>Back</u>'
instead of this
lblmessage.Text += "<br><a href='#' onclick='history.back(1);'> <u>Back</u></a>"
This isn't the answer, but maybe it will help someone else dig up the real answer... The issue might be related to IE8's compatibility mode. Weird things happen in IE8 based on the DOCTYPE of the web page. If your DOCTYPE is Transitional, IE8 might not properly handle the onclick event.

Categories

Resources