Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 297
  • Last Modified:

Select item --> loads new js content into the div

Barebones question - Say I have two divs A and B.
In Div A I have a simple select menu or hyperlinks.

When a link or selector is pressed I want to load into div B new code/content. Too keep it simple it could be loading the following

<script>
$( document ).ready(function() {

$('#B').html("I am displaying sample 1 or 2");
});
</script>

Open in new window




Im my project these are different d3.js graphs.

Essentially I just need to see an example showing how to best load this external code so it runs and displays






A sample of base is here

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jsLoad</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    

<style type="text/css">
html, body {
    width:100%;
    height: 100%, margin:0;
    padding:0;
}
</style>
</head>

<body>
<div id="A" style="width:300px;height:100px;">
    <p>Div A</p>
    <p>Show <a href="#">content 1</a><br>
    Show <a href="#">content 2</a></p>
</div>
<div id="B" style="width:300px;height:500px;">Div B<br></div>


<script>
$( document ).ready(function() {

$('#B').html("I am displaying sample 1");
});
</script>
</body>
</html>

Open in new window

0
lvmllc
Asked:
lvmllc
  • 2
  • 2
1 Solution
 
RobOwner (Aidellio)Commented:
You're most of the way there, instead of .html using .load

$( "#B" ).load( "ajax/test.html" );

http://api.jquery.com/load/
0
 
RobOwner (Aidellio)Commented:
If it is different for each link then you can utilise the onclick event of each link:

...
<a href="#" onclick="loadData('content1.html');">content 1</a>
<br>
<a href="#" onclick="loadData('content2.html');">content 2</a>
...

$(document).ready(function() {
...
});

function loadData(content) {
    $("#B").load(content);
}

Open in new window

0
 
lvmllcAuthor Commented:
I think I have this working but have a question regarding how libraries work.

from my test with jQuery it appears that since I have loaded the lib int he main page I will not have to reload - this is good as I want to avoid duplicate lib loads.

Should this then hold for other js libraries allowing me to load them once on the main page only? In this case that would allow my main page to be the app container for the rest of the project pages.
0
 
lvmllcAuthor Commented:
Also is there an easy way to keep it from cache the page it loads?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now