Mootools request: onSuccess is not triggered

Asked

Viewed 61 times

2

I’m using Knockoutjs in conjunction with Mootools, but I’m having problems with the Request.

  <div class="form-group">
      <select data-bind="options: classificacoes, optionsText: ds_classificacao, optionsValue: id"></select>
  </div>

  <script>
      ko.applyBindings( new App.viewModels.selectsProcedimentos() );
  </script>

App.requests.classificacoes = new Request.JSON({
    url: "/classificacoes.json",
    method: "get"
});

App.viewModels.selectsProcedimentos = new Class({
    initialize: function() {
        this.classificacoes = ko.observableArray([]);
        App.requests.classificacoes.send({
            onSuccess: function(classificacoes) {
                this.classificacoes.push(classificacoes);
                alert("baixou");
            }
        });
        alert("initialize");
    }
});

What happens here is that the initialize is fired, but the method onSuccess no, being that the <select> is empty. However in the tab network of the development tools you can see that the JSON is downloaded. There are no errors in the console.

javascript knockoutjs mootools

2 answers

2


You have to define the event Handler onSuccess within the Request Class. The method send() accepts data to move to the server side and options to the Class, but not new Class Events. Have a look in the documentation and notice the difference between options and Events.

Test like this:

App.requests.classificacoes = new Request.JSON({
    url: "/classificacoes.json",
    method: "get",
    onSuccess: function(classificacoes) {
        // this.classificacoes.push(classificacoes); // acho que aqui está a usar o this de maneira incorreta
        alert("baixou");
    }
});

App.viewModels.selectsProcedimentos = new Class({
    initialize: function() {
        this.classificacoes = ko.observableArray([]);
        App.requests.classificacoes.send();
        alert("initialize");
    }
});

With this code on top solves the most obvious problem.
But I don’t understand how you want to use the this.classificacoes.push(classificacoes); once the ajax is asyncrono.

It would not be case to make the request and in onSuccess then instantiate the Class App.viewModels.selectsProcedimentos? or do the .push() for the Class property that stores this array with App.viewModels.selectsProcedimentos.classificacoes.push(classificacoes);

  • I’m really having a hard time finding the best way to do this. The point is that there are 4 selects, this is only the first, with the others I will have to pull by AJAX after anyway. I will do the following: I will create the Request within the same class. As soon as it works I update the question with the solution.

  • @Andrey means the Knockout Class within the Request of Mootools and not "Request within the Class", right? If I put these 4 selects in a jsFiddle and post here I can take a look.

  • I meant to do new Request({...}).send(); within my viewModel class. I didn’t do Jsfiddle because his AJAX never worked right for me.

  • @Andrey, why don’t you classificacoes being a computed? The moment the computed is "evaluated" by knockout, you make the request. That’s good because if you use any observable within the computed, by changing the value of observable, the computed is "reevaluated".

  • @Wakim I’m starting with Knockout. How does computed work? I do the AJAX request inside it and return? ko.computed(function() { return "meu array json" });? The problem is that the request is asynchronous.

  • Yeah, on second thought, it’s not worth it, because you’d have to create a "flag" observable to create a dependency and force the "reevaluation" of computed. This is only worth it if AJAX to recover the values of classificacoes depend on some other value that can change. I think it will not go well in your case.

Show 1 more comment

1

This is how I did it:

Javascript:

App.viewModels.selectsProcedimentos = new Class({
    initialize: function(classificacoes) {
        this.classificacoes = ko.observableArray(classificacoes);
    }
});

App.init.selectProcedimentos = function() {
    new Request.JSON({
        url: "/classificacoes.json",
        method: "get",
        onSuccess: function(classificacoes) {
            ko.applyBindings( new App.viewModels.selectsProcedimentos(classificacoes) );
        }
    }).send();
};

And the HTML:

<div class="form-group">
    <select data-bind="options: classificacoes,
                       optionsText: 'ds_classificacao',
                       optionsValue: 'id',
                       optionsCaption: 'Selecione uma Classificação'"
            class="form-control input-sm"></select>
</div>

<script>
    App.init.selectProcedimentos();
</script>

Thank you for the patience of @Sergio and @Wakim

Now is to break your head to make the selects that are dependent on this.

Browser other questions tagged javascript knockoutjs mootools

You are not signed in. Login or sign up in order to post.