error2013
asked on
Javascript Load sections of website by reading json
I have a simple html page that uses bootstrap grid.
Each page of the grid I've labelled as a section.
Example data:
What I want to do is to load the different grid parts by reading json data.
So basically, the page loads, reads the json data which contains the positions of the sections and then populates the website.
Each page of the grid I've labelled as a section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">Section 1</div>
<div class="col-md-4">Section 2</div>
<div class="col-md-4">Section 3</div>
</div>
<div class="row">
<div class="col-md-6">Section 4</div>
<div class="col-md-6">Section 5</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Example data:
{
"section": "section1",
"position": "5"
}
What I want to do is to load the different grid parts by reading json data.
So basically, the page loads, reads the json data which contains the positions of the sections and then populates the website.
ASKER
The data just means the id of the div and the position in the grid of that div
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
In the data is says section1, position: 4 .... section1 should be in the 4th position and it's at the first.
you want to swap
<div class="col-md-4">Section 1</div>
with
<div class="col-md-6">Section 4</div>
and those divs does not have any id! they have some text!
<div class="col-md-4">Section 1</div>
with
<div class="col-md-6">Section 4</div>
and those divs does not have any id! they have some text!
Open in new window