CODEWITHSUNDEEP
ajaxjquery
a4aLien
a4aLien

Reputation: 25

My first attempt with AJAX - Stuck

This is in reference to http://jsfiddle.net/DLy6j/ 

     var echoHTML = '<img src="URL-TO-MY-IMAGE.JPG"/>';

        $.ajax({
            type: 'post',
            url: '/echo/html/',
            data: {
                html: echoHTML,
                delay: 2
            },
            beforeSend: function () {
                $('#slider0-4').html('Loading...');
            },
            success: function (markup) {
                $('#slider0-4').html(markup);
                $('#slider0-4 img').on('load', function () {
                    //$(this).after('<div>Image loaded</div>');
                    alert('Loaded');
                });
            }
        });

(jQuery wait till AJAX page is fully loaded).

This is my first attempt trying to use $.ajax

I cannot get my image to load. I have changed the echoHTML to the image-URL on my server, AND have tried uploading my html on there thinking it might not work offline, but to no avail.

My guess is that somethings wrong here "url: '/echo/html/',". Have tried using my image in the JSFiddle above there and it loads just fine.

Somebody show me the correct way to do this?

Upvotes: 0

Views: 89

Answers (2)

Blake Mann
Blake Mann

Reputation: 5490

I think you've just been a little mislead by that jsfiddle example.

When the url '/echo/html' is being passed in, it is sending a request to that url, which handles the data that you pass through, and then passes something back to the success function. jsFiddle allows you to simulate ajax requests because they have an Echo API which has these pages built.. but when you call it, it is trying to call http://www.bilalbinsaeed.com/echo/html/, which does not exist.. which is throwing an error, which means the success function will not run properly.

You will need to create another file which handles your ajax request. I would recommend doing a little more research into what AJAX is, and how it works.

Upvotes: 1

tjons
tjons

Reputation: 4769

It loads an image for me. It is a little unclear what you are asking, but it seems like you are getting hung up on getting it to load from JSFiddle to your site. Don't try to do that. Cross-Origin Resource Sharing won't work on JSFiddle without changing the headers on your site.

Upvotes: 0

Related Questions