Set input values when jquery load() finishes

Question

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>

.load() takes an optional callback function. Check this out: api.jquery.com/load — JDupont
– JDupont, Commented Jul 9, 2015 at 20:47
defer is for external scripts only and should be used only when the src= attribute is present in <script>. — ODelibalta
– 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
– Amit, Commented Jul 9, 2015 at 21:13
...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
– jaakkoj, Commented Jul 9, 2015 at 21:31
Then use a debugger and see what's not working. This way it's a guessing game — Amit
– Amit, Commented Jul 9, 2015 at 21:38

oshell · Accepted Answer · 2015-07-09 21:52:46Z

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.

edited Jul 9, 2015 at 21:52

answered Jul 9, 2015 at 20:50

oshell

9,1511 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jonathan Chaplin Over a year ago

Thanks for the reply Hosch, but I still get the error. Please re-read my question I've tried the callback function already.

oshell Over a year ago

have you removed the $(window).load() function while trying this? It occurs before and will stop js from running.

Jonathan Chaplin Over a year ago

I have. It's basically as you suggested in your post and still the error occurs.

oshell Over a year ago

I think the problem occurs when using load(). I edited my post.

Jonathan Chaplin Over a year ago

Thanks Hosch! I made this example on my desktop. Once I used a webserver it worked perfectly!

|

Collectives™ on Stack Overflow

Set input values when jquery load() finishes

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related