1

I have a problem here..

I had done drag n drop image using jquery. Then after drop, I get the xy coordinate of the image..Then a pop up message will display..inside the pop up message user can insert the name of the location they want to name..There is a save button in the pop up message. When click save, Iwant the xy coordinate and the name of the location is being inserted into sql server management. How to do that??? Do I have to use ajax http request?? Please help me!!.....

This is my code what i've done so far:

$('#dragThis').draggable({
        cursor: 'move',        // sets the cursor apperance
        containment: '#dragThis2',
        drag: function() {
        var offset = $(this).offset();
        var xPos = Math.abs(offset.left);
        var yPos = Math.abs(offset.top);
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);


},
stop: function(event, ui) {

 // begin: you can use the code below where ever you'd like to display the popup

$('.popup').remove();

var $d = $('<div></div>')
    .addClass('popup')
    .html('<form method="POST" action="your_action.html"><div><label>Set a     name          for  your location</label><div><input type="text" name="location_name"   /></div></div><button type="save" class="save">Save</button><button type="button"    class="cancel">Cancel</button></form>')
    .appendTo(document.body)
    .hide();

     $d.find('button.save').click(function(e) {
        e.preventDefault();
        $('#dragThis').draggable('disable');
        alert('Saved'); 
        $d.remove();
    });

    //insert







    $d.find('button.cancel').click(function(e) {
        $('#dragThis').draggable('enable');
        $d.remove();
    });

     $('#dragThis').draggable('disable');


var $win = $(window);

$d.css({ top: $win.scrollTop() + ($win.height()-$d.height())/2,
         left: $win.scrollLeft() + ($win.height()-$d.width())/2,
         position: 'absolute'
       })
  .show();

// end

}
});


     // Show dropped position.

    var Startpos = $("#dragThis").position();
    var Stoppos = $(this).position();
    $("#dragThis").val((Stoppos.left - Startpos.left));
    var left = Math.abs(Stoppos.left);
    var top = Math.abs(Stoppos.top);

    $('#posX').text('left: ' + left);
    $('#posY').text('top: ' + top);
//        prompter();  
//
4

2 に答える 2

1

試す：

$("#btnSave").click(function()
{
    var location = $("#LocationName").val();

    $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "savePage.aspx/SaveIntoDB",
              data: "{'Location':'" + location + "', 'posX':'" + $('#posX').text() + "', 'posY':'" + $('#posY').text() + "'}",
              success:
               function(msg){
                    if(msg.d == "save")
                    {
                        alert("Save");                                    
                    }
                    else
                    {

                    }
               },
              error:
               function(XMLHttpRequest, textStatus, errorThrown){
                   alert( "Error Occured!" + errorThrown.toString());
               }
             });
});

ajaxを使用すると、SQLに保存できます。$（'＃posX'）。text（）$（'＃posX'）。val（）にすることも、HTMLに応じて変更することもできます。

于 2012-06-18T07:31:26.220 に答える
1

JavaScriptコードが実行されているクライアントから、データベースがあるサーバーにデータを送信する必要があります。また、リクエストを処理してデータベースに保存するサーバー側のコンポーネントが必要です。クライアントからサーバーへのデータの送信は、フォームを送信するか、jQuery を使用して実行できるajax http リクエストによって実行できます。あなたの場合、おそらくajaxの方法が好まれます。

于 2012-06-18T07:22:48.450 に答える