CODEWITHSUNDEEP
javascriptjqueryhtml
Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

Set input values when jquery load() finishes

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>

Upvotes: 2

Views: 8799

Answers (1)

oshell
oshell

Reputation: 9123

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.

Upvotes: 4

Related Questions