点击按钮重新加载Div

时间:2015-11-18 20:49:52

标签: javascript jquery

我有一个MVC视图,其中包含bootstrap navtabs。在每个选项卡上加载不同的视图。他们被称为延迟spiff和instantspiff。我添加了一个日期选择器和一个应该在2个视图中显示数据的按钮。唯一的问题是,当我点击我的按钮时,视图不会刷新。他们保留原始数据而不是基于日期的新数据。我需要以某种方式在选择日期后重新加载视图,然后显示新数据。我将分享一些代码。这是我的代码:

主要观点:

<div class="container-fluid delayed_spiff_main">


<div class="row-fluid 1">
    <div class="col-lg-12 delayed_spiff_body">

        <div class="row spiff-datepicksection">
            <div class="col-lg-6 pull-right">
                <div class="col-sm-5 col-lg-offset-4">
                    <div class="form-group">
                        <div class="input-group date">
                            <input type="text" id="startDate" class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <input class="spiffdate-btn" type="button" value="Submit" />
                </div>
            </div>
        </div>


        <div class="row spiff_tabs_body">
            <!-- Nav tabs -->

            <ul class="nav nav-tabs spiff_tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-id="delayedspiff" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-id="instantspiff" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
    FormGet('dashboard/delayedspiff', 'delayedspiff');
});
</script>

javascript在视图中加载详细信息:

function pullDetails(carrierId, startDate, status, divid) {

    $.get("@Url.Action("getDelayedSpiffOrderDetails", "Dashboard")",
        { carrierId: carrierId, startDate: startDate, status: status },
        function (data) {
            $('.' + divid + ' .submitted_details').html(data);
            $('.' + divid).removeClass('carrier-hide');

        });

}

这只是让我更加困惑的是我的控制器代码:

public ActionResult DelayedSpiff(DateTime? startDate)
    {
        var available = _appService.GetFeatureStatus(1, "spiffDashboard");
        if (!available)
            return RedirectToAction("DatabaseDown", "Error", new { area = "" });

        //var startDate = DateTime.Today.AddDays(-6);

        if (!startDate.HasValue || startDate.Value == DateTime.MinValue)
        {
            startDate = DateTime.Today.AddDays(-7);
        }
        else
        {
            startDate = startDate.Value.AddDays(-7);                
        }           

        var acctId = User.AccountID;

        var endDate = DateTime.Today.AddDays(1); // 1

        Dictionary<DateTime, List<SpiffSummaryModel>> dict = new Dictionary<DateTime,List<SpiffSummaryModel>>();

        try
        {
            var properties = new Dictionary<string, string>
            {
                { "Type", "DelayedSpiff" }
            };
            telemetry.TrackEvent("Dashboard", properties);

            dict = _reportingService.GetDailyDelayedSpiffSummaries(acctId, startDate.Value, endDate);

        }
        catch (Exception e)
        {
            if (e.InnerException is SqlException && e.InnerException.Message.StartsWith("Timeout expired"))
            {
                throw new TimeoutException("Database connection timeout");
            }
            var error = _errorCodeMethods.GetErrorModelByTcError(PROJID.ToString("000") + PROCID.ToString("00") + "001", "Exception Getting DelayedSpiff Dashboard View", PROJID, PROCID);
            error.ErrorTrace = e.ToString();
            _errorLogMethods.LogError(error);
            return RedirectToAction("index", "error", new { error = error.MaskMessage });
        }

        var spiffDateModels = new List<DelayedSpiffDateModel>();

        foreach (var entry in dict)
        {
            var spiffDateModel = new DelayedSpiffDateModel();

            spiffDateModel.Date = entry.Key;

            spiffDateModel.Carriers = new List<DelayedSpiffCarrierModel>();

            foreach (var item in entry.Value)
            {
                var spiffCarrierModel = new DelayedSpiffCarrierModel();
                spiffCarrierModel.Carrier = item.CarrierName;
                spiffCarrierModel.CarrierId = item.CarrierId;
                spiffCarrierModel.ApprovedSpiffTotal = item.ApprovedSpiffTotal;
                spiffCarrierModel.EligibleActivationCount = item.EligibleActivationCount;
                spiffCarrierModel.IneligibleActivationCount = item.IneligibleActivationCount;
                spiffCarrierModel.PotentialSpiffTotal = item.PotentialSpiffTotal;
                spiffCarrierModel.SubmittedActivationCount = item.SubmittedActivationCount;
                spiffCarrierModel.UnpaidSpiffTotal = item.UnpaidSpiffTotal;
                spiffDateModel.Carriers.Add(spiffCarrierModel);
            }

            spiffDateModels.Add(spiffDateModel);
        }
        spiffDateModels = spiffDateModels.OrderByDescending(x => x.Date).ToList();

        return PartialView(spiffDateModels);
    }

