Invoking jQuery from a C# Button

Question

1.00/5 (1 vote)

See more:

I basically want to run the grid jquery UI code when I hit the edit button which is located on my C# side. The examples Iv'e found I haven't been able to use to make my version work.

So I'd appreciate if someone would explain how it's done and how it works since ill need to figure out how to stop the function too by another button click.

the Jquery is the example found here If it helps
http://jqueryui.com/demos/sortable/#display-grid[^]

This code would be on the html side, I need to modify it so that it doesn't run on page load and only runs when Button1 is clicked.

XML

<script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
</script>

C#

protected void Button1_Click(object sender, EventArgs e)
{
// this button would be clicked to run the function above activating the sortable grid.
}

EDIT:
Fixed! I needed to add this to the outside

$(document).ready(function() {        
        
    });

EDIT2:

It seems after all of that the problem is that when the page posts back when i hit the button the javascript is turned off like it was never on in the first place a simple onclientClick.... return false; worked in the end.

Posted 17-Jan-12 2:41am

Phoenix234

Updated 17-Jan-12 22:55pm

v5

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

nrgjack · Accepted Answer · 2012-01-17T02:54:00

Solution 1

you have to get the sortable plugin too, here you can download it : http://tablesorter.com/docs/#Download

i usually use the ready method for the sortable plugin

JavaScript

$(document).ready(function() {
  // Handler for .ready() called.
  $( "#sortable" ).tablesorter();
  $( "#sortable" ).disableSelection();
});

so i'm sure that the page has already been loaded

More info : jquery ready

if you really need to activate the function on client click you can use jquery click method

JavaScript

$('input[Id$="Button1"]').click(function () {
  $( "#sortable" ).tablesorter();
  $( "#sortable" ).disableSelection();
})

More info : jquery selectors
More info : jquery click

Posted 17-Jan-12 2:54am

nrgjack

Updated 17-Jan-12 20:40pm

v6

Comments

Phoenix234 17-Jan-12 9:02am

I added this to the page and tried it but nothing happens.

<script type="text/javascript">
$('Id$="Button1"').click(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
})
</script>

Is there a way to find out if the button or jquery is the part that didn't work?

Did I miss a step for the button version?

nrgjack 17-Jan-12 9:07am

you have to get the sortable plugin too, here you can download it : http://tablesorter.com/docs/#Download

then you need to add the link in the head like you did for jquery

then you could have a buttom like :

<asp:Button ID="Button1" runat="server" class="buttonToSort" >
$('.buttonToSort').click(function () {
alert("test click");
$("#sortable").sortable();
$("#sortable").disableSelection();
})

Phoenix234 17-Jan-12 9:17am

my code looks like this but still isn't working, I cant see what I missed? I added the tablesorter, created the button with the same class you used and it doesn't even hit the alert. I just added the full release of that download you sent me including all 4 libraries

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>

<script src="js/Sorter/jquery-latest.js" type="text/javascript"></script>
<script src="js/Sorter/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="js/Sorter/jquery.tablesorter.js" type="text/javascript"></script>
<script src="js/Sorter/jquery.metadata.js" type="text/javascript"></script>

<script type="text/javascript">
$('.buttonToSort').click(function () {
alert("test click");
$("#sortable").sortable();
$("#sortable").disableSelection();
})
</script>

<asp:Panel ID="sortable" runat="server">

<div>
<asp:Button ID="Button1" runat="server" Text="Edit Mode" class="buttonToSort" onclick="Button1_Click" />
</div>

Phoenix234 17-Jan-12 9:23am

I just realised we were using the first method, Neither the button.click or the sortable way seem to work

nrgjack 17-Jan-12 9:26am

you'r using multiple version of the same file
jquery.tablesorter.min.js and jquery.tablesorter.js are the same file ;) the "min" version has no spaces, tab, comments so the js file is the smallest as possible

the same for jquery

try using only
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script src="js/Sorter/jquery.tablesorter.min.js" type="text/javascript"></script>

Phoenix234 17-Jan-12 11:40am

I fixed it! We needed to add this to the outside

$(document).ready(function() {
$('.buttonToSort').click(function () {
alert("test click");
$("#sortable").sortable();
$("#sortable").disableSelection();
})
});

but now when it hits the first #sortable I get

"Microsoft JScript runtime error: Object doesn't support property or method 'sortable'"

Phoenix234 17-Jan-12 12:14pm

I fixed that last error but now the code doesn't do anything, it hits the alerts fine on both but the 1st runs on page load while the second loads when you hit the button, it hits the alerts but the boxes aren't moveable like the first.

does the page refresh somewhere here due to the button click like a postback?

<script type="text/javascript">
$(document).ready(function () {
$(function MyFunction() {
$("#sortable").sortable();
$("#sortable").disableSelection();
})
});

</script>
and this doesnt

<script type="text/javascript">
$(document).ready(function () {
$('.buttonToSort').click(function () {
alert("test 1");
$("#sortable").sortable();
$("#sortable").disableSelection();
alert("test 2");
})
});
</script>

nrgjack 17-Jan-12 16:22pm

see that page :)

http://tablesorter.com/docs/#Demo

the sortable method is wrong, you have to use tablesorter

$(document).ready(function () {
$('.buttonToSort').click(function () {
$("#sortable").tablesorter();
$("#sortable").disableSelection();
})
});

but... why disable selection ?
.disableSelection() is useful for making text elements, or elements that contain text, not text-selectable.
is that your intention ?

Phoenix234 18-Jan-12 4:13am

Fixed it now, the page was basically refreshing itself everytime I hit the button.

Thanks for the help

Invoking jQuery from a C# Button

1 solution

Solution 1

Add your solution here

Preview 0

Invoking jQuery from a C# Button

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us