0

I tried to sync database return html string append to each .buttonContainer , use action.js execute other file loadButton module use parameter point specific element.
the result should be use different .buttonContainer and with their attr id connect db get result append to each .buttonContainer

My question is if I set ajax option async default true, then both return html string will append to the last .buttonContainer.
I can't understand I already set each module/function have their attr el from each execute parameter.
Why and how to solve it?
I tried to change async to false then it work but slowly the page, so I'm trying to find other solution. 

<div class="buttonContainer" data-user-id="0"></div>
<div class="buttonContainer" data-user-id="1"></div>

action.js

define(['DomReady!', 'jquery', 'loadButton'],function (DomReady, $, loadButton) {
  return {
    init: function() {
      // loop each element as parameter and execute 
      $('.buttonContainer').each(function(index, el) {
        var config = {};
        config.el = $(this);

        loadButton.init(config);
      });
    },
  }
});

loadButton.js

define(['DomReady!', 'jquery'],function (DomReady, $) {
  return {
    init: function(config) {
      this.config = {};
      this.config.el = config.el;  // set each execute have their own private attribute

      this.onLoadAction();
    },
    onLoadAction: function() {
      this.onLoadController();
    },
    onLoadController: function() {
      var userId = this.config.el.attr('data-user-id');

      var mthis = this;
      this.onLoadRequestDB('load/'+userId).done(function(response) {
        console.log(mthis.config.el);
        var response = JSON.parse(response);
        mthis.config.el.append(response.button);
      });
    },
    onLoadRequestDB: function(url) {
      return $.ajax({
        url: url,
        type: 'GET',
        processData: false,
        contentType: false,
        // async: false
      });
    },
  }
});

Edit:
https://stackoverflow.com/a/22121078/1775888 I found some solution here, so I edit loadButton.js like this 

..
init: function(config) {
          this.config = {};
          this.config.el = config.el;  // set each execute have their own private attribute

          this.onLoadAction(this.config);
        },
        onLoadAction: function(config) {
          this.onLoadController(config);
        },
        onLoadController: function(config) {
 ..

pass parameter, then it work.
But I still want to know why I set the loadButton.js init this, in each loop but still can be cover after ajax. makes all response append to element from last execute loadButton.js config parameter

Community
  • 1
  • 1
user1775888
  • 3,147
  • 13
  • 45
  • 65
  • What do you think how many `loadButton`, `loadButton.config` and `loadButton.config.el`s you have? – Bergi Mar 22 '15 at 21:25
  • ?? a lots and I tried to make function reusable , I can just pass the specific element the return html to append – user1775888 Mar 22 '15 at 21:34
  • What should your (singleton!) `loadButton` object represent? What's its purpose? – Bergi Mar 22 '15 at 22:04
  • ?? I'm not understand what you mean? – user1775888 Mar 23 '15 at 00:19
  • Did you ask what is `loadButton` do? I hope it can be use the element from outside inject(`config` parameter), then get the element data attribute unique id send to server, append response back to the element from outside inject(`config` parameter). So I expect each time `loadButton.js` execute, the element inside the function should be base on inject from `config` parameter. But my problem is I can't understand why `loadButton.js` after execute ajax then will append all response to the last execute `loadButton.js` parament element? – user1775888 Mar 23 '15 at 00:29
  • Because `loadButton.js` is only executed once, and you call `.init(…)` multiple times on the *same object*! – Bergi Mar 23 '15 at 01:10
  • really?? why? I call it in a loop and I did test if I put console.log `this.config.el` before ajax then it will show el as same during the loop, not point to the same one – user1775888 Mar 23 '15 at 02:55
  • 1
    Because modules (script files) are loaded only once! All you do is calling `loadButton.init(…)` in a loop. There aren't multiple `loadButton` objects created anywhere. – Bergi Mar 23 '15 at 03:21

0 Answers0