Question

I’ve been trying to somehow get my javascript function (which I have in the head section of the aspx page) to set a value in a hidden item, then some how have the server-side (trusty ‘ol ASP) read that data so I can do some work depending on what it is. I have my entire page wrapped in an update panel, and my drag ‘n drop woes have mostly been solved. The ideal situation would be to have it so once an object gets dropped in the drop zone, the javascript chunk of code (I suck at JS) will assign a value to a hidden field, then make the update panel do one of its asynchronous postback and refresh itself (which will pull data from a function that is ran based on what the hidden value is). This is what I have for my current (broken) javascript section:

<script type="text/javascript">  
  $(document).ready(function() {  
doReady();  

var prm = Sys.WebForms.PageRequestManager.getInstance();  
prm.add_endRequest(function(s, e) {  
    doReady();  
});  
}); 

All the above stuff makes it so JQuery doesn’t bork itself after a postback

function doReady() {

$('.drag').draggable({ revert: true, helper: 'clone' });
$('.drop').droppable({
    tolerance: "touch", // Here should be a string
    drop: function() {

        $('#myHidden').val('Testy test test');
        __doPostBack('<%= HiddenButton.UniqueID  %>', '');
        alert(#myHidden.val);

    }


});

} // End of do ready
</script>

And here is the relevant ASPX part that has that mysterious “myHidden” thingy.

<input type="hidden" id="myHidden" />
<asp:Button ID="HiddenButton" runat="server" Text="Button" />   

Am I doing something wrong in my javascript section, or is the whole concept I have of this fubar?

Thanks!
Bill

Answer 1

If you want the hidden input to be posted back you need to give a name as well as an id. Only inputs with names are sent with the posted form. You may want to make it an asp:HiddenField so that you can easily retrieve its value on the server side, though you could get it from the Request.Form collection, too.

<asp:HiddenField runat="server" id="myHidden" />

Change your javascript to be:

drop: function() {

    $('[id$="myHidden"]').val('Testy test test');
    __doPostBack('<%= HiddenButton.UniqueID  %>', '');
    alert($('[id$="myHidden"]').val());

}