0

I am trying to load mine data.json file so I can display text when I click on the button. I am new to wonders of JQuery so it is hard for me to understand how to do this properly.

This is mine json file, portion of html where I have tried to load mine json.data. You can see that i have tried to load json.data into html but when I do that nothing is displaying, and I rely do not know how to wrap this, want to achieve this, but whit loading data.json into html. So can some one help me work this out.

[
    {
        "all": {
            "id": "all",
            "data": {
                "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            }
        },
        "cover": {
            "id": "cover",
            "data": {
                "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            }
        },
        "diy": {
            "id": "diy",
            "data": {
                "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            }
        },
        "marketing": {
            "id": "marketing",
            "data": {
                "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            }
        },
        "other": {
            "id": "other",
            "data": {
                "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            }
        },
        "special": {
            "id": "special",
            "data": {
                "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            }
        },
        "vip": {
            "id": "vip",
            "data": {
                "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            }
        },
        "design": {
            "id": "design",
            "data": {
                "datatext": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
            }
        }
    }
]

Portion of HTML:

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">



        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
        <link rel="stylesheet" href="css/bootstrap-theme-min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
        <link href="css/carousel.css" rel="stylesheet">
        <script>
          $.getJSON("json.data", function( json ){
            $('div[class^="move"]').on('click', function(){
              var id = $(this).attr('id');
              alert(a[id].data.datatext)
              $('#main-view').text(a[id].data.datatext); // in #main-view display text
            })
          });
        </script>

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
<body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <!-- Navigation -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
            <img style="height: 30px; margin-top: -5px;" class="img-responsive" alt="" src="img/logo/Logo.png">

        </a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav">
            <li id="ribbon"><a href="#"></a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Protfolio</a></li>
            <li><a href="#">Membership Plan</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>

    </div>
</div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <!--SERVICES SECTION -->

      <section class='circle-animation'>
        <div class="container-fluid">
          <div class="row">
            <div class="hidden-xs hidden-sm">
              <div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
                <div id="middlepapir" class="jumbotron">
                  <div class="row">

                    <img id="main-view" class="papir img-responsive" src="img/circle/11.png" alt="">
                    <div class="row">
                      <div id="all" class="move1 col-sm-4 col-xs-4 col-md-push-4"> 
                          <a href="#"><img class="position1 round" src="img/circle/off/home-all-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="cover" class="move2 col-sm-4 col-xs-4 col-md-push-1">
                          <a href="#"><img class="position2 round" src="img/circle/off/home-cover-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="design" class="move3 col-sm-4 col-xs-4 col-md-push-7">
                          <a href="#"><img class="position3 round" src="img/circle/off/home-design-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="diy" class="move4 col-sm-4 col-xs-4">
                          <a href="#"><img class="position4 round" src="img/circle/off/home-diy-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="marketing" class="move5 col-sm-4 col-xs-4 col-md-push-8">
                          <a href="#"><img class="position5 round" src="img/circle/off/home-marketing-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="other" class="move6 col-sm-4 col-xs-4 col-md-push-1">
                          <a href="#"><img class="position6 round" src="img/circle/off/home-other-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="special" class="move7 col-sm-4 col-xs-4 col-md-push-4">
                          <a href="#"><img class="position7 round" src="img/circle/off/home-special-icon-off.png"></a>
                      </div>
                    </div>
                    <div class="row">
                      <div id="vip" class="move8 col-sm-4 col-xs-4 col-md-push-7">
                          <a href="#"><img class="position8 round" src="img/circle/off/home-vip-icon-off.png"></a>
                      </div>
                    </div>
                  </div>
                </div>   
              </div>  
            </div>  
          </div>    
        </div>
      </section>
            <!--end circle-container-->
Improve this question
4
  • Can you make a fiddle out of this ? Commented May 28, 2015 at 5:10
  • 1
    wrap your js code inside $(document).ready(function() { }), and try Commented May 28, 2015 at 5:13
  • Can you please update your code in plnkr.co, so that we can help you. Commented May 28, 2015 at 5:22
  • @stanze just give me a minute. Commented May 28, 2015 at 5:24

2 Answers 2

Reset to default
1

Your JavaScript snippet is running before the rest of the HTML has finished rendering.

This portion of code needs to be wrapped in a $( document ).ready() call.

    <script>
      $(document).ready(function(){
        $.getJSON("json.data", function( json ){
          $('div[class^="move"]').on('click', function(){
            var id = $(this).attr('id');
            alert(a[id].data.datatext)
            $('#main-view').text(a[id].data.datatext); // in #main-view display text
          });
        });
      });
    </script>

Or, you can move it to the bottom of your <body></body> tag. This is not as good a solution. Still wrap it in the document.ready method.

EDIT:

Since you were getting a 404 Not Found error from the $.getJSON() AJAX call, it means you'll need a server.

Basically, If your json.data file isn't actually being served from localhost, you won't be able to just make ajax calls by loading the static html file into your web browser. Setting up a simple Node.js server is pretty quick and painless.

You'll simply want to set up a route to serve up the json.data file. Take the server.js code snippet from that link and modify the GET Requests section to look like this:

/* **************
 * GET Requests *
 * **************/

// index.html
app.get(‘/‘, function(req, res) {
  res.sendFile(‘index.html‘);
});

// json.data
app.get(‘json.data‘, function(req, res) {
  res.sendFile(‘json.data‘);
});

Also, you should consider renaming json.data to data.json.

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

6 Comments

I have wrap the code like you proposed, but still not loading it, is there a bather way to load it into mine html, it is hard for me to make a fiddle example out of this, but I will try.
Is the Chrome console showing any errors from the ajax call .getJSON()? Are you getting a 404 Not Found or anything?
Have you checked that your JSON is valid with a linter after modifying it? jsonlint.com
Will do, I am having some network problems, I will update mine progress sonn.
Mine json is valid, I have check that and I now I have made a pure json file, check the server in mine Chromium and yes it is displaying 404 page not found error, how can I fix this, so I can load it locally. I have updated mine data.json to new data.json. @DannyDelott
|
0

First of all check if the json file is avaliable on your server. Just go to http://yourservername/json.data

Also, your json.data file shouldn't have any javascript it should be plain json. It should contain "{ ... }" instead of "var a = { ... }"

After you change the contents of the json file your javascript function should look something like this:

$.getJSON("json.data", function(json) {
    $('div[class^="move"]').on('click', function() {
        var id = $(this).attr('id');
        alert(json[id].data.datatext)
        $('#main-view').text(json[id].data.datatext); // in #main-view display text
    })
});
Improve this answer

1 Comment

Whait I do not need to wrap it around $(document).ready (function (){}), after I remove var a in data.json, I will chek the server after I manage to solve this network issues.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.