Custom DOM placement using AJAX

Question

I'm using unlimited image upload option in my content type. Upload image and remove the uploaded image options are working fine with the unlimited option.

Usually, the uploaded images will be displaying one by one (Last in Last - Image1, Image2, Image3,..ImageN). But, I need show the uploaded image at first/top place (Last in First - ImageN,..., Image3, Image2, Image1).

Can you please help me in this?

UPDATE:

PFA for bulk node edit page in admin section. I used image upload as nested objects (unlimited). You can see two nodes display in edit mode (Title 1 and Title 2).

• New upload field should be add before the exiting uploaded image section when I click the "Add another item" button OR

• Ok. It can display under the existing uploaded image section. But, the image should be reorder as per my above requirement when I click the "Upload" button.

Note: I saw some hook in ajax.js file that will handle the ajax process. But, I don't know, how it's help to solve my problem.

 *  Drupal.behaviors.myCustomAJAXStuff = {
 *      attach: function (context, settings) {
 *        Drupal.ajax['edit-submit'].commands.insert = function (ajax, response, status) {
 *          new_content = $(response.data);
 *          $('#my-wrapper').append(new_content);
 *          alert('New content was appended to #my-wrapper');
 *        }
 *      }
 *    };

Answer 1

I suggest you first create a View of the image files with node id passed as Contextual Argument. Make it display the images in the order you want and then add this View as a field using Viewfield

Answer 2

Drupal.behaviors are generally called after any new DOM element has been added to or removed from your web page during AJAX requests. Thus it becomes easier to execute your js code. Behaviors can be fired multiple times during page execution and can be run whenever new DOM elements are inserted into the document.

Also, modules could override or extend an existing behavior (e.g. if one module has a behavior of adding a fade effect on all links, a second module could replace the behavior by a different fade effect).

Syntax of writing the code is as below:

Drupal.behaviors.MyModuleName = {
  // This behavior function is called when new element is being added.
  attach: function (context, settings) {
    // Do your js stuffs you want to do after your AJAX call.
  },

  // This behavior function is called when elements are removed.
  detach: function (context, settings) {
    // Do your js stuffs you want to do after your AJAX call.
  }
}

---

Example (putting some new html after our AJAX call in a div):

(function($) {
  Drupal.behaviors.MyModuleName = {
    attach: function (context, settings) {
    // Weare going to do a ajax call, using a menuu call back.
      $.post( 'yourCallBackMenuPath', {
        // Your passsed parameters to the server side for desired functionality.
      }, function(data){
        // 'data' is the defined variable to collect value returned from server
        // which contains the html code which we are going to replace.
        $('elementSelecter').html(data);
      }
    );
  }
}
}(jQuery));

Detailed explanation/discussion regarding the same is available here.

Answer 3

Try to change append() on before() or insertBefore()

Drupal.behaviors.myCustomAJAXStuff = {
       attach: function (context, settings) {
         Drupal.ajax['edit-submit'].commands.insert = function (ajax, response, status) {
           new_content = $(response.data);
           $('#my-wrapper').before(new_content);
           alert('New content was appended to #my-wrapper');
         }
       }
     };