2

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.

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 commented out). I'm running it in IE11 standards mode (no compatability 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.org/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.com/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>
Community
  • 1
  • 1
Jonathan Chaplin
  • 2,442
  • 1
  • 18
  • 21
  • 2
    .load() takes an optional callback function. Check this out: http://api.jquery.com/load/ – JDupont Jul 09 '15 at 20:47
  • `defer` is for external scripts only and should be used only when the `src=` attribute is present in ` – ODelibalta Jul 09 '15 at 20:48
  • Try replacing your "frame1.html" file's content with nothing but the tags (remove all headers, wrappers... anything except those 2 lines) – Amit Jul 09 '15 at 21:13
  • I tried that @Amit, and I still get the error. – Jonathan Chaplin Jul 09 '15 at 21:25
  • 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 Jul 09 '15 at 21:31
  • 1
    Then use a debugger and see what's not working. This way it's a guessing game – Amit Jul 09 '15 at 21:38
  • @jaakoj this was useful. Once I used setInterval and viewed in the console I kept seeing the same error over and over. Basically the frame wasn't getting added to the DOM because load requires a webserver. I had this example on my local PC. – Jonathan Chaplin Jul 10 '15 at 14:08

1 Answers1

4

You 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.

oshell
  • 8,923
  • 1
  • 29
  • 47