Question

我有一个像这样的HTML标记：

@if (ViewBag.Added != null)
{
    if (ViewBag.Added == false)
    {                        
        <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12" id="wholeBtn">
            <a class="btn btn-app btnWatchList" style="min-width:175px;margin:0;height:67px">
                <i class="fa fa-save"></i> Add to Watchlist
            </a>
        </div>
    }
    else if (ViewBag.Added)
    {
        <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12" id="addedToWatchList">
            <h4>Added to watchlist</h4>
        </div>
    }
}

ViewBag.Added是一个变量，用于检查我的数据库中是否有相应的记录......

当用户在弹出窗口中单击“保存”按钮时，我已经定义了一个on click事件，然后我尝试更新DOM：

$(document).on("click", ".btnSaveWatchlist", function(event)
{
    StopLoading();

    if ($('#TextArea1').val() == "" || !$('#ratingSystem input').is(':checked'))
    {
        ShowErrorMessage("All fields are required!");
        return;
    }
    else
    {
        $.post("/SearchCompetitor/SaveWatchList",
        {
            comment: $('#TextArea1').val(),
            rating: $('input[name=rating]:checked').val(),
            competitor: $('.txtSearch').val()
        }).done(function(data)
        {
            if (data == "AllFieldsRequired")
            {
                ShowErrorMessage("All fields are required!");
                return;
            }
            else
            {
                $("#wholeBtn").hide();
                var header = $('<div />').append(data).find('#addedToWatchList').html();
                $('#addedToWatchList').html(header);
                var l = document.getElementById('cancelButton');
                l.click();
            }
        });
    }
});

请注意我如何更新DOM本身：

$("#wholeBtn").hide();

var element = $('<div />').append(data).find('#addedToWatchList').html();

$('#addedToWatchList').html(element);

这是来自服务器方法的逻辑：

public ActionResult SaveWatchList(string comment, string rating, string competitor)
{
    if (comment == "" || rating == "" || competitor == "")
        return Json("AllFieldsRequired");
    else
    {
        var user = ctx.Users.Where(x => x.Email == User.Identity.Name).FirstOrDefault();

        var uwl = new UserWatchList() 
        { 
            Comment = comment, 
            Rating = Int32.Parse(rating), 
            Type = 0, 
            SellerFeedback = Int32.Parse(Session["score"].ToString()), 
            SentWord = competitor, 
            UserId = user.UserId 
        };

        ctx.UserWatchList.Add(uwl);
        ctx.SaveChanges();
        ViewBag.Added = true;

        return View("Index");
    }
}

我想要的输出是显示html：

else if (ViewBag.Added)
{
    <div class="col-lg-2 col-md-3 col-sm-12 col-xs-12" id="addedToWatchList">
        <h4>Added to watchlist</h4>
    </div>
}

我做错了什么？

P.S。请注意，当一切顺利时，我会通过Return View("Index");

返回页面的整个HTML

Answer 1

好的，这就是诀窍：

  var header = $('<div />').append(data).find('#addedToWatchList').html();
                                 $('#wholeBtn').html(header).show();
                                 var l = document.getElementById('cancelButton');
                                 l.click();

原来隐藏元素是一个坏主意，而我只是在加载页面时更新原来的一个满足if statemnt的元素，瞧，就像一个魅力！

在jquery中查找元素发布数据并更新DOM

1 个答案: