views:

2087

answers:

3

Hello all,

I need to find a way to call a vb.net function in my aspx page from javascript. I have a Jquery function that makes the .drop class .droppable, and whenever I drop a .draggable onto a drop target, my Jquery code successfully fires a java alert statement. All in pure javascript. What I need to do is some heavy math!

I do understand that javascript exists client-side, ASP/VB exists server-side, and never the two shall meet. From google research, it seems like the ideal way to get what I need done, is to trigger an asynchronous postback in my update panel. I created a hidden button called "HiddenButton", and I also created a hidden label called "HiddenLabel". How do I get it to work so when I drop something, my javascript calls something that updates both the text in the HiddenLabel (so I can pass a value to server-side), and somehow fire the HiddenButton_click event?

My current javascript goodness looks like this:

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

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

function doReady() {

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

This is where I think something needs to go to update the label and trigger the post-back, but I don't know what it is :(

});

} // End of do ready
</script>
+1  A: 

Calling __doPostBack with your JS causes a page postback.

function __doPostBack(eventTarget, eventArgument) { ... }
CRice
I changed my javascript to this, and now the drag functionality is broken? function doReady() { $('.drag').draggable({ revert: true, helper: 'clone' }); $('.drop').droppable({ tolerance: "touch", // Here should be a string drop: function() { alert('dropped'); } drop: function() { __doPostBack(HiddenButton_Click, '') } });} // End of do ready
Bill Sambrone
+2  A: 

You can use the hidden variable's OnValueChanged event. Wire up that event, change the value of the hidden variable, and write this statement -

__doPostBack('<%= hdnHidden.UniqueID  %>', ''); //This statement will fire the OnValueChanged event and the control will be moved to the server side where you can update the label and do your processing.
Kirtan
It worked! I updated my javascript line to this: drop: function() { __doPostBack('<%= HiddenButton.UniqueID %>', ''); } Now I just need to figure out how to do more work on my site, but this is what I needed!
Bill Sambrone
A: 

Thanks Kirtan for the code sample, helped alot.

Sidney