Raising an Ajax event after knockout rendering is

2019-08-21 03:45发布

<div data-bind="style: { display: isShortlisted() === false ? 'inline-block' : 'none'}">
    <form id="shortlistForm" action="@MVC.GetLocalUrl(MVC.HireOrgJobApplication.AjaxShortlist(Model.Application))" method="post" style="display:inline;">
        @Html.AntiForgeryToken()
           <input type="hidden" name="ApplicationKey" value="@Model.Application.ApplicationKey" />
               <button type="submit" class="btn-act jui-tooltip" title="Shortlist">
                   <i class="fa fa-2x fa-star"></i>
               </button>
    </form>
</div>

<div data-bind="style: { display: isShortlisted() === true ? 'inline-block' : 'none'}">
  <form id="unshortlistForm" action="@MVC.GetLocalUrl(MVC.HireOrgJobApplication.AjaxUnshortlist(Model.Application))" method="post" style="display: inline;">
  @Html.AntiForgeryToken()
    <input type="hidden" name="ApplicationKey" value="@Model.Application.ApplicationKey" />
      <button type="submit" class="btn-act-active jui-tooltip" title="Remove from shortlist">
        <i class="fa fa-2x fa-star" style="color:#f3b700;"></i>
      </button>
  </form>
</div>

$('form#shortlistForm').ajaxForm(function () {
    viewModel.isShortlisted = true;
});


$('form#unshortlistForm').ajaxForm(function () {
    viewModel.isShortlisted = false;
});

I have a code for a button that "shortlists" an applicant.
To briefly explain, my intention is to turn the "shortlistForm" button to "unshortlistForm (which means it's already shortlisted)" button when it's clicked.

Please look at the attached screenshot:

So the start which looks like this

enter image description here

should turn like below when it's clicked.

enter image description here

when I check my network status on google chrome, it successfully "posts" to the correct link.

enter image description here

But the problem is, I have to REFRESH it to see the changed star.

Right now when I click the button, it gives me

enter image description here

just a page with 'true' written.

I want it to happen immediately without giving me that page, or having me refresh the page to see the change.

I am assuming this is happening because I cannot render Ajax-forms before knockout rendering is done. How can I make the ajax to form after the knockout is generated?

Please help !!

0条回答
登录 后发表回答