I was learning how to include external html file to the current html and I wrote simple code like this
<html>
<head runat="server">
<title>Untitled Page</title>
<script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
{
$("div").load("test.html") ;
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id = "div1" >
</div>
</form>
</body>
</html>
test.html content is
<h1>done!</h1>
the output is
done!
done!
done!
when I replace
$("div").load("test.html") ;
with
$("#div1").load("test.html") ;
or
$("form").load("test.html");
the output is
done!
I really would like to know how it works
When using ASP.net there are additional divs created by serverside code. You need to try inspect element
of F12
to check exactly how many divs you have in your page after it has been rendered.
When you use $("form").load("test.html");
you will get only one output because you have only one form in your asp.net page (which is by default)
Also when you use $("#div1").load("test.html");
You have only one element with that ID hence only that div will be populated with the result of your ajax call.
Hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.