Another Example 7-1 Thread

steve2k2 · #1 (**permalink**) May 5th, 2011, 12:33 PM

Recently bought this book at B&N...great so far, but I also have a problem with the JSON part of Chapter 7 example 1. I tried putting double quotes around the keys and values in the .json file, but still the Fetch button does not retrieve results. Is there another solution? I tried both IE8 and Firefox.

Thanks

richard.york · #2 (**permalink**) May 5th, 2011, 12:38 PM

Can you post the relevant code, so we can see if the code looks right?

steve2k2 · #3 (**permalink**) May 5th, 2011, 12:54 PM

Sure, here is the js (hope I am using the right code tag format)
Followed by the json file and the html. First part of the form works like it should, but the json part does not return anything.

Thanks!

Code:

$(document).ready(
  function() {
    $('input#tmpFetchName').click(
      function($e) {
        $e.preventDefault();
        $.get(
          'Example 7-1.xml',
          function(xml) {
            $('input#tmpFirstName').val($(xml).find('firstName').text());
            $('input#tmpLastName').val($(xml).find('lastName').text());
          }
        );
      }
    );

    $('input#tmpFetchOther').click(
      function($e) {
        $e.preventDefault();
        $.getJSON(
          'Example 7-1.json',
          function(json) {
            $('input#tmpTitle').val(json.title);
            $('input#tmpCompany').val(json.company);
          }
        );
      }
    );

    $('input#tmpPostData').click(
      function($e) {
        $e.preventDefault();

        var $data = $('form :input').serialize();

        $('div#tmpPostedData').html(
          "<h4>Posted Data:</h4>" +
          $data
        );

        $.post(
          'Example 7-1 Post.xml',
          $data,
          function(xml) {
            if (parseInt($(xml).text()) > 0) {
              alert('Data successfully posted!');
            }
          }
        );
      }
    );
  }
);

json file

Code:

{
  company : 'Springfield Electronics',
  title : 'Chief Widget Maker'
}

html file

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html; charset=utf-8' />
    <meta http-equiv='content-language' content='en-us' />
    <title></title>
    <script type='text/javascript' 
            src='../jQuery.min.js'></script>
    <script type='text/javascript' src='Example 7-1.js'></script>
    <link type='text/css' href='Example 7-1.css' rel='stylesheet' />
  </head>
  <body>
     <form action='javascript:void(0);' method='post'>
       <fieldset>
         <legend>jQuery AJAX Recap</legend>
         <p>
           jQuery's $.get() method can be used to retrieve XML-formatted
           data, which jQuery makes incredibly easy to work with by 
           allowing you to use jQuery's rich selector API on XML documents.
         </p>
         <div>
           <label for='tmpFirstName'>First Name:</label>
           <input type='text' name='tmpFirstName' 
                  id='tmpFirstName' size='25' />
         </div>
         <div>
           <label for='tmpLastName'>Last Name:</label>
           <input type='text' name='tmpLastName' 
                  id='tmpLastName' size='25' />
         </div>
         <div class='tmpButton'>
           <input type='submit' name='tmpFetchName' 
                  id='tmpFetchName' value='Fetch Name' />
         </div>
         <p>
           jQuery also has first-class support for JSON, a data trasport
           format that is fast-rising in popularity and use.  
           JSON-formatted requests are even easier and less verbose to
           work with.
         </p>
         <div>
           <label for='tmpTitle'>Title:</label>
           <input type='text' name='tmpTitle' 
                  id='tmpTitle' size='25' />
         </div>
         <div>
           <label for='tmpCompany'>Company:</label>
           <input type='text' name='tmpCompany' 
                  id='tmpCompany' size='25' />
         </div>
         <div class='tmpButton'>
           <input type='submit' name='tmpFetchOther' 
                  id='tmpFetchOther' value='Fetch Title &amp; Company' />
         </div>
         <p>
           Finally, jQuery makes it very easy to post data back to the
           server, via its serialize() method.
         </p>
         <div class='tmpButton'>
           <input type='submit' name='tmpPostData' 
                  id='tmpPostData' value='Post Data' />
         </div>
         <div id='tmpPostedData'>
         
         </div>
       </fieldset>
     </form>
  </body>
</html>

richard.york · #4 (**permalink**) May 5th, 2011, 01:22 PM

The JSON format requires double quotes.

Code:

{
  "company" : "Springfield Electronics",
  "title" : "Chief Widget Maker"
}

steve2k2 · #5 (**permalink**) May 5th, 2011, 01:45 PM

Quote:

Originally Posted by richard.york

The JSON format requires double quotes.

Code:

{
  "company" : "Springfield Electronics",
  "title" : "Chief Widget Maker"
}

After reading the other thread about this, I tried that as well, but still had the same problem.

I also tried single quotes around all of them.

I am getting no error message, just no results in the title and company field.

Steve

steve2k2 · #6 (**permalink**) May 5th, 2011, 01:53 PM

Quote:

Originally Posted by richard.york

The JSON format requires double quotes.

Code:

{
  "company" : "Springfield Electronics",
  "title" : "Chief Widget Maker"
}

I just copied all files to my external server and it worked like it was supposed to.

The internal version that does not work was called like this:

http://marconi:8084/samples/Example 7-1.html

Do you suppose the included port could cause a problem? The internal one is using IIS as a web server (I think IIS 6). The external one that works I believe is Apache.

Steve

steve2k2 · #7 (**permalink**) May 5th, 2011, 02:11 PM

Quote:

Originally Posted by steve2k2

After reading the other thread about this, I tried that as well, but still had the same problem.

I also tried single quotes around all of them.

I am getting no error message, just no results in the title and company field.

Steve

It does appear from postings elsewhere that there is an IIS 6.0 and JSON problem - I tried some of the configuration solutions but none helped. I don't know if the post below would help (is there some sort of jquery stringify function that would work?)

http://stackoverflow.com/questions/5...working-in-iis

Steve

richard.york · #8 (**permalink**) May 6th, 2011, 11:20 AM

I've had problems calling certain files before from a web server and not explicitly encoding a space to its URL-encoded entity, i.e., %20. So that might have something to do with it.

All of the book's files were prepared and tested without a webserver so that you could download the package and get at it right away.

Need to download code?

Navigation