How Does Ajax Work

How does AJAX work without reloading the page?

You are mixing jQuery with Knockout. The submit is handled by jQuery. If you use Knockout, let it to handle the submit event adding to the <form> this submit: submitShortlistForm,:

<form id="shortlistForm" data-bind="submit: submitShortlistForm, style: { display: application.isShortlisted === false ? 'inline-block' : 'none'}, attr: {action: '@(MVC.GetLocalUrl(MVC.HireOrgJobApplication.ViewApplication(Model.CurrentOrganization.CustomUrl, Model.Job.JobKey, "xxx/ajax-shortlist")))'.replace('xxx', application.applicationKey)}" method="post" style="display:inline;">
    @Html.AntiForgeryToken()
    <input type="hidden" name="ApplicationKey" data-bind="attr:{ value : application.applicationKey }" />
    <button type="submit" class="btn-act jui-tooltip" title="Shortlist">
        <i class="fa fa-2x fa-star"></i>
    </button>
</form>                 

Then, in your view model add this:

self.submitShortlistForm = function(){
    // I think is better to use $.post() or $.ajax().
    // I use the pluging because is in your question.
    $('form#shortlistForm').ajaxForm(function () {
        // Allways change position [0] of the observable array
        self.applications()[0].isShortlisted = true;

        var data = self.applications().slice(0);
        self.applications([]);
        self.applications(data);
    });
    $(this).ajaxSubmit();
}

In the Knockout submit event I bind the form with the ajaxForm plugin, and then I submit it. I'm not sure about jQuery Plugin, I would use $.post() or $.ajax().

You could find more information about Knockout submit in this link The "submit" binding.

I don't like this solution because you are removing all the content of the self.applications observable array. Is better to use the mapping plugin and convert all application objects (and its content) in observables. But with this approach, you should modify your ViewModel and the view.

Update 1 (19/06/2017)

If this <form> is inside a foreach loop, then the self.submitShortlistForm could be this:

self.submitShortlistForm = function(application){
    $('form#shortlistForm').ajaxForm(function () {
        // Updates the current row element.
        application.isShortlisted = true;

        var data = self.applications().slice(0);
        self.applications([]);
        self.applications(data);
    });
    $(this).ajaxSubmit();
}

And the html:

<form id="shortlistForm" data-bind="submit: $root.submitShortlistForm, ...">

Hope this helps.

How Does AJAX work

Assuming myAjaxCall is an ajax wrapper, and the first argument is the complete callback, the answer is "more code" will run before abcd function. But I'd need to see myAjaxCall function to know what is really going on.

Remember, the complete callback happens when ajax retruns. "more code" executes in the normal execution path.

How does jquery ajax actually work

Issue is with your code
var data = 'uname=' + name;
use
var data = '{uname:' + name + '}';
because its a post method

How does Ajax work in Rails 5 when scaffolding a resource?

Adding "remote: true" to the form would apply to format.js within your controller, and in the case of the video tutorial, execute an accompanying js.erb file.

format.json allows you, or more literally some sort of client app (mobile, javascript), to send a request in json and receive a json formatted response. You can test this in one of your scaffolded 'show' actions by visiting localhost:3000/posts/1 (for the html format) and localhost:3000/posts/1.json (for the json format).

How things looks a like behind Ajax calls

I red behind Ajax is XMLHttpRequest object

XHR is one browser API used to perform Ajax. There are several others. XHR is probably most commonly used.

Is this true?

jQuery does do something along those lines behind the scenes.

And is this second approach avoided today?

No.

Some people use jQuery because they find it more convenient than using the native browser APIs or another library. Other people do not use jQuery.

---

Related Topics