JSON error when loading HTML content with AJAX using $.get

Forcing datatype when loading content with AJAX

I'm currently working on a package for Umbraco which involves loading of some HTML forms dynamically with AJAX.

Biggest part of the package relies on JavaScript, so everything in script has to be perfect in order to make package work properly. Therefore I started development of JavaScript library independetly of the rest of the package logic. When I finished with JavaScript library, I started integration with C# WebuserControl (since package is for Umbraco 6).

Evrerything was suppose to be fine, but some unexpected issues occurred which worked fine while I was working on a dummy HTML page.

When I moved JQuery custom library in Umbraco enviroment, actually in WebuserControl (because it is suppose to work as a custom datatype in backend) suddenly all $.get requests did not work.

The following is one of the $.get lines which did not work.

$.get("/GoogleMapper/popup-template-rectangle.html", function (data) {
            popupTemplateMarker = data;
        });
    

I was wondering why this is not working in Umbraco when it was suppose to work just fine since it is just a client side code. To figure out th reason for failing I addde error handler method to a code to see what is going on.

$.get("/GoogleMapper/popup-template-rectangle.html", function (data) {
            popupTemplateRectangle = data;
        }).fail(function (req,status,err) {
            alert(err);
        });
    

The following error message was displayed: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

This looked awkward because I was trying to load just a simple HTML and I end up with JSON exception. Apperently, callback was trying to parse loaded data to JSON and it failed because loaded data is just HTML.

After some time spent Google-ing, I came to idea to force HTML datatype when making AJAX call. Apperently this was not possible with $.get method, so I had to use $.ajax which supports setting of datatype which should be expected in a callback.

        $.ajax({
            url: "/GoogleMapper/popup-template-rectangle.html",
            method: "GET",
            dataType: "text html",
            success: function (data) {
                popupTemplateCircle = data;
            }
        });
    

This worked since I forded "text html" data type. 

I resolved the problem, but still I do not understand why this code is working when invoked from static HTML page and not working when invoked from a page on IIS.

If anyone has an explanation, I would be glad to know why is this happening?

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.


About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN  Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

SQL/T-SQL

read more

Umbraco CMS

read more

PowerShell

read more

Comments for this article