0

I'm trying to call an ASP.NET PageMethod using JQuery but don't get anything. I'm certainly missing something simple but can't figure out waht as I'm new in jQuery. GetJsonEspaces() don't work as expected ! Please can anyone hell me fix this ?

My HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/BiddyScript.js" type="text/javascript"></script>

<div class="boxCanvas">
    <canvas id="myCanvas" width="800" height="600">
      <p>Your browser does not support the canvas element.</p>
    </canvas>
</div>

JavaScript : 

var canvas;
var context;

function drawText(text, x, y) {
    context.font = '10pt Helvetica';
    context.fillText(text, x, y);
}

//will be called back!!
function drawBiddies(biddies) {
    var y = 50;
    for (var i = 0; i < biddies.count; i++) {
        var biddy = biddies[i];
        drawText(20, y, biddy.ID + " " + biddy.Libelle);
        y += 20;
    }
}

// A function that takes two parameters, the last one a callback function
function grabBiddies(options, callback) {
    //allUserData.push(options);
    callback(options);
}

//GET DATA FROM CODEBEHIND!!
function GetJsonEspaces() {
    $.ajax({
        type: "POST",
        url: "BiddyCanvas.aspx/GetEspaces",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            grabBiddies (response.d, drawBiddies);
        },
        error: function (data) {

            alert("Could not complete process !");

        }
    });
}

window.onload = function () {
    //grab the context!!
    canvas = $('#myCanvas')[0];
    context = canvas.getContext('2d');

    context.beginPath();                                      //This initiates the border
    context.rect(1, 1, canvas.width - 1, canvas.height - 1);
    context.fillStyle = "#fcfc00";
    context.fill();
    context.lineWidth = 1;                                     //This sets the width of the border
    context.strokeStyle = "#000000";      //This sets the color of the border
    context.stroke();

    //récupérer les données et dessiner!!
    GetJsonEspaces();
}

My codebehind

using System.Web.Services;

        [WebMethod]
        public static string GetEspaces()
        {
            List<BIDDY> oList = GetListEspaces();
            System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            string jsonEspaces = oSerializer.Serialize(oList);

            return jsonEspaces;
        }
        ...

Thank you !!

Tatamovitch
  • 1
  • 1
  • Define not getting anything, do you get the data back from the page method call? Run F12 tools, Firebug or Chrome Developer Tools to monitor the traffic going back and forth between the browser and the page method. If you are not getting data back, is there an error message in the console? If you do get data back, is there an error/warning in the canvas drawing function? – Karl Anderson Sep 06 '13 at 16:24
  • Doesn't it need to be a scriptmethod? http://stackoverflow.com/questions/941484/webmethod-vs-scriptmethod – Mike Miller Sep 06 '13 at 16:43
  • Finaly someone else gave me the solution, there were an error in the grabbing fson format, the correction is this : > function drawBiddies(json) { > var y = 50; > var biddies = jQuery.parseJSON(json); > for (var i = 0; i < biddies.length; i++) { > var biddy = biddies[i]; > drawText(biddy.ID + " " + biddy.Libelle, 20, y); > y += 20; > } > } Tanhk you everybody !! – Tatamovitch Sep 18 '13 at 09:12

0 Answers0