OnClick function using jquery tabs in asp.net

Question

I am using jquery tabs and trying to use the onclick function but it seems it is not firing. When user clicks the tab and i want to change the detailview mode into readonly mode. Here is my code in aspx:

<div id="tabs-2" class="column" onclick="ChangeMode">

and here code behind:

 protected void ChangeMode()
        {
             if (DV_Test.CurrentMode == DetailsViewMode.Insert)
            {
                DV_Test.ChangeMode(DetailsViewMode.ReadOnly);
                LoadDet();
            }
        }

I am using this code that forces the pageto stay the selected tab when post pack occurs and it works fine.

<script type="text/javascript">
        var selected_tab = 1;
        $(function () {
            var tabs = $("#tabs").tabs({
                select: function (e, i) {
                    selected_tab = i.index;

                }
            });
            selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
            tabs.tabs('select', selected_tab);
            $("form").submit(function () {
                $("[id$=selected_tab]").val(selected_tab);

            });

        });

Missing the onclick="ChangeMode();" (??) Is it firing the event at all? — Jose, Jun 11 '13 at 17:24
Your `div` is a client-side element, but your function is server-side. The client-side code has no notion of server-side code and can't directly access it. — David, Jun 11 '13 at 17:25
Since you are mixing server-side and client-side code, this won't work. However, it's impossible to correct you without knowing what you are trying to achieve in this method. Whatever changes you make to `DV_Test` server-side are not going to affect what you see on the page (and likely not be persisted, either, unless `DV_Test.ChangeMode` performs database updates or similar. Please explain in more detail what you are actually trying to do. — Ant P, Jun 11 '13 at 17:32
Wouldn't using ajax solve the problem of sending requests to the server and updating the page (if you so choose)? — Jose, Jun 11 '13 at 17:41
i am simply trying to change my DetailView mode into "ReadOnly" mode once the tab is clicked. i am newbnie and that is why i am seeking your expertise as you can see i am mixing the clientside and the serverside. thanks — moe, Jun 11 '13 at 18:04
pls tell me or show me a direction how to solve this issue as i am struggling to figure out... thanks — moe, Jun 11 '13 at 18:17
@Jose That is entirely dependent upon what `DV_Test` is and what is supposed to happen when that method is fired - simply calling it via Ajax is unlikely to solve the problem and - without knowing what it's supposed to do - it's impossible to expand upon that solution. — Ant P, Jun 12 '13 at 10:49

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

I'm assuming you're using ASP.NET C# because of your tags and syntax. I can suggest these options: use Razor view, or use the JavaScript/jQuery you're already using.

If you prefer to use the Razor View, take a look at the references in this question and use the @ symbol to call server functions. In this case, @ChangeMode is what you're looking for.

Since you're using jQuery already I suggest you write a JavaScript function using jQuery .click(). Since the JavaScript and jQuery are both able to call the server, you will be able to access your server-side function ChangeMode.

$('#tabs-2').click(function(){
    //Make call to server here.  You can use [Ajax][4], 
    //or see the link below concerning ASP.NET C#
});

link, see this fiddle

Ajax calls:

I've found the jQuery .ajax() call very useful, and this is what my .ajax() calls usually look like:

//get information from server and inject in my div with id="mydiv"
$.ajax({
    url: '/ControllerName/MethodName',
    type: 'POST',
    data: ko.toJSON({myvariable}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
       $('#mydiv').html('visiblity', 'visible');
    },
    error: function (error) {
       alert('Cannot retrieve data');
    }
});

Also, I'm not sure what you've decided on using, but I liked these suggestions for tabs: try the html found here, which uses ul/li and a to make the tabs themselves. The thing that triggers the action is typically the a.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 11 '13 at 20:19

RoyalleBlue

106
7

thanks, i have tried but did not fire at all. I simply tried to show this $("#target").click(function() { alert("Handler for .click() called.");}); and it did not work – moe Jun 11 '13 at 20:56
Do you have Razor View? Also, are you using ASP.NET Web Forms or ASP.NET MVC? I can write you an answer using Razor View, but I'm unsure of which technology you're using. – RoyalleBlue Jun 11 '13 at 21:02
You can isolate the problem by forking and trying out [this fiddle](http://jsfiddle.net/RoyalleBlue/2ku84/2/) – RoyalleBlue Jun 11 '13 at 21:41
Also my second option doesn't work [when isolated](http://jsfiddle.net/RoyalleBlue/MsK2N/). I will delete it soon. – RoyalleBlue Jun 11 '13 at 21:44
i am using asp.net web forms. thanks for your help i really appreciate if you can help me out here – moe Jun 12 '13 at 01:04
I checked to make sure that you can use Razor View in Web Forms. You can use the link I provided in my answer to make a @server call. Please try the suggestions I made and let me know what happened; letting me know what happened in each situation helps me help you. – RoyalleBlue Jun 12 '13 at 20:47
i see the example that you shows in fiddle works fine but it does not work for me when i implement it. – moe Jun 12 '13 at 21:29
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31694/discussion-between-royalleblue-and-moe) – RoyalleBlue Jun 12 '13 at 21:40

OnClick function using jquery tabs in asp.net

1 Answers1