I'm having problems setting an input after a jquery load finishes. I've tried the following posts on this site, and have had no success.
- How to wait for div to load before calling another function?
- How to wait until an element exists?
- Do something AFTER the page has loaded pletely
No matter what I do, I get the following error "Unable to set property 'value' of undefined or null reference" because the input hasn't loaded by the time setValues is called.
Below is a simplified version of my code (with some things I've tried mented out). I'm running it in IE11 standards mode (no patability view). Any guidance/help is appreciated. Basically, how do I wait until the inputs are loaded to call setValues?:
frame1.html
<!DOCTYPE html>
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<input name="input1" id="input1" />
<input name="input2" id="input2" />
</body>
</html>
parentFrame.html
<!DOCTYPE html>
<html>
<head>
<script src=".10.2.min.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="div1" style="width:100px;height:100px;border:2px black solid;"> </div>
<div id="div2"> </div>
</body>
<script defer>
function setValues() {
window.document.getElementById("input1").value="TEST";
window.document.getElementById("input2").value="TEST";
}
$(document).ready(function(){
//$("#div1").load("frame1.html", setValues);
$("#div1").load("frame1.html");
});
$(window).load(setValues);
//document.addEventListener( "DOMContentLoaded", setValues, false )
/*
$("div").ready(function(){
window.document.getElementById("input1").value="TEST";
window.document.getElementById("input2").value="TEST";
});
*/
</script>
</html>
I'm having problems setting an input after a jquery load finishes. I've tried the following posts on this site, and have had no success.
- How to wait for div to load before calling another function?
- How to wait until an element exists?
- Do something AFTER the page has loaded pletely
No matter what I do, I get the following error "Unable to set property 'value' of undefined or null reference" because the input hasn't loaded by the time setValues is called.
Below is a simplified version of my code (with some things I've tried mented out). I'm running it in IE11 standards mode (no patability view). Any guidance/help is appreciated. Basically, how do I wait until the inputs are loaded to call setValues?:
frame1.html
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<input name="input1" id="input1" />
<input name="input2" id="input2" />
</body>
</html>
parentFrame.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery./jquery-1.10.2.min.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="div1" style="width:100px;height:100px;border:2px black solid;"> </div>
<div id="div2"> </div>
</body>
<script defer>
function setValues() {
window.document.getElementById("input1").value="TEST";
window.document.getElementById("input2").value="TEST";
}
$(document).ready(function(){
//$("#div1").load("frame1.html", setValues);
$("#div1").load("frame1.html");
});
$(window).load(setValues);
//document.addEventListener( "DOMContentLoaded", setValues, false )
/*
$("div").ready(function(){
window.document.getElementById("input1").value="TEST";
window.document.getElementById("input2").value="TEST";
});
*/
</script>
</html>
- 2 .load() takes an optional callback function. Check this out: api.jquery./load – JDupont Commented Jul 9, 2015 at 20:47
-
deferis for external scripts only and should be used only when thesrc=attribute is present in<script>. – ODelibalta Commented Jul 9, 2015 at 20:48 - Try replacing your "frame1.html" file's content with nothing but the <input> tags (remove all headers, wrappers... anything except those 2 lines) – Amit Commented Jul 9, 2015 at 21:13
- 1 ...you can create setInterval function which keeps going/checking for the inputs, once that returns true/we, you call setValues and remove the interval.. – jaakkoj Commented Jul 9, 2015 at 21:31
- 1 Then use a debugger and see what's not working. This way it's a guessing game – Amit Commented Jul 9, 2015 at 21:38
1 Answer
Reset to default 4You do not use the callback functionality of the first topic you have posted.
function setValues() {
window.document.getElementById("input1").value="TEST";
window.document.getElementById("input2").value="TEST";
}
$(document).ready(function(){
$("#div1").load("frame1.html", function(){
setValues();
//do more stuff after load
});
});
Some Notes:
$(window).load(setValues);
This function is called right after $(document).ready() and therefore it is probably triggered before your load() event on #div1. You have to remove this line.
Moreover you should not load an element with the whole html skeleton again, but just the elements within the body.
setValues() should use jQuery functions too, when you have initialized it anyway.
Edit:
If you do not even see the loaded content the error occurs when trying to use load(). It will return an error when you try to get a html file without a webserver. (c:/path/file.html).
XMLHttpRequest cannot load file:///C:/path/frame1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
I guess you will have the same problem. It occurs because you do not use a web server (you request your file through a file path rather than a domain/localhost). You must use http requests. Using a server such as apache (or bundled in xampp) will solve your problem.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744831546a4596112.html
评论列表（0条）