oo practice, make function not hard coding, return data after bind change

Question

I want to find a way,give a dom as parameter and get data, from image_preview. and separate image_preview.model() and image_preivew.on_chage() is event handler

make image_preview reusable not hardcode inside
I espect I will call image_preview pass dom in parameter, and return src as response , then I can use repsponse do something like append ...

  var image_preview = {
    on_change: function(wrap_dom, input_dom) {
      $(wrap_dom).on('change', input_dom, function(event) {  // I have to use on change because there are possible the `input dom` is new append... 
        var el_obj = $(this)[0];
        var form_data = new FormData();

        var file_length = el_obj.files.length;
        for (var i = 0; i < file_length; i++) {
          form_data.append("file[]", el_obj.files[i]);
        }

        image_preview.model(form_data).done(function(response) {
          // console.log(response); // this is work
          return response;
        });
      });
    },
    model: function(form_data) {
      return $.ajax({
        url: uri_public+'/admin/ajax/preview_file',
        type: 'POST',
        data: form_data,
        processData: false,
        contentType: false,
        // async: false
      });
    }
  }


  var app_thumbnail = {
    preview_controller: function() {
      var wrap_dom = '.thumbnail';
      var input_dom = '.upload-form input';
      var result = image_preview.on_change(wrap_dom, input_dom);
      // pass result to render view like append dom....
    },
    render: function() {

    },
  }

  app_thumbnail.preview_controller();

This is a very common question. Try looking here http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — kurideja, Dec 23 '14 at 07:52
@kurideja thanks for reply, I saw that before but I'm stuck I can't return after done function in `on_change()` — user1775888, Dec 23 '14 at 08:18
what are you expecting to do with response? If you want to parse it to html for example you would do it in the done callback...right where your logging works — charlietfl, Dec 23 '14 at 08:19
@charlietfl response is image src I will wrap it with img tag and append — user1775888, Dec 23 '14 at 08:22
simple enough, forget the `return` right after the console.log and append the image there instead — charlietfl, Dec 23 '14 at 08:22
@charlietfl but I tried to let this function can use anywhere I espect I will call `image_preview` give dom, and get src and append in `app_thumbnail.preview_controller()` or other function maybe `app_gallery.preview_controller()` ... — user1775888, Dec 23 '14 at 08:26
can also do something like `image_preview.model(form_data, myImageHandler)` and add the `done` to `$.ajax` in the model — charlietfl, Dec 23 '14 at 08:30
see if this idea helps http://stackoverflow.com/questions/27611949/how-to-store-getjson-object-in-global-variable-and-navigating-through-it-later/27612027#27612027 — charlietfl, Dec 23 '14 at 08:35
I get it now you are trying to use `model` as a service. good luck! — charlietfl, Dec 23 '14 at 08:38
@charlietfl yes! I tried to let `bind event` and `model` as each function in one object `image_preview`, than I can only pass dom then return data do something in other controller like append/render ..I name this like view — user1775888, Dec 23 '14 at 08:43

score 0 · Accepted Answer · answered Dec 23 '14 at 09:37

0

Here is the easiest thing you can do:

  var image_preview = {
    on_change: function(wrap_dom, input_dom) {
      $(wrap_dom).on('change', input_dom, function(event) {
        var el_obj = $(this)[0];
        var form_data = new FormData();

        var file_length = el_obj.files.length;
        for (var i = 0; i < file_length; i++) {
          form_data.append("file[]", el_obj.files[i]);
        }

        image_preview.model(form_data).done(function(response) {
          app_thumbnail.preview_controller(response);
        });
      });
    },
    model: function(form_data) {
      return $.ajax({
        url: uri_public+'/admin/ajax/preview_file',
        type: 'POST',
        data: form_data,
        processData: false,
        contentType: false,
        // async: false
      });
    }
  }

  var app_thumbnail = {
    preview_controller: function(response) {
      var wrap_dom = '.thumbnail';
      var input_dom = '.upload-form input';
      var result = response;
    }
  }

  // If you want to initialize it.
  // image_preview.on_change(..., ...);

answered Dec 23 '14 at 09:37

Gnucki

5,043
2
29
44

1

mmm.... this way still have to hardcode in `image_preview.on_change() ` call `app_thumbnail.preview_controller(response);` or other future function, totally not what I espect to looking for – user1775888 Dec 23 '14 at 09:49
I cannot give you a better answer without knowing what you want to do in your `preview_controller`. Moreover, you should explain in your question what you want to say in your comment: "*or other future function, totally not what I espect to looking for*". – Gnucki Dec 23 '14 at 09:53
I want to find a way,give a dom as parameter and get data, from image_preview. – user1775888 Dec 23 '14 at 10:02
What you want to do (ie. `var result = image_preview.on_change(wrap_dom, input_dom);`) cannot work because you ask for a synchronous return whereas you have an asynchronous return with AJAX (ie. when you get the return in `result` the AJAX request is processing and has no response yet). You have to pass a callback to handle that (that will be executed when the response will be there). I gave you the easiest way. I cannot give you a better option without clearly understanding the architecture you want to make. – Gnucki Dec 23 '14 at 10:15
1

Glad if I could help you understand it. – Gnucki Dec 23 '14 at 10:30

oo practice, make function not hard coding, return data after bind change

1 Answers1