CODEWITHSUNDEEP
javascriptasp.netjsonjquery
Bmo
Bmo

Reputation: 1212

Retriving JSON values from asp.net response with jQuery

I'm working on a small project. Mostly to gain some understanding because I am a complete web noob. Which may or may not be apparent in the following question(s).

My end result is fetching a bunch of values from a database. Putting them into a JSON object and then using some jQuery/JavaScript to work with the data. I've been doing a ton of reading, been through tons of posts on here but I can't find something as it relates to my problem.

I'm working in VS2010 C#. I'm bound by IE7 on the client side, but I can test with Firefox. I'm also working on localHost for now.

My JavaScript is as follows.

function plotMarkers() {
var pathStart = new String(window.location);
var newPath = pathStart.replace("Default.aspx", "getMarkers.aspx");
alert(newPath);
$("#statusDiv").html('<a href="' + newPath + '">JSON Data</a>');

$.getJSON(newPath, function (data) {

    alert("Loading JSON");
    $.each(data, function (index, elem) {

        var myLatlng = new google.maps.LatLng(elem.lat, elem.lng);
        var marker = new gogle.maps.Marker({
            position: myLatlng,
            title: elem.title
        });

        marker.setMap(map);
    });

}, function () { alert("loaded") });}

I don't get any Javascript errors in Firefox, but I do in IE7. The alert("Loading JSON") never fires anywhere. I've never seen it.

My getMarkers.aspx code

public partial class getMarkers : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        JavaScriptSerializer jsonSer = new JavaScriptSerializer();

        List<marker> markerList = new List<marker>();
        markerList.Add(new marker(-34.397, 150.644, "Test"));
        markerList.Add(new marker(-50, 150.644, "Test2"));

        string sJSON = jsonSer.Serialize(markerList);
        Response.ContentType = "application/json";
        Response.Write(sJSON);
    }
}

I can click the link in "statusDiv" and it takes me to the aspx page. I get an error in IE7 but it works fine in Firefox. The JSON that is parsed back to me in those pages is correct. I copy and pasted the response in another function and the plotter put the two pins on my map.

  1. The code does not seem to enter the $.getJSON function.

  2. There is a problem with IE7 (or a problem in general) with how my getMarkers.aspx is set up. Googled some tutorials and this is where I ended up. I might be completely wrong in my approach. Or I missed something I was supposed to do. I can't seem to find that specific tutorial, it must have been closed on accident amidst my furious 2 day and counting Google adventure.

Firefox getMarkers.aspx displays the JSON as the first line followed by the html. Just plaintext in the browser.

IE7 displays an XML error and tells me the JSON string isn't allowed at the top level of the document. I did read some articles about IE7 always trying to parse XML with an elaborate workaround. Which I can't do, because I don't know how many clients will be using it. Is there a better way to do what I'm doing?

If anyone could point me in the direction I need to go I would greatly appreciate it. Hopefully my post isn't too convoluted.

Upvotes: 1

Views: 701

Answers (3)

bedane
bedane

Reputation: 1127

Are you trying to display markers on a map in an existing page when the #statusDiv link is clicked ? If so, you're doing it wrong : dont put a link in #statusDiv, just make sure the getJSON function is called when you click on it. try this :

function plotMarkers() {
    var pathStart = new String(window.location);
    var newPath = pathStart.replace("Default.aspx", "getMarkers.aspx");
    alert(newPath);
    $("#statusDiv").text('JSON Data');
    $("#statusDiv").on('click',function(){

        $.getJSON(newPath, function (data) {

        alert("Loading JSON");
        $.each(data, function (index, elem) {

            var myLatlng = new google.maps.LatLng(elem.lat, elem.lng);
            var marker = new gogle.maps.Marker({
                position: myLatlng,
                 title: elem.title
            });

            marker.setMap(map);
        });

    }, function () { alert("loaded") });
});
}

Upvotes: 0

samjudson
samjudson

Reputation: 56853

You probably want a Response.End() at the end of your page load method, so that the rest of the web page isn't rendered after your JSON.

Upvotes: 1

Chris Dixon
Chris Dixon

Reputation: 9167

It looks to me, for starters, that you need the json2 library to handle the issues with IE7.

As for firing your function - I can't see anywhere where plotMarkers() is actually called, it's only defined?

Upvotes: 0

Related Questions