在tabpanel中加载的UPDATE代码:

<div class="container-fluid">
<div class="row">
    <div class="col-lg-11 col-center-block delayspiffdata" id="details">



        <table class="delay_spiff_tbl">
            <thead>
                <tr>
                    <th class="blank"></th>
                    <th>Submitted Activations / Potential Spiff</th>
                    <th>Approved Activations / Approved Spiff</th>
                    <th>Ineligible Activations / Unpaid Spiff</th>
                </tr>
            </thead>

            <tbody>
                @for (int date = 0; date < Model.Count; date ++)
                {
                    <tr class="date-row" onclick="$('.date_@date').toggleClass('date-hide');">
                        <td class="spiffdate">
                            @Model[date].Date.ToString("dddd MM/dd/yyyy")
                            <i class="fa fa-plus-circle expander_open" ></i>
                        </td>
                        <td>@Model[date].Carriers.Sum(c => c.SubmittedActivationCount) / @Model[date].Carriers.Sum(c => c.PotentialSpiffTotal).ToString("C")</td>

                        <td>@Model[date].Carriers.Sum(c => c.EligibleActivationCount) / @Model[date].Carriers.Sum(c => c.ApprovedSpiffTotal).ToString("C")</td>

                        <td>@Model[date].Carriers.Sum(c => c.IneligibleActivationCount) / @Model[date].Carriers.Sum(c => c.UnpaidSpiffTotal).ToString("C")</td>
                    </tr>

                    for (int carrier = 0; carrier < Model[date].Carriers.Count; carrier++)
                    {
                        <tr class="date_@date date-hide" onclick="$('.submitted-@date-@carrier').toggleClass('carrier-hide');">
                            <td><span class="pull-left dash"><i class="fa fa-caret-up"></i></span> @Model[date].Carriers[carrier].Carrier</td>
                            <td>
                                <a onclick="pullDetails('@Model[date].Carriers[carrier].CarrierId', '@Model[date].Date', 'potential' ,'submitted-@date-@carrier')">
                                    @(Model[date].Carriers[carrier].SubmittedActivationCount == 0 ? "--" :
                                    Model[date].Carriers[carrier].SubmittedActivationCount + " / " +
                                    Model[date].Carriers[carrier].PotentialSpiffTotal.ToString("C"))
                                </a>
                            </td>
                            <td>
                                <a onclick="pullDetails('@Model[date].Carriers[carrier].CarrierId', '@Model[date].Date', 'eligible' ,'submitted-@date-@carrier')">
                                    @(Model[date].Carriers[carrier].EligibleActivationCount == 0 ? "--" :
                                    Model[date].Carriers[carrier].EligibleActivationCount + " / " +
                                    Model[date].Carriers[carrier].ApprovedSpiffTotal.ToString("C"))
                                </a>
                            </td>
                            <td>
                                <a onclick="pullDetails('@Model[date].Carriers[carrier].CarrierId', '@Model[date].Date', 'ineligible' ,'submitted-@date-@carrier')">
                                    @(Model[date].Carriers[carrier].IneligibleActivationCount == 0 ? "--" :
                                    Model[date].Carriers[carrier].IneligibleActivationCount + " / " +
                                    Model[date].Carriers[carrier].UnpaidSpiffTotal.ToString("C"))
                                </a>
                            </td>
                        </tr>

                        <tr class="date_@date date-hide submitted-@date-@carrier carrier-hide carrier">
                            <td class="submitted_details" colspan="100%">
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>
</div>

<script>
$(function () {
    $('.date-row').click(function () {
        $(this).find('i').toggleClass('fa-minus-circle fa-plus-circle');
    });
});
$(function () {
    $('.date-hide').click(function () {
        $(this).find('i').toggleClass('fa-caret-down fa-caret-up');
    });
});

function pullDetails(carrierId, startDate, status, divid) {
    $.get("@Url.Action("getDelayedSpiffOrderDetails", "Dashboard")",
        { carrierId: carrierId, startDate: startDate, status: status },
        function (data) {
            $('.' + divid + ' .submitted_details').html(data);
            $('.' + divid).removeClass('carrier-hide');

        });        
}

1 个答案:

答案 0 :(得分:0)

尝试这样的事情

$("#startDate").change(function () {
// call your function here
});