CODEWITHSUNDEEP
jqueryasp.net-mvc-2
user1005310
user1005310

Reputation: 877

Jquery not invoked on tab change MVC 2

<%@ Page Title="" Language="C#" MasterPageFile="~/Content/Master1.Master" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewPage<List<TGF.class.abc>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript">

    $(document).ready(function() {

        $('#tabContainer').tabs();

        $('#tab1').click(function() {
            GetInfo('method1', '#info1');
        });

        $('#tab2').click(function() {
            GetInfo('method2', '#info2');
        });

        $('#tab3').click(function() {
            GetInfo('method3', '#info3');
        });

    });


    function GetInfo(url, div) {
        debugger;
        $(div).html('Loading...');

        $.ajax({
            Type: 'POST',
            url: url,
            success: function(html) {
                $(div).html(html);
            },
            error: function(html) {
                $(div).html('An Error Occurred.');
            },
            cache: false
        });

    }

</script>

<div id="tabContainer">

    <!-- Tab Names -->
    <ul>
        <li><a id='tab1' href="#info1"><span>name1</span></a></li>
        <li><a id='tab2' href="#info2"><span>name2</span></a></li>
        <li><a id='tab3' href="#info3"><span>name3</span></a></li>
    </ul>

    <div id="info1">
        <% Html.RenderPartial("Mysharedpage", Model, ViewData); %>
    </div>

    <div id="info2">
      <% Html.RenderPartial("Mysharedpage", Model, ViewData); %>
    </div>

    <div id="info3">
   <% Html.RenderPartial("Mysharedpage", Model, ViewData); %>
    </div>

</div>

Here is my shared page (Mysharedpage.ascx) ,

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<TGF.dfg.method>>" %>

<%@ Import Namespace="class.DataContracts" %>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        debugger;
        $("#SelectAll").click(CheckAll);
    });
       function CheckAll() {
            $("INPUT[type='checkbox']").attr('checked', $('#SelectAll').is(':checked'));
        }



</script>

Now, the issue is when I click tab1 then it works as usual, i.e. the CheckAll() function on the shared page (Mysharedpage.ascx) works. But when I click on tab2 or tab 3 , the Jquery CheckAll() function is not called and is not working. Basically the Jquery is not getting called when clicked on tab2 or tab3. All the 3 tab call the same shared (.ascx) page

Any solution ?

Upvotes: 1

Views: 446

Answers (2)

Greg Pettit
Greg Pettit

Reputation: 10830

I don't see #SelectAll in the sample code, but I assume it's part of the dynamically-provided content.

You need to delegate to an ancestor element as a listener, but one that is NOT destroyed when the new content is flown in from the server.

$('#tabContainer').on('click', '#SelectAll', CheckAll);

I have to admit, I'm somewhat missing the big picture seeing pre-rendered code (I don't work with .NET at all, never mind MVC-2)... but it LOOKS like the CheckAll function is being flown into each of the 3 areas. The code should really be outside, as ONE instance only, on the main page.

Also, if MVC-2 restricts you to a particular version of jQuery (pre 1.7) you will not have the .on() function available. For previous versions of jQuery you could use .delegate() instead. Part of the syntax is simply flip-flopped:

$('#tabContainer').delegate('#SelectAll', 'click', CheckAll);

Upvotes: 1

Rafay
Rafay

Reputation: 31033

the reason is event handlers do not attach themselves to the dynamically added elements to the page try

$("#SelectAll").on("click",CheckAll);

http://api.jquery.com/on/

Upvotes: 0

Related Questions