Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

First Ajax jQuery example

Posted on 2011-09-19
6
Medium Priority
?
278 Views
Last Modified: 2012-05-12
Ive been trying to get my first ajax jQuery code working and about to give up. I cannot figure out what it wrong, and it doesnt seem to be pussing any errors.

The code I think is quite simple, that is pull in the file test.html and stick the contents into the div with the ID 'result', however it doenst ever seem to fire.

<head>
    <title></title>
    <script type="text/javascript" src="..\jquery-1.6.4.js"></script>

    <script type="text/javascript">
        $(".trigger").click(function() {
            $.ajax({
                type: 'GET',
                url: 'test.htm',
                dataType: 'html',
                sucess: function(html, textStatus) {
                    $(".result").append(html);
                    },
                error: function (xhr, textStatus, errorThrown) {
                    $(".error").append(errorThrown ? errorThrown : xhr.status);
                    }
                })
            });
    </script>
</head>
<body>
<div id="trigger">Trigger</div>
<div id="result"></div>
<div id="error"></div>
</body>
</html>

Open in new window



Any ideas what Im doing wrong :-S
0
Comment
Question by:tonelm54
6 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 36560269
You code try to use class instead id :
<div id="result"></div>
<div id="error"></div>

should be :
<div class="result"></div>
<div class="error"></div>

or replace << . >> by << # >> in your selectors to use ID
0
 
LVL 20

Assisted Solution

by:chaitu chaitu
chaitu chaitu earned 500 total points
ID: 36560277
$("#result").append(html);
 $("#error").append(errorThrown ? errorThrown : xhr.status);
0
 
LVL 6

Assisted Solution

by:limweizhong
limweizhong earned 500 total points
ID: 36560365
Just a guess here: you spelled "success" wrongly...?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:tonelm54
ID: 36560665
Ok, so spelling mistakes corrected, and # replaced with ', but still doesnt work :-(

<head>
    <title></title>
    <script type="text/javascript" src="..\jquery-1.6.4.js"></script>

    <script type="text/javascript">
        $("#trigger").click(function() {
            $.ajax({
                type: 'GET',
                url: 'test.htm',
                dataType: 'html',
                success: function(html, textStatus) {
                    $("#result").append(html);
                    },
                error: function (xhr, textStatus, errorThrown) {
                    $("#error").append(errorThrown ? errorThrown : xhr.status);
                    }
                })
            });
    </script>
</head>
<body>
<div id="trigger">Trigger</div>
<div id="result"></div>
<div id="error"></div>
</body>
</html>

Open in new window


Any ideas?
0
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 36560687
0
 

Author Closing Comment

by:tonelm54
ID: 36561068
Excellent, thank you for you help :-)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question