0

I am having a really confusing time which has wasted hours of today!

I posted this earlier: Binding jquery-multifile to a dynamically loaded form

Which explains part #1 of my problem.

I am now having the same issue with jquery.forms

So, to expand what I am doing:

I am loading a Form into a DIV with jquery.load the DIV is prepended to the Body and displayed as a modal window all with jQuery. Once the elements are added to the DOM, I call

$('#imgSelect').MultiFile();

and $('.reportIt').ajaxForm(options);

These two lines add $.MultiFile() and $.ajaxForm (jquery.forms) to the relevant elements, links:

http://malsup.com/jquery/form/

http://www.fyneworks.com/jquery/multiple-file-upload/

This works perfectly well, and all functions as expected... EXCEPT...

If a users presses the close button in the modal window, and then reopens the window without performing a fresh page load it breaks.

When a user closes the modal window this is what happens:

function closeModal(ele) {
    if ($(ele).hasClass('noClose')) {
        alert("Please wait... we're working on something.");
    } else {
        $(ele).fadeOut(function () { 
            $(this).remove();
        });
    };
};

So it very simply fades out the modal div element and then removes it completely from the DOM.

According to this: http://www.w3schools.com/jquery/html_remove.asp

The $().remove() method removes all the elements within the parent container from the DOM completely AND

This method also removes data and events of the selected elements.

So, as I understand it this SHOULD mean that as far as jQuery and the respective plugins are concerned, each time my modal window is created and written to the DOM it is a completely NEW set of elements, therefore, the binding of .MultiFile() and .ajaxForm() should work exactly the same regardless of whether it has been shown before or not

Except that it doesn't work a second time around! (Multifile inputs behave as single inputs, and submitted a form works inline and NOT as an AJAX submit as is required)

The only error I am getting is that mentioned in my previous post.

A little further investigation shows that this error occurs on these lines in the jquery.MultiFile plugin script:

$.fn[method] = function () {
    $.fn.MultiFile.disableEmpty();
         value = $.fn.MultiFile.intercepted[method].apply(this, arguments);              
          setTimeout(function () { $.fn.MultiFile.reEnableEmpty() }, 1000);
          return value;
}; // interception

This is around line 453 for those familiar with this plugin.

Looking at what the plugin does, I thought it was to do with elements with the added class MultiFile-intercepted but watching the DOM manipulation through the Chrome Console I simply can't see any difference in behaviour between the first and second time these functions are run so can't work out what the problem is.

Can anyone offer any advice as to why these functions won't work on a second attempt?

  • Am I missing something in the use of jquery.remove()
  • Is there a remove() function within either/both of the plugins I am using which I am overlooking (I have read the docs)

EDIT: as it's work in progress, there is a working example here:

http://www.guitartrak.com/

If you fill in the "Register an item" form using category > electric guitars, brand > Gibson and then put whatver you want in the other things, then press "CONTINUE", try adding multiple files on the image selection, this should work first time. now, don't press "Save and Post" but press the big "X" and then try the whole process again without a page refresh... you'll see the problem when you try to add images again.

Community
  • 1
  • 1
Jamie Hartnoll
  • 7,231
  • 13
  • 58
  • 97
  • For the record, make yourself a favor and when looking for jQuery documentation use directly the [jQuery API site](http://api.jquery.com/) – Alexander Jan 04 '13 at 22:12
  • Thanks, I have looked there too, but it doesn't clarify what the problem is. I don't think, unless I am mis-reading. – Jamie Hartnoll Jan 04 '13 at 22:14
  • I have no desire to learn what I'm supposed to be doing at your website. Also, since your site is going to be ever-changing, I suggest you post a concise jsFiddle demo of the problem instead. It will be much more likely somebody will take the time to work with that. – Sparky Jan 04 '13 at 22:18
  • Good point, but it's too complex to make a jsFiddle. This link: http://www.guitartrak.com/?testJS=yes will prefill the form on my website, hopefully that will help. All you need to do is press the "Continue" button and then try adding images to the image upload, just press the `Choose Files` button and add some, then close the popup with the `X` in the top right and try it again. – Jamie Hartnoll Jan 04 '13 at 22:44
  • OK, I have now tried to create a `fiddle` but can't replicate the problem because I can't make the modal window load an external file. Using the fiddle, I can add and remove an element from the DOM and the `MultiFile` plugin works. Here's what I have done http://jsfiddle.net/2QSke/ all works here, the difference being though that it is not loading an external file – Jamie Hartnoll Jan 04 '13 at 23:37

0 Answers0