I nibbling on a bug in ff:
See http://nocturne.wmw.cc/bugff.html (not reproducable in jsfiddle - too bad)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<button disabled="disabled">sdf</button>
<script>
jQuery(function(){
if(!jQuery('button').is(':disabled'))
alert('Is not disabled!');
jQuery('button').removeAttr('disabled');
});
</script>
</body>
</html>
Now the Problem:
If i load the first time, everything is ok.
If i reload the page using Ctrl+r, the alert() shows the error-message.
If i Reload using Ctrl+Shift+r the bug does not occoure.
I do use Microsoft® Windows® 7.
Reproduceable at least at FF28, FF29.
How to solve?
The issue seems to be the same mechanism that stores user-input for form-elements, the state of the button has been cached.
possible solution(see: How can I stop Firefox from caching the contents of a textarea on localhost? ):
<button disabled="disabled" autocomplete="off">sdf</button>
http://jsfiddle.net/doktormolle/4ZLd9/show/
Just try disabled instead of disabled = "disabled"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
<button disabled>sdf</button>
<script>
jQuery(function(){
if(!jQuery('button').is(':disabled'))
alert('Is not disabled!');
jQuery('button').removeAttr('disabled');
});
</script>
</body>
</html>
Related
I just learnt about common header and footer technique .. Below is the code i have written
I can't figure out what is wrong with this code ..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"></div>
<script>
$("#header").load("header.html");
</script>
</body>
</html>
I tried your code with other jQuery library version and it was running to me.
I had use the jquery#1.10.1 library, and the header.html in the same directory.
You could see this running here.
you can do this easily using jquery. this is an alternative way that i use and works fine.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
It is a long time since I programmed web. How do I perform javascript frameset navigation (or replace the frameset with an exact equivalent):
<frameset rows="*,32">
<frame src="about:blank" id="viewer">
<frame src="cgi/browse.exe?images">
</frameset>
The webpage generated by browse.exe conains an javascript array with a list of files, and two buttons: previuos and next. When the user clicks next, next file should be displayed in the "viewer".
I have tried
parent.frames["viewer"].location.assign("...");
without success in FF. It works in IE. Note that the navigation works fine as long as I stay inside the same frame.
Try to replace the id with the name attribute, then it should work well in all browsers. Tested it on these pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.html</title>
</head>
<frameset cols="240,*">
<frame name="fmenu" src="leftmenu.html" scrolling="yes"/>
<frame name="viewer" src="page1.html" scrolling="yes"/>
<noframes><p>noframes</p></noframes>
</frameset>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>leftmenu.html</title>
</head>
<body>
<a onclick="window.parent.frames['viewer'].location.assign('page2.html')">test</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page1,2.html</title>
</head>
<body>
<p>START PAGE</p>
</body>
</html>
I'm trying to do a basic web page which uses both jQuery and MooTools.
You can see a working example here: http://jsfiddle.net/DddQA/
However, anytime I try to reference MooTools, it borks my page.
Here is my current code that I am having issues with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1rc1.min.js"></script>
<script type="text/javascript">
<!-- remove this line below to make the hyperlink box work correctly -->
jQuery.noConflict();
//<![CDATA[
$(window).load(function(){
$(".affiliate-scheme").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});//]]>
</script>
<!-- remove this line below to make the hyperlink box work correctly -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
</head>
<body id="affiliate-scheme">
<div class="affiliate-scheme" style="background:red">
<h3>Affiliate Scheme</h3>
<ul>
<li>Promote Us</li>
</ul>
</div>
</body>
</html>
Many thanks for any help here. Very much appreciated.
RESOLVED:
http://jsfiddle.net/DddQA/2/
The w3c validator service complains that the following html is invalid. It does not like the ampersand(&) in my javascript. But ampersands are allowed in javascript strings, aren't they?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript">
function search(query) {
redir = "http://search.mysite.com/search?s=FIN&ref=&q=" + query;
window.location.href = redir
return false;
}
</script>
<span>This is all valid HTML</span>
</body>
</html>
All browsers will take this, but to make it valid X(HT)ML you need to put the Javascript code in a CDATA block.
Even in javascript w3c validator don't like ampersands. Try to comment your javascript from validator
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[//><!--
function search(query) {
redir = "http://search.mysite.com/search?s=FIN&ref=&q=" + query;
window.location.href = redir
return false;
}
//--><!]]>
</script>
<span>This is all valid HTML</span>
</body>
</html>
No, it is indeed not valid. If you want to use in-line JavaScript in an XHTML file, you'll need to wrap the JavaScript in CDATA. If you don't want to do that, then you're stuck with encoding &, < and >, which in JavaScript can be quite a pain.
Please, help me with one problem. I have this code, for submitting form via anchor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnLogout").click(function() {
$('#frm').submit();
return false;
});
});
</script>
</head>
<body>
<form id="frm" action="/" method="post">
<div>
<p>
<label for="txtLogin">Login:</label>
<input name="txtLogin" />
</p>
<div>
<a id="btnLogout" href="javascript:void(0)">выход</a>
</div>
</div>
</form>
</body>
</html>
It works fine on IE7,8, Opera and Google Chrome, but does not work on FireFox 3.5.
I can not understand why it does not work?
Based on the answer to the same question here: Jquery Form.submit() on Chrome works but not in Firefox
Add the form object to the DOM before submitting:
$("#actionform").appendTo("body").submit();
According to this , manual submit with jQuery doesn't work under Firefox when the form has been added trough Javascript
The solution consists to clone the form and submit it :
$('#myform').on('submit', function(e) {
e.preventDefault();
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
$(this).clone().appendTo("body").submit(); // FF only
} else {
this.submit(); // works under IE and Chrome, but not FF
}
});
This works for me :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnLogout").click(function() {
$("#actionform").submit();
return false;
});
});
</script>
</head>
<body>
<form id="actionform" action="something.html" method="post" name="forma">
<label for="txtLogin">Login:</label>
<input name="txtLogin" />
Uno mas
</form>
</body>
</html>
Try to include a submit button in your form. Even if it is hidden.
<input type="submit" style="display:none;" />
This may be a FF issue not related to jQuery directly. Try putting a filename in the action attribute like this:
<form id="frm" action="/index.html" method="post">
Just make sure to change index.html to whatever your default document is.