How to include external html if exists, else do nothing?

Question

I have a page that uses jquery and I want to detect if an external file exists. If it does, I want to load it into a div, but if it doesn't, I want it to do nothing.

I'm using this code and it works to load the file, but it's loading a 404 error page if the external file does not exist. I am very new at jquery and would appreciate any help. Also, the method to check for the file needs to have rootdomain+ so that the code can be plugged into multiple sites with no edits.

$(function() {
      $('#test').load('/pages/test.html');
});

Any help would be greatly appreciated. I've been searching for days but the only things I have found are head check scripts that don't have the option of doing nothing if the url isn't valid. I would love to know how to write this simple code myself but right now it's over my head. :)

Jeri

hunter · Answer 1 · 2011-02-02T13:02:44.820

4

Try using the ajax() method rather than load() and set your html() in the success callback:

$(function() {
    $.ajax({
        url: "/pages/test.html",
        cache: false,
        dataType: "html",
        success: function(html){
            $('#test').html(html);
        }
    });
});

edited Feb 02 '11 at 13:02

answered Feb 01 '11 at 14:28

hunter

62,308
19
113
113

Ok, obviously I'm doing something wrong since none of the examples here are working for me. The actual code in action doesn't use a url with a .html extension. The back end of the site ends up naming pages "pages/test/" with no suffix. Should this still work? Because it doesn't. – Jeri Feb 02 '11 at 11:31

score 2 · Answer 2 · answered Feb 01 '11 at 14:29

2

Using an Ajax call:

$.ajax({
  url: '/pages/test.html',
  success: function(data){
      $('#test').html(data);
  },
  statusCode: {404: function() {
    $('#test').html('Unable to retrieve data. Please try again');
  }
});

answered Feb 01 '11 at 14:29

Fran Verona

5,438
6
46
85

Wow, I posted the same answer that you! – Fran Verona Feb 01 '11 at 14:40

score 0 · Answer 3 · answered Feb 01 '11 at 14:56

I've considered doing something similiar. I'd tackle it with Ajax. A google search yielded code someone else has already built at [XUL Ajax site][1] that seems to do what you want -- assuming using Ajax to load the other page is OK.

With a bit of coding you can use this trick to display nothing, a message, or a different page if the one you want isn't found... Right now, the code will display the 404 as it exists, but it's a fairly trivial change. In fact, if you download the archive of scripts on the bottom of the page, and open the responseHTML.js file, you can uncomment a single line to make it do nothing if the other page doesn't exist.

The code sample uses hardcoded div names, but you can easily change those to be your own, or modify the function to accept them as parameters. I plan to use this code in the very near future on one of my own sites that needs to redirect if another page is down.

I can't think of a good way to do this WITHOUT doing something with Ajax...

Hmm. I got distracted at work, and the link didn't load anyways. The other answers are essentially the same, and even simpler for jQuery. The raw javascript is good for pages that aren't using jquery too, so still probably worth leaving linked here.

http://www.xul.fr/ajax/responseHTML-attribute.html

How to include external html if exists, else do nothing?

3 Answers3

Linked