<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
should turn like below when it's clicked.
when I check my network status on google chrome, it successfully "posts" to the correct link.
But the problem is, I have to REFRESH it to see the changed star.
Right now when I click the button, it gives me
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 !!