开发者

Is the jQuery Fundamentals Chapter 7 Ajax solution code not working?

开发者 https://www.devze.com 2023-02-27 01:27 出处:网络
I tried my hand at the first exercise for Chapter 7 (Ajax) in R Murphy\'s jQuery Fundamentals. I now want to run the solution code to see how it\'s supposed to work.

I tried my hand at the first exercise for Chapter 7 (Ajax) in R Murphy's jQuery Fundamentals. I now want to run the solution code to see how it's supposed to work.

However when I copy/paste the code from the solutions/load.js file into my data/load.js file, save everything and reload the page it doesn't seem to work. All I get is the console.log(id) output that's called before e.preventDefault(). I was expecting the blog content from blog.html to appear on the page, underneath the headline in index.html "Blog post 1".

Update with code

Here's the jQuery source in question (from the file solutions/load.js):

$(document).ready(function() {
    var $blog = $('#blog');
    $blog.find('h3')
        .each(开发者_StackOverflowfunction() {
            var     $this = $(this),
                $target = $('<div/>').insertAfter($this);

            $this.data('target', $target);
        })
        .click(function(e) {
            var     $this = $(this),
                $a = $this.find('a'),
                $target = $this.data('target'),
                href = $a.attr('href'),
                id = '#' + href.split('#')[1];

            console.log(id);
            e.preventDefault();

            $target.load('data/blog.html ' + id);
        });
});

As I understand it, the code should pull the html from data/blog.html and replace the html that's in each of the three <li> in the $('div.module #blog') element.

However when I run the code that doesn't happen. No errors are generated in Firebug and the console.log(id) call works as expected, returning what looks to be the properly formed string in 'id'.

Am I mistaken about how this is supposed to work?


I could reproduce the problem. This is the fix:

Replace the line

$target.load('data/blog.html ' + id);

by

$target.load('data/blog.html div' + id);


Few guidelines

  1. Those exercises probably all work as expected. But it depends whether you've put them on IIS or you're running them locally on your disk. All instructions are most likely in the book itself.

  2. If you're having problems with them, the best thing to do is to use Firebug and see what's going on.

  3. Your question is very hard to understand hence you're not getting any answers. First you talk about the Ajax exercise (which I found in exercices/ajax.html) but then you link to completely different files in comment. That's why we all wanted you to provide some code. Community usualy works this way: if you want people to put some effort and time in answering you, the same thing is expected from you. You should put some effort and time into writing a thorough an clear question as well. Otherwise it all becomes confusing and in the ens many people may be unhappy and disappointed.

  4. As I tried to put ajax.html on JSBin.com I say I needed ajax.js as well, which did not reside in the folder linked in the HTML file (should be js/ajax.js but is ../solutions/ajax.js)... The same thing goes with Ajax requests that also go to various paths that may be invalid. Firebug should quickly show you what's going on.

Anyway. As you have all instructions in the book how to do these exercises I advise you to follow those steps and I'm sure this code should start working. Things don't seem that complicated so it would be hard for students/readers/learners to understand.

HTML is quite basic and very simple.

What can you do then?

You can either wait for someone else that has:

  1. read the same book and
  2. done the same exercises and solved these issues

Or you can use Firebug, debug the code and see why it doesn't work and ask particular and clear questions here.

Many would probably like to help you, but since you don't provide any code and even your links are confusing, so it's hard for us to just take plunge into something.

0

精彩评论

暂无评论...
验证码 换一张
取 消