How to Load external JSON file using jquery-load-json plugin

Question

I am using jquery-load-json http://code.google.com/p/jquery-load-json/wiki/WorkingWithFormElements plugin to populate html form fields with json data.

I tried to load the json into the form as shown in the example but when I tried that I am getting data not defined. What is right way to load data from an external file into the form?

// External json file data.json

data = {
            "ID":17,
            "Name":"Emkay Entertainments",
            "Address":"Nobel House, Regent Centre",
            "Town":"Lothian",
            "Contact":"Phone"
}

//html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filling the form with the single JSON object

JQuery loadJSON plugin can be used for filling the form elements.</title>
</head>

<body>


<form name="form_simple" id="form-simple" action="details.html" method="get">

    <input type="hidden" id="ID" name="ID" />

    <label for="Name">Name</label>

    <input name="Name" id="Name" type="text" />

    <label for="Address">Address</label>

    <textarea name="Address" id="Address" rows="5" cols="20"></textarea>

    <label for="Country">Country</label>
    <select name="Country" multiple="multiple">
        <option value="">-</option>
        <option value="UK">United Kingdom</option>
        <option value="SRB">Serbia</option>
        <option value="USA">United States of America</option>
        <option value="FRA">France</option> 
    </select>

    <label for="IsFeatured">Is Featured</label>
    <input name="IsFeatured" id="IsFeatured" type="checkbox" value="true"/>

    <label for="Town">Town</label>
    <select name="Town" id="Town">
        <option value="" selected="selected">-</option>
        <option value="London">London City</option>
        <option value="Liverpool">Liverpool City</option>
        <option value="Lothian">Lothian City</option>
        <option value="Newcastle">Newcastle City</option>
        <option value="Buckinghamshire">Buckinghamshire City</option>
        <option value="Essex">Essex City</option> 
    </select>

    <label for="Contact">Contact</label>
        <input name="Contact" type="radio" value="Email"/> Email
        <input name="Contact" type="radio" value="Phone" /> Phone
        <input name="Contact" type="radio" value="Post" /> Post

    <input type="submit" value="Details" class="submit-button" />
</form>


<!-- Load jQuery and the minified plugin -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.validate.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
 <script language="javascript" type="text/javascript">

        $(document).ready(function () {
         //   var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
            $('form').loadJSON(data);
        });
    </script>
</body>
</html>

Is your server set up to serve JSON files with [the correct MIME headers](http://stackoverflow.com/questions/477816/the-right-json-content-type)? — Blazemonger, Oct 30 '12 at 15:55
yes iI wrote the javascript manually and read json from external source it work fine.. i am trying to use the plugin that not working correctly with external json file.. not sure what wrong — user244394, Oct 30 '12 at 16:15

How to Load external JSON file using jquery-load-json plugin

0 Answers0