Question

I need to set CSS values in the ready function below.

   $(document).ready(function ()
   {
      $("<div id='" + 1 + "' class='box'></div>").css("left", 105).css("top",  54).appendTo("#center").draggable();
      $("<input type='text'></input>").appendTo("#" + 1);
    }

It works fine, then it create a textbox within a draggable div and place them at top:54 and left 105. Now I need to get X,Y from server query, and I’ve tried this:

    $(document).ready(function ()
    {
        $.ajax({
            type: "POST",
            url: "Default.aspx/Get",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg)
            {
                var singleControls = msg.d.split('.');

                $.each(singleControls, function (key, value)
                {
                    var singleParameters = value.split(',');

                    if (singleParameters[0] != "")
                    {
                        var ids = singleParameters[0];
                        var type = singleParameters[1];
                        var cordX = singleParameters[2];
                        var cordY = singleParameters[3];

                        var container = $("#center").position();
                        var x_Coord = cordX - container.left;
                        var y_Coord = cordY - container.top;
                        $("<div id='" + ids + "' class='box'></div>").css("left", cordX).css("top", cordY).appendTo("#center").draggable();
                        $("<input type='text'></input>").appendTo("#" + ids);
                    }
                });
            }
        });

Where Get() returns X,Y, with this it creates the div, but it places it at 0,0.
Can someone please explain why this isn’t working?

sample: https://skydrive.live.com/redir.aspx?cid=d7fc3da7fdbc700d&resid=D7FC3DA7FDBC700D!302&parid=D7FC3DA7FDBC700D!301

Answer 1

if you are hard coding the left and top styles, then why not add them to the .box style in your style sheet like so

.box{
position:absolute;
left:105px;
top:54px;
}

otherwise the css function should look like the following:

.css({
    position:'absolute',
     left:'105px',
    top:'54px',
    });​

here is a jsfiddle.net example