How to trigger a postback using JQuery Droppable plugin ?

Question

Hi,

This is my script for the draggable and droppable

<script type="text/javascript">

    $(function() {

        $(".Source li").draggable({
            appendTo: "body",
            helper: "clone",
            revert: "invalid"
        });
        $(".Destination ").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ".Source li",

            drop: function(event, ui) {
                $(this).find(".placeholder").remove();
                $("#Hf1").val(ui.draggable.text());
                $("#TxtItemId").val($("#Hf1").val());



           }
        });

    });

</script>

Now I want to access the value of the "TxtItemId" control in the code-behind through a postback. How do I go about doing this ?

BTW, this is for a scenario where a person will drag an item from a panel into a shopping cart and I need to capture the Id of the dropped item and trigger a postback after the drop to update the quantity of that item in the cart.

Answer 1

Hey,

__doPostBack('', '') is the approach taken to post back. Do you want a standard postback, or async? For async, you can wrap the section in an update panel with update mode of always, or use $.post within JQuery to do it, but the latter needs special handling.

For updating quantity, if the quantity is in the DB, you can use a web service to do the update, and this can be easily called from jquery using $.get or MS AJAX by using a web service proxy.

If you need more info, let me know.

HTH.

Answer 2

Hi ,

Thanks for the reply, but I need to do something like do a postback with the Id sent with it. I do have an updatepanel so I think an Async postback will be ideal. So what is the syntax/code to do that ?