CODEWITHSUNDEEP
jquery
catcool
catcool

Reputation: 51

how to insert data from jquery to sql server management studio?

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();  
//

Upvotes: 1

Views: 1362

Answers (2)

Wahid4sap
Wahid4sap

Reputation: 227

Try:

$("#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());
               }
             });
});

using ajax you can save into Sql.. $('#posX').text() it can be $('#posX').val() or depend on your html.. hope it will works..

Upvotes: 1

poncha
poncha

Reputation: 7866

You need to send data from the client, where your javascript code is running to the server, where the database is. And you need some server-side component that will handle your request and save it to the database. Sending data from client to server is doable either via submitting a form, or by ajax http request which you can do using jQuery. In your case, probably the ajax way is preferred.

Upvotes: 1

Related Questions